互动直播

本文主要介绍以观众身份进入直播间，然后发起连麦互动的场景，以主播身份进入房间进行直播的场景跟实时音视频通话场景流程一样，请参考实时音视频通话。

创建 Client 对象

通过TRTC.createClient()方法创建Client对象，参数设置：

mode: 互动直播模式，设置为‘live’。
sdkAppId: 您从腾讯云申请的 sdkAppId
userId: 用户 ID
userSig: 用户签名

const client = TRTC.createClient({
  mode: 'live',
  sdkAppId,
  userId,
  userSig
});

以观众身份进入直播房间

调用client.join()进入音视频通话房间。参数：

roomId：房间 ID
role：用户角色：
anchor：主播，主播角色具有发布本地流和接收远端流的权限。默认是主播角色。
audience：观众，观众角色只有接收远端流的权限，没有发布本地流的权限。若观众想要跟主播连麦互动，需要通过switchRole()切换角色到anchor主播角色再发布本地流。

// 以观众角色进房收看
client
  .join({ roomId，role: 'audience' })
  .catch(error => {
    console.error('进房失败 ' + error);
  })
  .then(() => {
    console.log('进房成功');
  });

收看直播

订阅远端音视频流

远端流通过监听事件client.on('stream-added')获得，请在join()进房前注册该事件，确保您不会错过远端用户进房通知。收到上述事件后要通过subscribe()订阅远端音视频流。

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

播放音视频流

在远端流订阅成功事件回调中，通过调用play()方法在网页中播放音视频。play方法接受一个 div 元素 ID 作为参数，SDK 内部会在该 div 元素下自动创建相应的音视频标签并在其上播放音视频。

client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  console.log('远端流订阅成功：' + remoteStream.getId());

  // 播放远端流
  remoteStream.play('remote_stream-' + remoteStream.getId());
});

跟主播连麦互动

切换角色

使用switchRole()切换角色到anchor主播角色。

client
  .switchRole('anchor')
  .catch(error => {
    console.error('角色切换失败 ' + error);
  })
  .then(() => {
    // 角色切换成功，现在是主播角色
  });

连麦互动

创建本地音视频流

使用TRTC.createStream()方法创建本地音视频流。以下实例从摄像头及麦克风中采集音视频流，参数设置如下：

userId：用户 ID
audio：是否开启音频
video：是否开启视频

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

初始化本地音视频流

接下来调用initialize()初始化本地音视频流。

localStream
  .initialize()
  .catch(error => {
    console.error('初始化本地流失败 ' + error);
  })
  .then(() => {
    console.log('初始化本地流成功');
  });

初始化本地流成功时播放本地流

localStream
  .initialize()
  .catch(error => {
    console.error('初始化本地流失败 ' + error);
  })
  .then(() => {
    console.log('初始化本地流成功');
    localStream.play('local_stream');
  });

发布本地音视频流

在本地流初始化成功后，调用publish()方法发布本地流。

client
  .publish(localStream)
  .catch(error => {
    console.error('本地流发布失败 ' + error);
  })
  .then(() => {
    console.log('本地流发布成功');
  });

退出直播房间

直播结束时调用leave()方法退出直播房间，整个直播会话结束。

client.leave().catch(error => {
  console
    .error(error => {
      console.error('退房失败 ' + error);
      // 错误不可恢复，需要刷新页面。
    })
    .then(() => {
      // 退房成功，可再次调用client.join重新进房开启新的通话。
    });
});

Tutorial: 互动直播