デスクトップブラウザー

最終更新日:2021-10-20 16:24:50

    ここでは主に、視聴者としてライブストリーミングルームに入室し、マイク接続して双方向通信を行うシナリオをご紹介します。キャスターとして入室してライブストリーミングを行うシナリオは、TRTCの通話シナリオと同様です。TRTC通話をご参照ください。

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

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

    • mode:インタラクティブライブストリーミングモードの場合、liveに設定します
    • sdkAppId:Tencent Cloudから申請したsdkAppId
    • userId:ユーザーID
    • userSig:ユーザー署名
    const client = TRTC.createClient({
    mode: 'live',
    sdkAppId,
    userId,
    userSig
    });

    手順2:視聴者としてライブストリーミングルームに入室

    Client.join()を呼び出して、オーディオビデオ通話ルームに参加します。パラメータの設定は次のとおりです。

    • roomId:ルームID
    • role:ユーザーロール
      • anchor:キャスター。キャスターのロールには、ローカルストリームを公開し、リモートストリームを受信する権限があります。デフォルトはキャスターロールです。
      • audience:視聴者。視聴者のロールには、リモートストリームを受信する権限のみがあり、ローカルストリームを公開する権限はありません。視聴者がキャスターとマイク接続して双方向通信を行いたい場合、Client.switchRole()を介してロールをanchorキャスターロールに切り替えた上で、ローカルストリームを公開する必要があります。
    // 視聴者ロールで入室して視聴します
    client
    .join({ roomId, role: 'audience' })
    .catch(error => {
    console.error('入室失敗 '+ error);
    })
    .then(() => {
    console.log('入室成功');
    });

    手順3:ライブストリーミングの視聴

    1. リモートストリーミングは、client.on('stream-added')イベントのモニタによって取得され、そのイベントを受信した後は、 Client.subscribe()によってリモートオーディオビデオストリーミングを閲覧します。
      説明:

      Client.join()で入室する前にclient.on('stream-added')イベントを登録し、リモートユーザーの入室通知を見落とすことがないようにしてください。

    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エレメント下に対応する音声ビデオタグを自動作成し、その上で音声ビデオを再生します。
      client.on('stream-subscribed', event => {
      const remoteStream = event.stream;
      console.log('リモートストリーミングの閲覧成功: ' + remoteStream.getId());
      // リモートストリーミングの再生
      remoteStream.play('remote_stream-' + remoteStream.getId());
      });

    手順4:キャスターとのマイク接続・双方向通信

    手順4.1:ロールの切り替え

    Client.switchRole()を使用して、ロールをanchorキャスターに切り替えます。

    client
    .switchRole('anchor')
    .catch(error => {
    console.error('ロールの切り替えに失敗しました' + error);
    })
    .then(() => {
    // ロールの切り替えに成功しました。現在のロールはキャスターです
    });

    手順4.2:マイク接続・双方向通信

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

      • userId:ローカルストリーミング所属のユーザーID
      • audio:オーディオの起動の有無
      • video:ビデオの起動の有無
      const localStream = TRTC.createStream({ userId, audio: true, video: true });
      
    2. LocalStream.initialize()を呼び出して、ローカルのオーディオビデオストリーミングを初期化します。

      localStream
      .initialize()
      .catch(error => {
      console.error('ローカルストリーミング初期化の失敗 ' + error);
      })
      .then(() => {
      console.log('ローカルストリーミング初期化の成功');
      });
    3. ローカルストリーミングの初期化に成功すると、ローカルストリーミングが再生されます。

      localStream
      .initialize()
      .catch(error => {
      console.error('ローカルストリーミング初期化の失敗 ' + error);
      })
      .then(() => {
      console.log('ローカルストリーミング初期化の成功');
      localStream.play('local_stream');
      });
    4. ローカルストリーミングの初期化に成功したら、Client.publish()メソッドを呼び出して、ローカルストリーミングを公開し、視聴者とのマイク接続・双方向通信をオンにします。

      client
      .publish(localStream)
      .catch(error => {
      console.error('ローカルストリーミング公開の失敗 ' + error);
      })
      .then(() => {
      console.log('ローカルストリーミング公開の成功');
      });

    手順5:ライブストリーミングルームから退出する

    ライブストリーミング終了時は、Client.leave()メソッドを呼び出してライブストリーミングルームを退出し、すべてのライブストリーミングセッションを終了します。

    client
    .leave()
    .catch(error => {
    console.error('退室失敗 ' + error);
    })
    .then(() => {
    // 退出に成功
    });
    注意:

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