Demo のクイックスタート
この文章では、Tencent Cloud の TRTC Web SDK Demo を素早く実行する方法について説明ます。
前提条件
Tencent Cloud アカウント を登録していることです。
操作手順
1. アプリケーション作成
2. SDKAppID と SDKSecretKey の取得
アプリケーションの作成に成功すると、基本情報から
SDKAppID と SDKSecretKeyを取得できます。Demo を体験するには、この 2 つの情報が必要です。
3. Demo の実行
1. オンライン Demo の実行
TRTC Web では現在、以下の幾つかの基本的な Demo を提供しています。熟知しているプロジェクトフレームワークを選択して実行して体験することができます。
1.1 quick-demo-js は Javascript で開発された Demo です。ソースコード：github。
1.2 quick-demo-vue2-js は Vue2 + Javascript で開発された Demo です。ソースコード：github。
1.3 quick-demo-vue3-ts は Vue3 + Typescript で開発された Demo です。ソースコード：github。
2. ローカル Demo の実行
2.1 Github または Zip からソースコードをダウンロードします。
2.2 以下のガイドに従ってローカル Demo を実行します。
1. ダウンロードしたソースコードから
TRTC_Web/quick-demo-js/index.html ファイルを見つけてブラウザで開きます。2. ブラウザで開いたページに、ステップ 2で取得した SDKAppId と SDKSecretKey を入力します。
3. 機能体験
Enter Room をクリックしてルームに入ります。
Start Local Audio/Videoをクリックすると、マイクまたはカメラをキャプチャできます。
Stop Local Audio/Videoをクリックすると、マイクまたはカメラのキャプチャを終了できます。
Start Share Screen をクリックして画面共有を開始します。
Stop Share Screen をクリックして画面共有をキャンセルします。
4. ルームに参加した後、招待リンクを共有することで、招待された者と一緒に TRTC Web ボイスとビデオの相互通信機能を体験することができます。
1. ダウンロードしたソースコードから
TRTC_Web/quick-demo-vue2-js/ ディレクトリを見つけて入ります。cd quick-demo-vue2-js
2. ローカルで Demo を実行し、端末で以下のコマンドを実行すると、依存関係が自動的にインストールされ、demo が実行されます。
npm start
3. デフォルトのブラウザは自動的に
http://localhost:8080/ アドレスを開きます。4. ブラウザで開いたページに、ステップ 2で取得した SDKAppId と SDKSecretKey を入力します。
5. 機能体験
ルームに入るをクリックしてルームに入ります。
マイク/カメラのキャプチャーボタンをクリックすると、マイクまたはカメラをキャプチャーできます。
マイク/カメラのキャプチャーを終了ボタンをクリックすると、マイクまたはカメラのキャプチャーを終了できます。
画面共有を開始ボタンをクリックして画面共有を開始します
画面共有を終了ボタンをクリックして画面共有をキャンセルします
6. ルームに参加した後、招待リンクを共有することで、招待された者と一緒に TRTC Web ボイスとビデオの相互通信機能を体験することができます。
1. ダウンロードしたソースコードから
TRTC_Web/quick-demo-vue3-ts/ ディレクトリを見つけて入ります。2. ローカルで Demo を実行し、端末で以下のコマンドを実行すると、依存関係が自動的にインストールされ、demo が実行されます。
npm start
3. デフォルトのブラウザは自動的に
http://localhost:3000/ アドレスを開きます。4. ブラウザで開いたページに、ステップ 2で取得した SDKAppId と SDKSecretKey を入力します。
5. 機能体験
userId と roomId を入力します。
Enter Roomをクリックしてルームに入ります。
Start Local Audio/Videoをクリックしてすると、マイクまたはカメラをキャプチャできます。
Stop Local Audio/Videoボタンをクリックしてすると、マイクまたはカメラのキャプチャを終了できます。
Start Share Screen ボタンをクリックしてして画面共有を開始します。
Stop Share Screenボタンをクリックしてして画面共有をキャンセルします。
6. ルームに参加した後、招待リンクを共有することで、招待された者と一緒に TRTC Web ボイスとビデオの相互通信機能を体験することができます。
ご注意：
この文章では、ローカルで SECRETKEY を設定して UserSig を生成する方法を使用します。この方法の SECRETKEY は逆コンパイルや逆クラックされやすく、一度キーが漏洩すると、攻撃者はお客様のTencent Cloud のトラフィックを盗むことができます。そのため、この方法はローカルでの Demo クイックスタートと機能のデバッグにのみ適しています。UserSig を発行する正しい方法はサービス側で UserSig を生成することです。ユーザーがルームに入った場合は、
サーバーに http リクエストを送信します
サービス側が UserSig を生成 します
ルームで使用するためにそれをユーザーに返します
Demo をパブリックネットワークに配置して体験するためには、HTTPS プロトコルでアクセスする必要があります。すなわち、
https://域名/xxxへのアクセスです。その原因については、 ページアクセスプロトコル制限に関する説明を参照してください。よくある質問
サポートするプラットホーム
TRTC Web SDK は WebRTC をベースに実装されており、現在、デスクトップ端末とモバイル端末の両方で主要なブラウザ（Chrome、Edge、Safari、Firefox、Opera）をサポートしています。詳細なサポートシートは サポートするプラットホームを参照してください。
URL ドメイン名プロトコルの制限
ブラウザのセキュリティポリシーの制限により、WebRTC 機能を使用する場合、ページのアクセスプロトコルに厳しい要件があります。以下のシートを参考にアプリケーションを開発・配置してください。
応用シーン | プロトコル | 受信（再生） | 送信（マイク・オン） | 画面共有 | 備考 |
本番環境 | HTTPS プロトコル | サポート | サポート | サポート | 推奨 |
本番環境 | HTTP プロトコル | サポート | サポートしない | サポートしない | - |
ローカル開発環境 | http：//localhost | サポート | サポート | サポート | 推奨 |
ローカル開発環境 | http：//127.0.0.1 | サポート | サポート | サポート | - |
ローカル開発環境 | http：//[本機 IP] | サポート | サポートしない | サポートしない | - |
ローカル開発環境 | file：/// | サポート | サポート | サポート | - |
ファイアウォールの制限
TRTC Web SDK を使用する時に、ユーザーファイアウォールの制限により通常のオーディオ・ビデオ通話ができない場合があります。ファイアウォールの制限に関する対処を参照し、対応するポートとドメイン名をファイアウォールのホワイトリストに追加してください。
