デスクトップブラウザ

最終更新日:2021-10-18 11:14:55

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

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

    WebRTCのテクノロジーはGoogleが初めて提唱し、現在、デスクトップ版Chromeブラウザ、デスクトップ版Edgeブラウザ、デスクトップ版Firefoxブラウザ、デスクトップ版Safariブラウザ及びモバイル版Safariブラウザでは比較的万全なサポートが提供されています。その他のプラットフォーム(Androidプラットフォームブラウザなど)のサポート状況は未だ不十分です。

    お客様のユースケースが主に教育シーンである場合、教師用端末はより安定性の高いElectronソリューションを使用することをお勧めします。このソリューションは、大小のデュアルチャネル画面、より柔軟性の高い画面共有ソリューションおよび脆弱なネットワークに対する高い回復力をサポートしています。

    Tencent Cloud TRTC Web SDKの詳細なサポートレベルの表については、サポートしているプラットフォームをご参照ください。

    注意:

    • ブラウザでTRTC Web SDK能力テスト画面を開けば、現在のブラウザがWebRTCのすべての機能をサポートしているかどうかチェックすることができます。例:WebViewなどのブラウザ環境。
    • H.264の版権の制限により、HuaweiシステムのChromeブラウザおよびChrome WebViewをコアとするブラウザでは、TRTC Web端末のSDKの正常な動作をサポートしていません。

    環境要件

    • 最新バージョンのChromeブラウザを使用してください。
    • TRTC Web SDKは以下のポートに依存してデータ伝送を行います。それをファイアウォールのホワイトリストに追加して設定を完了してから、公式サイトDemoにアクセスして体験していただけば、設定が有効かどうかチェックすることができます。

    より詳細な説明をご覧になる場合は ファイアウォール制限対策に関するご質問をご参照ください。

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

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

    前提条件

    Tencent Cloudアカウントの登録を行い、実名認証が完了済みであること。

    操作手順

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

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

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

    手順2:SDKおよびDemoのソースコードをダウンロード

    1. 実際の業務ニーズに基づき、SDKおよび付属のDemoソースコードをダウンロードします。
    2. ダウンロード完了後、ダウンロードしました。次のステップをクリックします。

    手順3:Demoプロジェクトファイルの設定

    1. 設定変更画面に進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。
    2. Web/js/debug/GenerateTestUserSig.jsファイルを見つけて開きます。
    3. GenerateTestUserSig.jsのファイルの関連するパラメータを設定します。
      • SDKAPPID:デフォルトは0。実際のSDKAppIDを設定してください。
      • SECRETKEY:デフォルトは空文字列。実際のキー情報を設定してください。
    4. 貼り付け完了後、貼り付けました。次のステップをクリックすれば、作成が完了します。
    5. コンパイル完了後、 コンソール概要に戻る をクリックすれば終了です。
    注意:

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

    手順4:Demoの動作

    Chromeブラウザを使用してDemoルートディレクトリのindex.html ファイルを開けば、Demoを実行できます。

    注意:

    • 通常の場合は、体験Demoは、サーバーにデプロイし、https://ドメイン名/xxx経由でアクセスするか、または直接ローカルにサーバーを構築して、localhost:ポート経由でアクセスする必要があります。
    • 現在デスクトップ版Chromeブラウザは、TRTC Web SDK関連機能のサポート状況がかなり整っていますので、Chromeブラウザを使用して体験することをお勧めします。

    Demoの動作画面は図のとおりです。

    • ルーム追加をクリックして、オーディオビデオ通話ルームを追加し、ローカルのオーディオビデオストリームをデプロイします。
      複数ページを開き、各画面でルーム追加をクリックすることができます。正常状態では、複数画面を見てリアルタイムなオーディオビデオ通話をシミュレーションできます。
    • カメラアイコンをクリックすると、カメラデバイスを選択できます。
    • マイクのアイコンをクリックすると、マイクデバイスを選択できます。
      説明:

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

    よくあるご質問

    1. キーをクエリーするとき、公開鍵および秘密鍵の情報しか取得できませんが、キーはどうしたら取得できますか。

    TRTC SDK 6.6バージョン(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 errorが発生したときはどう対処すればよいでしょうか。

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