通話モードクイックスタート(Web)

最終更新日:2021-10-12 14:15:35

    ここでは、主にTencent Cloud TRTC Web SDKの基本ワークフロー、およびリアルタイムなオーディオビデオ通話機能を実装する方法を紹介します。

    TRTC Web SDKの使用中には、以下のオブジェクトが頻繁に登場します。

    • Client オブジェクト。ローカルクライアントを表します。Clientクラスのメソッドにより、通話ルームへの参加、ローカルストリーミングの公開、リモートストリーミングの閲覧などの機能を提供します。
    • Streamオブジェクト。オーディオビデオストリーミングオブジェクトを表し、ローカルのオーディオビデオストリーミングオブジェクトLocalStream、およびリモート側のオーディオビデオストリーミングオブジェクトRemoteStreamが含まれます。Streamクラスのメソッドでは主に、オーディオビデオストリーミングオブジェクトのアクションを提供し、これにはオーディオおよびビデオの再生コントロールが含まれます。

    基本のオーディオビデオ通話のAPIコールフローは下図に示すとおりです。

    手順1: Clientオブジェクトの新規作成

    TRTC.createClient()メソッドによって、Clientオブジェクトを作成します。パラメータの設定は以下のとおりです。

    • mode:TRTC通話モードのこと。rtcに設定
    • sdkAppId:Tencent Cloudから申請したsdkAppId
    • userId:ユーザーID
    • userSig:ユーザー署名。計算方式はUserSigの計算方法をご参照ください
    const client = TRTC.createClient({
    mode: 'rtc',
    sdkAppId,
    userId,
    userSig
    });
    

    手順2:オーディオビデオ通話ルームへの参加

    Client.join()を呼び出して、オーディオビデオ通話ルームに参加します。
    パラメータroomId:ルームID

    client
    .join({ roomId })
    .catch(error => {
      console.error('入室失敗 '+ error);
    })
    .then(() => {
      console.log('入室成功');
    });
    

    手順3:ローカルストリーミングの公開およびリモートストリーミングの閲覧

    1. TRTC.createStream()メソッドを使用して、ローカルのオーディオビデオストリーミングを作成します。
      以下のインスタンスは、カメラおよびマイクからオーディオビデオストリーミングを採集しています。パラメータは以下のとおり設定します。

      • userId:ローカルストリーミング所属のユーザーID
      • audio:オーディオの起動の有無
      • video:ビデオの起動の有無
      const localStream = TRTC.createStream({ userId, audio: true, video: true });
      
    1. LocalStream.initialize()を呼び出して、ローカルのオーディオビデオストリーミングを初期化します。
      localStream
      .initialize()
      .catch(error => {
      console.error('ローカルストリーミング初期化の失敗 ' + error);
      })
      .then(() => {
      console.log('ローカルストリーミング初期化の成功');
      });
      
    1. ローカルストリーミングの初期化に成功したら、Client.publish()メソッドを呼び出して、ローカルストリーミングを公開します。
      client
      .publish(localStream)
      .catch(error => {
      console.error('ローカルストリーミング公開の失敗 ' + error);
      })
      .then(() => {
      console.log('ローカルストリーミング公開の成功');
      });
      
    1. リモートストリーミングは、Client.on('stream-added')のイベント監視によって取得され、このイベントを受信した後、Client.subscribe()を介して、リモート側のオーディオビデオストリーミングを閲覧します。
      説明:

      • Client.join()で入室する前に、Client.on('stream-added')イベントを登録し、リモートユーザーの入室通知を見落とすことがないようにしてください。
      • リモートストリーミングから退出するなどその他のイベントは、API詳細ドキュメントで確認できます。
      client.on('stream-added', event => {
      const remoteStream = event.stream;
      console.log('リモートストリーミングの増加: ' + remoteStream.getId());
      //リモートストリーミングの閲覧
      client.subscribe(remoteStream);
      });
      client.on('stream-subscribed', event => {
      const remoteStream = event.stream;
      console.log('リモートストリーミングの閲覧成功: ' + remoteStream.getId());
      // リモートストリーミングの再生
      remoteStream.play('remote_stream-' + remoteStream.getId());
      });
      
    1. ローカルストリーミングの初期化成功のコールバック、またはリモートストリーミングの閲覧成功イベントのコールバックでは、Stream.play()メソッドを呼び出すことで、Webページ上で音声ビデオを再生します。playメソッドがdivエレメントのIDをパラメータとして受け入れると、SDKの内部で、そのdivエレメント下に対応する音声ビデオタグを自動作成し、その上で音声ビデオを再生します。

      • ローカルストリーミングの初期化が成功したとき、ローカルストリーミングを再生します

        localStream
        .initialize()
        .catch(error => {
        console.error('ローカルストリーミング初期化の失敗 ' + error);
        })
        .then(() => {
        console.log('ローカルストリーミング初期化の成功');
        localStream.play('local_stream');
        });
        
      • リモートストリーミングの閲覧が成功したとき、リモートストリーミングを再生

        client.on('stream-subscribed', event => {
        const remoteStream = event.stream;
        console.log('リモートストリーミングの閲覧成功: ' + remoteStream.getId());
        // リモートストリーミングの再生
        remoteStream.play('remote_stream-' + remoteStream.getId());
        });
        

    手順4:オーディオビデオ通話ルームからの退出

    通話終了時は、Client.leave()メソッドを呼び出して、オーディオビデオ通話ルームを退出し、すべてのオーディオビデオ通話によるセッションが終了します。

    client
    .leave()
    .then(() => {
    // 退室成功。再度client.joinをコールして再入室し、新たに通話することもできます。
    })
    .catch(error => {
    console.error('退室失敗 ' + error);
    // このエラーは回復不可能です。ページを更新する必要があります。
    });
    
    注意:

    各端末のユースケースappSceneについては、統一する必要があります。統一していない場合、想定外のトラブルが生じる恐れがあります。