tencent cloud

このドキュメントは2つのパートから成り、ブラウザで実行できる一連の音声通話ソリューションを実装する方法について説明します。

• パート1：サービスをアクティブ化する方法および提供するDemoのクイックスタートについて説明します。
• パート2：TRTCCallingコンポーネントを使用して、独自の音声通話機能をすばやく構築する方法について説明します。

環境要件

最新バージョンのChromeブラウザをご使用ください。現在、デスクトップのChromeブラウザはTRTC Web SDKをサポートしており、関連機能は比較的整っていますので、Chromeブラウザを使用して体験することをお勧めします。

• TRTCCallingは以下のポートに依存してデータ送信を行っていますので、これらをファイアウォール・ホワイトリストに追加してください。設定が完了したら、公式サイト Demoにアクセスして体験していただけば、設定が有効かどうかをチェックすることができます。
  • TCPポート：8687
  • UDPポート：8000、8080、8800、843、443、16285
  • ドメイン名：qcloud.rtc.qq.com
    具体的には、ファイアウォール制限の対処関連をご参照ください。

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

現在、このソリューションは、次のプラットフォームをサポートしています。

説明：

互換性照会の詳細については、ブラウザサポート状況をご参照ください。また、TRTC検査ページでオンライン検査することも可能です。

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

Demoのクイックスタートテスト

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

1.Tencent Cloudアカウントを登録します。
2. TRTCコンソールにログインし、開発支援 > Demoクイックスタートを選択します。
3. アプリケーション名（例：TestTRTC）を入力し、作成をクリックします。

手順2：Demoのダウンロード

1. 実際のサービスニーズに応じてDemoソースコードをダウンロードするか、または、クリックしてTUICallingに進み、Demoソースコードをダウンロードします。
2. ダウンロード完了後、ダウンロード完了、次のステップへをクリックします。
   

ステップ3：Demo プログラムファイルの設定

1. 設定変更画面に進み、ダウンロードしたソースコードパッケージに基づき、対応する開発環境を選択します。
2. Web/public/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の実行

1. Demoディレクトリに次のコマンドを順番に入力します。

   npm install
   npm run serve
   

2. Chromeブラウザを起動し、リンクhttp://localhost:8080/を開きます。すべてが正常であれば、Demo実行インターフェースは次の図のようになります。
   

3. useridを入力し、ログインをクリックして、音声通話を選択します。
   

4. 呼び出し先のuseridを入力し、呼出をクリックします。
   

5. 音声通話を開始できます。
   

独自の音声通話の作成

手順1：TRTCCallingコンポーネントの統合

説明：

• 0.6.0以降は、trtc-js-sdk、tim-js-sdkおよびtsignalingの依存関係を手動でインストールする必要があります。
• trtc-calling-js.jsのボリュームを縮小し、アクセス側で使用されているtrtc-js-sdk、tim-js-sdkおよびtsignalingのバージョン競合を回避するために、trtc-calling-js.jsは、外部依存関係としてtrtc-js-sdk、tim-js-sdk、tsignalingをパッケージ化しているので、使用する前に依存関係を手動でインストールする必要があります。

// npm方式によるインストール
  npm install trtc-js-sdk --save

  npm install tim-js-sdk --save

  npm install tsignaling --save

  npm install trtc-calling-js --save

//スクリプト方式によってtrtc-calling-jsを使用する必要がある場合は、順序どおりに次のリソースをインポートする必要があります。

  <script src="./trtc.js"></script>
  <script src="./tim-js.js"></script>
  <script src="./tsignaling.js"></script>
  <script src="./trtc-calling-js.js"></script>

手順2：TRTCCallingオブジェクトの作成

TRTCCallingオブジェクトを作成し、SDKAppIDパラメータをお客様のSDKAppIDに設定します。

import TRTCCalling from 'trtc-calling-js';

let options = {
 SDKAppID: 0, // アクセスするときは、0をお客様のSDKAppIDに置き換える必要があります。
 // v0.10.2から、timパラメータを追加します
 // TIMインスタンスの一意性を保証するために、timパラメータはサービス内にすでに存在するTIMインスタンスに使用されます。
 tim: tim
};
const trtcCalling = new TRTCCalling(options);

手順3：ログインの完了

trtcCalling.login({
 userID,
 userSig,
});

手順4：1v1通話の実現

• 発呼者：特定ユーザーを呼び出す

  trtcCalling.call({
  userID,  //ユーザーID
  type: 1, //通話タイプ、0-不明、1-音声通話、2-ビデオ通話
  timeout  //招待タイムアウト時間、単位s（秒）
  });
  

• 着呼者：新しい呼び出しに応答

  // 応答
  trtcCalling.accept();
  //拒否します
  trtcCalling.reject()
  

• 通話終了

  trtcCalling.hangup()
  

よくあるご質問

通話がつながらなかったり、強制オフラインになったりするのはなぜですか。

コンポーネントは現在、マルチインスタンスのログインやオフラインプッシュのシグナリング機能をサポートしていません。現在のログインアカウントの一意性をご確認ください。

説明：

• マルチインスタンス：1つのUserIDで繰り返しログインしたり、異なるターミナルからログインしたりすると、シグナリングの混乱が生じます。
• オフラインプッシュ：インスタンスはオンラインの場合にのみメッセージを受信できます。インスタンスがオフラインのときに受信したシグナリングは、オンラインになった後は再度プッシュされません。
  その他よくあるご質問については、TRTCCalling Webに関するご質問をご参照ください。

技術的なお問い合わせ

詳細については、お問い合わせにご連絡をいただくか、colleenyu@tencent.comにメールでご連絡ください。

参考ドキュメント

• TRTCCalling web公式サイトで体験
• TRTCCalling npm
• TRTCCalling web demoソースコード
• TRTCCalling web API
• TRTCCalling webに関するご質問