今回はTencent Real-Time Communication( TRTC )のWeb SDKを使用したブラウザでの通話サービスについて試したいと思います。
サポートされているプラットフォームについて
公式より、TRTC Web SDKに対応しているプラットフォームは以下通りです。
作業環境
Windows10
Chrome(version: 87.0.4280.66)
環境への要求事項
- ブラウザはchromeの最新版を使用することが推奨されています
- TRTC Web SDKは、データ転送のために以下のポートに依存しています
- TCPポート：8687
- UDPポート：8000、808080、8800、843、443、16285
- ドメイン名：qcloud.rtc.qq.com
- ファイアウォールのホワイトリストに追加し、設定が完了したら、公式サイトのデモで設定が有効かどうかを確認してください (ローカルでの実行時は特に気にしなくても良いと思います)
全てチェックが付けば問題無しです
- アプリの作成
まず Tencent Cloud Console から「Tencent Real-Time Communication」を選択してTRTCのコンソールへ移動します
そこで、 「Develop Assistance」 の 「Demo Quick Run」 をクリックし、任意のアプリ名を設定してから 「Create Application」 をクリックすると、アプリケーションの作成が完了します。
- ソースコードのDownload
TRTC SDKのWeb用DemoのソースコードをDownloadします 。
Web Demo download
H5_latestというzipファイルがインストールされると思います。
次に 「Application Management」 から手順1で作成したアプリケーションのSDKAPPIDとSECREKEYを確認します。
上記のSDKAPPIDとSECREKEYを先程Downloadしたソースコードの
H5_latest/Web/TRTCSimpleDemo/js/debug/GenerateTestUserSig.jsファイルに設定します。
ここまででアプリのセットアップは完了です。
- ローカルのChromeブラウザでの動作確認
H5_latest/Web/TRTCSimpleDemo/index.htmlを開けば動作確認が出来ます。デフォルトのブラウザがChromeで無い場合はブラウザへのドラッグ＆ドロップ等でChromeから開いて下さい。
ブラウザを2つ開いて同じ 「部屋番号」 を指定して入室すると2人での通話を試すことが出来ます。(※今回は簡単のためにローカル環境で確認を行っていますが、コードをサーバにデプロイすれば、そのIPアドレス経由でアクセスが可能です)
※ ユーザ名 はアルファベット(a-z,A-Z)、数字(0-9)、 ハイフン(-)、アンダースコア(_)のみ使用可能です。また、 部屋番号 は整数値のみ使用可能です。
同じブラウザで同じルームにログインした状態：
さらに画面共有をした状態：
無事成功！
通話の利用統計の確認
TRTCのコンソールで 「Usage Statistics」 をクリックすると、通話の時間や通話の詳細イベントなどを確認することが出来ます。
