ここでは、主にTencent Cloud TRTC Web SDK Demoを素早く実行する方法をご紹介します。
TRTC Web SDK Demoを実行する前に理解すべき事項。
TRTC Web SDKはWebRTCに基づき実現され、現在、デスクトップとモバイル端末の主なブラウザをサポートしています。詳細なサポートレベルの表については、サポートしているプラットフォームをご参照ください。
お客様のユースケースは対応表に記載されていない場合は、TRTC Web SDK機能テスト画面を開けて、WebViewなど、現在の環境がWebRTCのすべての機能をサポートしているかどうかを確認できます。
ブラウザセキュリティポリシーの制限により、WebRTC機能を使用したページへのアクセスプロトコルには厳しい要件があります。以下の表を参照してアプリケーションの開発とデプロイを行ってください。
ユースケース | プロトコル | 受信(再生) | 送信(マイク・オン) | 画面共有 | 備考 |
---|---|---|---|---|---|
本番環境 | HTTPSプロトコル | サポートあり | サポートあり | サポートあり | 推奨 |
本番環境 | HTTPプロトコル | サポートあり | サポートなし | サポートなし | |
ローカル開発環境 | http://localhost | サポートあり | サポートあり | サポートあり | 推奨 |
ローカル開発環境 | http://127.0.0.1 | サポートあり | サポートあり | サポートあり | |
ローカル開発環境 | http://[ローカルマシンIP] | サポートあり | サポートなし | サポートなし | |
ローカル開発環境 | file:/// | サポートあり | サポートあり | サポートあり |
TRTC Web SDKは次のポートとドメイン名によってデータ転送を行い、ファイアウォールのホワイトリストに追加してください。設定が完了したら、公式サイトDemoにアクセスし体験して設定が有効になっているかを確認できます。具体的には、ファイアウォール制限の対応関連をご参照ください。
*.rtc.qq.com
,yun.tim.qq.com
すでにTencent Cloudアカウントの登録 済みです。
TestTRTC
などのアプリケーション名を入力します。すでにアプリケーションを作成している場合、既存のアプリケーションを選択をクリックします。説明:
- アプリケーション名には、数字、中国語と英語の文字、アンダーラインのみを含めることができ、15文字以内とします。
- タグはTencent Cloudのさまざまなリソースを識別して管理するために使用されます。たとえば、企業に複数の事業部門があり、各部門に1つ以上のTRTCアプリケーションがある場合、企業はTRTCアプリケーションにタグを追加することで部門情報にマークを付けることができます。タグは必須ではありません。実際のビジネスニーズに応じてタグを追加または編集できます。
SDKAppID
とキー
を取得します。さまざまなお客様のニーズに応えるため、TRTC Webでは現在次のような基本Demoが提供されています:
base-js
はTRTC Webの基本Demoです。TRTC Webの基本Demoは、TRTC Web SDKの基本的なオディオ・ビデオ通話、デバイス選択などの機能を統合し、jQueryを使用して開発を行い、ブラウザで直接実行できます。体験したい場合は、Base-jsオンライン体験アドレスにアクセスしてください。quick-demo-js
はTRTC Webを素早く実行するためのDemo(ネイティブJsバージョン)です。TRTC Webを素早く実行するためのDemo(ネイティブJsバージョン)では、TRTC Web SDKの基本的なオーディオ・ビデオ通話、デバイス選択などの機能を統合し、ネイティブJsを使用して開発を行い、ブラウザから直接実行できます。体験したい場合は、quick-demo-jsオンライン体験アドレスにアクセスしてください。quick-demo-vue2-js
はTRTC Webを素早く実行するためのDemo (Vue2バージョン)です。TRTC Webを素早く実行するためのDemo(Vue2バージョン)は、TRTC Web SDKの基本的なオーディオ・ビデオ通話、デバイス選択などの機能を統合し、Vue2を使用して開発を行い、Node環境をインストールしてください。体験したい場合は、quick-demo-vue2-jsオンライン体験アドレスにアクセスしてください。TRTC_Web/base-js/js/debug/GenerateTestUserSig.js
ファイルを探して開きます。GenerateTestUserSig.js
のファイルの関連するパラメータを設定します。SDKAppID
を設定してください。キー
情報を設定してください。 index.html
ファイルを開けば、Demoを実行できます。注意通常の場合は、体験Demoは、サーバーにデプロイし、 https://域名/xxx
経由でアクセスするか、または直接ローカルにサーバーを構築して、localhost:ポート経由で
アクセスしてください。現在デスクトップ版Chromeブラウザは、TRTC Web SDK関連機能のサポート状況がかなり整っていますので、Chromeブラウザを使用して体験することをお勧めします。
説明WebRTCは、カメラとマイクを使用して、オーディオとビデオをキャプチャする必要があります。体験中、Chromeブラウザから関連プロンプトが表示されることがありますが、その場合、許可をクリックします。
注意:
- ここで使用したUserSigの新規作成ソリューションでは、クライアントでSECRETKEYを設定します。この手法のうちSECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します。
- UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを発出し動的にUserSigを取得します。詳細はUserSigに関するご質問をご参照ください。
TRTC SDK 6.6(Web SDK 4.0)バージョン(2019年08月)では、新しい署名アルゴリズムのHMAC-SHA256の使用を開始しました。それ以前に作成されたアプリケーションの場合、新しい暗号化鍵を取得するために、署名アルゴリズムをアップグレードしてください。アップグレードしない場合でも、旧バージョンアルゴリズム ECDSA-SHA256は引き続き使用できます。アップグレードされた場合は、必要に応じて新旧アルゴリズムを切り替えます。
アップグレード/切替の操作:
このエラーが発生した場合、TRTC Web SDKがSTUNトンネリングに失敗したことを意味しますので、[環境要件](#requirements)ファイアウォールの設定を確認してください。
このエラーが発生した場合、TRTC Web SDKがメディア伝送チャネルの確立に失敗したことを意味しますので、[環境要件](#requirements)ファイアウォールの設定を確認してください。
「Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it」が発生した場合は、Tencent Real-Time Communicationアプリケーションのサーバー状態が正常かどうかご確認ください。
TRTCコンソールにログインし、新規作成したアプリケーションをクリックし、アカウント情報をクリックすると、アカウント情報画面でサービス状態を確認できます。
説明:その他のよくあるご質問については、Web端末に関するご質問をご参照ください。
この記事はお役に立ちましたか?