tencent cloud

フィードバック

最終更新日:2022-09-05 09:34:36

    このドキュメントでは、主に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を使用する時、ユーザはファイアーフォールの制限でオーディオビデオ通話を利用できない可能性がありますので、ファイアウォール制限への対応 を参照し、関連するポートとドメイン名をファイアウォールのホワイトリストに追加してください。

    前提条件

    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が提供されています:

    • Demo 1:base-js
      開発フレーム:jQuery + ネイティブJavaScript
      TRTC Webの基本Demo(jQueryバージョン)は、TRTC Web SDKの基本的なオーディオビデオ通話、デバイス選択などの機能を統合し、ブラウザで直接実行できます。クイックエクスペリエンスの場合は、base-jsオンライン体験アドレスにアクセスしてください。
    • Demo 2:quick-demo-js
      開発フレーム:フレームなし、ネイティブJavaScript
      TRTC Webクイック実行Demo(ネイティブJavaScriptバージョン)では、TRTC Web SDKの基本的なオーディオビデオ通話、デバイス選択などの機能を統合し、ブラウザから直接実行できます。クイックエクスペリエンスの場合は、quick-demo-jsオンライン体験アドレスにアクセスしてください。
    • Demo 3:quick-demo-vue2-js
      開発フレーム:Vue2 + JavaScript
      TRTC Webクイック実行Demo(Vue2バージョン)では、TRTC Web SDKの基本的なオーディオビデオ通話、デバイス選択などの機能を統合しています。利用するにはNode環境をインストールする必要があります。クイックエクスペリエンスの場合は、quick-demo-vue2-jsオンライン体験アドレスにアクセスしてください。
    • Demo 4:quick-demo-vue3-ts
      開発フレーム:Vue3 + TypeScript
      TRTC Webクイック実行Demo(Vue3バージョン)では、TRTC Web SDKの基本的なオーディオビデオ通話、デバイス選択などの機能を統合しています。利用するにはNode環境をインストールする必要があります。クイックエクスペリエンスの場合は、quick-demo-vue3-tsオンライン体験アドレスにアクセスしてください。

    ディレクトリはTRTC_Web/base-jsです。

    1. ダウンロードしたソースコードでTRTC_Web/base-js/js/debug/GenerateTestUserSig.jsファイルを探して開きます。
    2. GenerateTestUserSig.jsファイルの関連するパラメータを設定します。
    • SDKAPPID:デフォルトでは0です。実際のSDKAppIDを設定してください。
    • SECRETKEY:デフォルトでは空文字列です。実際のキー情報を設定してください。
    1. Demoの実行
      Chromeブラウザを使用してDemoルートディレクトリのindex.htmlファイルを開けば、Demoを実行できます。

    注意
  • 通常の場合は、体験Demoは、サーバーにデプロイし、https://ドメイン名/xxx経由でアクセスするか、または直接ローカルにサーバーを構築して、localhost:ポート経由でアクセスする必要があります。
  • 現在デスクトップ版Chromeブラウザは、TRTC Web SDK関連機能のサポート状況がかなり整っていますので、Chromeブラウザを使用して体験することをお勧めします。
    • ルーム追加をクリックして、オーディオビデオ通話ルームを追加し、ローカルのオーディオビデオストリームをデプロイします。
      複数ページを開き、各画面でルーム追加をクリックすることができます。正常状態では、複数画面を見てリアルタイムなオーディオビデオ通話をシミュレーションできます。
    • カメラアイコンをクリックすると、カメラデバイスを選択できます。
    • マイクのアイコンをクリックすると、マイクデバイスを選択できます。

    説明

    WebRTCは、カメラとマイクを使用して、オーディオとビデオをキャプチャする必要があります。体験中、Chromeブラウザから関連プロンプトが表示されることがありますが、その場合、許可をクリックします。

    注意:
    • このドキュメントで使用したUserSigのソリューションは、クライアントでSECRETKEYを構成することです。この方法では、SECRETKEYは逆コンパイルによって逆向きにクラッキングされやすく、キーがいったん漏洩すると、攻撃者はTencent Cloudトラフィックを盗用できるようになります。そのためこの方法は、ローカルのDemoクイックスタートおよび機能デバッグにのみ適合します
    • UserSigを正しく発行するには、UserSigコンピューティングコードをサーバー側に渡し、App指向のインターフェースを提供してもらいます。Appは、UserSigが必要なときに、サービスサーバーに対してダイナミック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トンネリングに失敗したことを意味しますので、ファイアウォールの制限の対応関連ファイアウォールの設定を確認してください。

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

    このエラーが発生した場合、TRTC Web SDKがメディア伝送チャネルの確立に失敗したことを意味しますので、ファイアウォールの制限の対応関連ファイアウォールの設定を確認してください。

    4.10006 エラーが発生したときはどう対処すればよいでしょうか。

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

    説明:

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

    お問い合わせ

    カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

    テクニカルサポート

    さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

    電話サポート(24 時間365日対応)