はじめに
過去Skywayについて投稿した関係で、Tencent Cloud関連の情報をいただいたので、取り急ぎTencent CloudのRTC EngineのVideoチャットのデモを試してみました。
試した環境
- Windows 10
- nginx 1.16.1
デモコードについて
githubからhtmlとjavasciptのコードのみの「quick-demo-js」を取得しました。WebRtcを使用したVideoチャットのデモのコードです。
githubには、他にもVueやReact用のコードが配置されています。
実行手順
以下、実行した手順です。
アプリケーションの作成
デモコードを使用するにあたり、Tencent Cloudで、RTC Engin用のアプリケーションを作成し、SDKAppID、Secret Keyを取得しておきます。
ngixを起動
ダウンロードしたデモコードをnginxに配置して、nginxを起動します。
起動したことを確認して、
http://localhost/quick-demo-js/index.htmlにアクセスします。
Videoチャット呼び出し側の操作
SDKAppIdとSecretKeyを入力してJoin Roomボタンを押下するとこで通話を開始します。UserIdとroomIdはDemoプログラム内部でランダムな値を生成し、画面遷移時に設定されています。使用者が任意の値を入力することもできます。
Join Roomボタンを押下することにより、ローカルのカメラ映像の配信が開始され、Videoチャット呼び出し用のLinkが生成されます。呼び出す相手に送付し、相手側からこのLinkにアクセスしてもらいます。
相手側の操作
受け取ったリンクにアクセスすると以下画面が表示されます。
Joinボタンを押下することで、通話が開始されます。
デモコードについて
デモコードの内容について軽く確認してみました。
呼び出し側
呼び出し側では主に5つの処理を順におこなっています。
-
ユーザシグネチャの生成
SDKAppId、UserId、シークレットキーからユーザシグネチャを生成しています。デモ用のためクライアント側で生成していますが、実運用ではサーバ側で生成すべきとのこと。 -
接続用のClientの生成
SDKAppId、UserId、ユーザシグネチャを引数にして接続用のClientインスタンスを生成しています。 -
roomIdを指定してサーバに接続
-
ローカルのカメラ映像の送信
-
相手先が接続するリンクの生成
クエリパラメタに、SDKAppId、ユーザID、ユーザシグネチャ、roomIdを含みます。
相手側
相手側では、URLリンクにアクセスして接続しますが、主に以下の4つの処理を順に行っています。
- クエリパラメタの取得
- 接続用のClientの生成
クエリパラメタのSDKAppId、UserId、ユーザシグネチャを引数にして生成しています。 - クエリパラメタのroomIdを指定してサーバ接続
- ローカルのカメラ映像の送信
おわりに
SkyWayと比較した場合、機能的にはそんなに差はなさそうだが、デモ用のコードはRTC Engineのほうが作り込まれて使用しやすかったです。Tencent Cloudには他多くの機能があり、それらとの連携も確認したいと思いました。