tencent cloud

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

事例

Demoをクリックしてオーディオビデオ機能の体験に移動し、またはGitHub にログインして、このドキュメントに関連するサンプルコードを取得できます。

手順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' })
  .then(() => {
    console.log('入室成功');
  })
  .catch(error => {
    console.error('入室失敗 '+ error);
  });

手順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());
});

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

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

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

• userId：ローカルストリーミング所属のユーザーID

• audio：オーディオの起動の有無

• video：ビデオの起動の有無

  const localStream = TRTC.createStream({ userId, audio: true, video: true });
  

2. LocalStream.initialize()を呼び出して、ローカルのオーディオビデオストリーミングを初期化します。
   localStream
       .initialize()
       .then(() => {
       console.log('ローカルストリーミング初期化の成功');
       })
       .catch(error => {
       console.error('ローカルストリーミング初期化の失敗 ' + error);
       });

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

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

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

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

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

注意：

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