AgoraでwebRTCのアプリを作ってみる

AgoraでwebRTCのアプリを作ってみる

こんにちは。キャレット合同会社の椎原です。

検索で来られた方はAgoraがなんなのかある程度ご存じかと思います。ビデオ配信のプラットフォームの一つです。
弊社では、AWSに強いので、AWS IVSを使ってライブ配信アプリを作ってますが、一方向配信でライブチャットができません。そんな欠点をクリアしてくれるのがAgoraです。費用も安く、低遅延なので、次期システムはこれでいこうという話になり、現在評価中です。

で、web版のテストアプリを作ってみました。

コードは行数があるので載せません。こちらよりサンプルをダウンロードしてください。
はい、動かないです。ですが、動作確認済みです。動かないのは認証に使用しているトークンが24時間で切れてしまうせいです。通信料金も掛かるのでトークンの更新は行いません。ソースだけ見てください。
デベロッパー登録して、ダッシュボードにID、部屋名、トークンが表示されますので、それをソースの該当部分に転記してください。

開発環境

OS windows10 Pro
エディタ VSCode
ブラウザ Chorme 87.0.4280.141

仕様

  • OBSスタジオという無料の配信ソフトがありますので、それを動画で、BGMはspofifyで再生したものをそのまま受信者へ流す。
  • カメラか、OBSスタジオか、BGMか音声かを選択できるようにする。
  • 配信者 → webアプリ → Agora → webアプリ → 受信者という流れ。

トラブルその1

OBSスタジオがビデオデバイスの一覧に出てこない。
ローカルでテストしていると一向に出てこない。
console.logでdeviceIDを見ると空。
なぜなのか?調べたら、回答がありました。
Why can’t I get the device ID on Chrome 81?
早い話、ブラウザの仕様でセキュリティ上、https://じゃないと標準デバイスしか表示されないとのことでした。
なるほど。サーバーにアップロードしたら出てきました。

トラブルその2

CDNというAgora.io SDKへのリンクを張って読み込む方式を採用していたのですが、バージョンを上げると404(ファイルがない)。
おかしいと思い、よく見たら、web版だけバージョンが4
サンプルアプリが使ってる旧バージョンが
<script src="https://cdn.agora.io/sdk/web/AgoraRTCSDK-*.*.*.js"></script>
新バージョンが
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.2.1.js"></script>
とURLとファイル名が全然違う。直感で盲目的に数字だけ変えても駄目だったわけだわ。

懲りたので私のアプリはSDKファイルを取得してサーバーにアップロードしてます。

トラブルその3

待てよ、ファイル名が変わっているのなら中身も大幅に変わったんじゃ……
正解です。
agora.io Web SDK用(バージョン4:Next Generation)の変更点
関数が統合されたり、プロパティが変更されたりしてます。
SDK NGのマニュアルはこちら
困ったことに現時点(2021/01/22)ではサンプルやチュートリアルの大半は旧バージョンなんですよ。だから、サンプルをコピペで組み合わせようとすると、齟齬が生じて動かないという。
サンプルも解説も公式が充実しているのでそれはそれで喜んだんですけどこんな罠があるとは。

トラブルその4

動画は配信できるのは確認できました。できなかったのはBGMなどの音声です。
これは、ネットの向こうに相方がいないとできません(個人開発はPC2台用意してネットにつながないと駄目じゃないかな)
仕様通り、OBSスタジオで配信します(配信開始ボタンを押しても配信されません。プロトコルが違います。仮想カメラ開始ボタンを押してください)

BGMはspofifyを起動しますが、その前に録音デバイスをステレオミキサーに設定します(でないとネット上に音が出ない)
あ、いろいろ音を弄るつもりでなければOSに最初から付いてるものでいいですよ。
アプリがおかしいか、環境がおかしいか切り分けるために、Youtube Liveに加入し動画と音声を流し、アーカイブで見てみました。OKだったので、同僚に視聴してもらって確認。

コントロールパネルのサウンドで入力にステレオミキサーになっているか確認。設定は右のサウンドコントロールパネルより。

まあ一段落しました。公式は情報が充実しているんですが、プライベートな情報がほぼないので手探りでつくりました。V-CUBE社が「サポートは俺に任せろ!」と言ってますので、困ったらこちらへ。https://jp.vcube.com/

お問い合わせ

キャレット合同会社へのお問い合わせやご相談などがありましたら、以下のメールフォームよりお気軽にご連絡ください。

Agora.ioカテゴリの最新記事