tencent cloud

ここでは、主にTencent Cloud TRTC Web SDK Demoを素早く実行する方法をご紹介します。

準備作業

TRTC Web SDK Demoを実行する前に理解すべき事項。

サポートするプラットフォーム

TRTC Web SDKはWebRTCに基づき実現され、現在、デスクトップとモバイル端末の主なブラウザをサポートしています。詳細なサポートレベルの表については、サポートしているプラットフォームをご参照ください。
お客様のユースケースは対応表に記載されていない場合は、TRTC Web SDK機能テスト画面を開けて、WebViewなど、現在の環境がWebRTCのすべての機能をサポートしているかどうかを確認できます。

• お客様のユースケースが主に教育シーンである場合は、教師用端末ではElectronソリューションの使用をお勧めし、大小2チャネル画面、よりフレキシブルな画面共有方法およびより強力な弱ネットワークリカバリー機能をサポートしています。

URLドメイン名プロトコルの制限

ブラウザセキュリティポリシーの制限により、WebRTC機能を使用したページへのアクセスプロトコルには厳しい要件があります。以下の表を参照してアプリケーションの開発とデプロイを行ってください。

ユースケース	プロトコル	受信（再生）	送信（マイク・オン）	画面共有	備考
本番環境	HTTPSプロトコル	サポートあり	サポートあり	サポートあり	推奨
本番環境	HTTPプロトコル	サポートあり	サポートなし	サポートなし
ローカル開発環境	http://localhost	サポートあり	サポートあり	サポートあり	推奨
ローカル開発環境	http://127.0.0.1	サポートあり	サポートあり	サポートあり
ローカル開発環境	http://[ローカルマシンIP]	サポートあり	サポートなし	サポートなし
ローカル開発環境	file:///	サポートあり	サポートあり	サポートあり

ファイアウォールの制限

TRTC Web SDKは次のポートとドメイン名によってデータ転送を行い、ファイアウォールのホワイトリストに追加してください。設定が完了したら、公式サイトDemoにアクセスし体験して設定が有効になっているかを確認できます。具体的には、ファイアウォール制限の対応関連をご参照ください。

• TCPポート：8687
• UDPポート：8000、8080、8800、843、443、16285
• ドメイン名：*.rtc.qq.com，yun.tim.qq.com

前提条件

すでにTencent Cloudアカウントの登録 済みです。

操作手順

手順1：アプリケーションの新規作成

1. TRTCコンソールにログインし、 開発支援 > Demoクイックスタートを選択します。
2. アプリケーションの作成をクリックし、TestTRTCなどのアプリケーション名を入力します。すでにアプリケーションを作成している場合、既存のアプリケーションを選択をクリックします。
3. 実際の業務ニーズに応じてタグを追加または編集し、作成をクリックします。

説明：

• アプリケーション名には、数字、中国語と英語の文字、アンダーラインのみを含めることができ、15文字以内とします。
• タグはTencent Cloudのさまざまなリソースを識別して管理するために使用されます。たとえば、企業に複数の事業部門があり、各部門に1つ以上のTRTCアプリケーションがある場合、企業はTRTCアプリケーションにタグを追加することで部門情報にマークを付けることができます。タグは必須ではありません。実際のビジネスニーズに応じてタグを追加または編集できます。

ステップ2：SDKおよびDemoソースコードをダウンロード

1. Web端末のSDKとそれに付随するDemoをダウンロードします。
2. ダウンロード完了後、ダウンロードしました。次のステップをクリックします。

ステップ3：SDKAppIDとキー（SecretKey）を取得

1. 設定変更ページに進み、SDKAppIDとキーを取得します。
2. SDKAppIDとキー（SecretKey）の貼り付け完了後、貼り付けました。次のステップへをクリックして作成は完了します。

手順4：Demoの動作

さまざまなお客様のニーズに応えるため、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オンライン体験アドレスにアクセスしてください。

注意：

• ここで使用したUserSigの新規作成ソリューションでは、クライアントでSECRETKEYを設定します。この手法のうちSECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの手法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します。
• UserSigの正しい発行方法は、UserSigの計算コードをサーバーに統合し、Appのインターフェース向けに提供します。UserSigが必要なときは、Appから業務サーバーにリクエストを発出し動的にUserSigを取得します。詳細はUserSigに関するご質問をご参照ください。

よくあるご質問

1. キーをクエリーするとき、パブリックキーとプライベートキーの情報しか取得できませんが、キーはどのように取得できますか？

TRTC SDK 6.6（Web SDK 4.0）バージョン（2019年08月）では、新しい署名アルゴリズムのHMAC-SHA256の使用を開始しました。それ以前に作成されたアプリケーションの場合、新しい暗号化鍵を取得するために、署名アルゴリズムをアップグレードしてください。アップグレードしない場合でも、旧バージョンアルゴリズム ECDSA-SHA256は引き続き使用できます。アップグレードされた場合は、必要に応じて新旧アルゴリズムを切り替えます。

アップグレード/切替の操作：

1. TRTCコンソールにログインします。
2. 左側ナビゲーションバーでアプリケーション管理を選択し、ターゲットアプリケーションのある行のアプリケーション情報をクリックします。
   3．クイックマスタータブを選択してステップ2 UserSigを発行するためのキーを取得エリアのここをクリックしてアップグレード、非対称暗号化またはHMAC-SHA256をクリックします。

• アップグレード
• 旧バージョンアルゴリズムの ECDSA-SHA256に切り替えます：
  
• 新バージョンアルゴリズムのHMAC-SHA256に切り替えます：
  

2. クライアントエラーの発生：“RtcError: no valid ice candidate found”にはどう対処しますか？

このエラーが発生した場合、TRTC Web SDKがSTUNトンネリングに失敗したことを意味しますので、[環境要件]（#requirements）ファイアウォールの設定を確認してください。

3. クライアントエラーの発生：「RtcError: ICE/DTLS Transport connection failed"」または 「RtcError: DTLS Transport connection timeout」にはどう対処しますか？

このエラーが発生した場合、TRTC Web SDKがメディア伝送チャネルの確立に失敗したことを意味しますので、[環境要件]（#requirements）ファイアウォールの設定を確認してください。

4.10006 エラーが発生したときはどう対処しますか？

「Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it」が発生した場合は、Tencent Real-Time Communicationアプリケーションのサーバー状態が正常かどうかご確認ください。
TRTCコンソールにログインし、新規作成したアプリケーションをクリックし、アカウント情報をクリックすると、アカウント情報画面でサービス状態を確認できます。

説明：

その他のよくあるご質問については、Web端末に関するご質問をご参照ください。