tencent cloud

跑通直播模式(Web)
最后更新时间：2022-03-10 09:48:31
跑通直播模式(Web)
最后更新时间： 2022-03-10 09:48:31
本文主要介绍以观众身份进入直播间，然后发起连麦互动的场景，以主播身份进入房间进行直播的场景跟实时音视频通话场景流程一样，请参见 实时音视频通话。

示例

您可以单击 Demo 前往体验音视频功能，也可以登录 GitHub 获取本文档相关的示例代码。

步骤1：创建 Client 对象

通过 TRTC.createClient() 方法创建 Client 对象，参数设置：
mode：互动直播模式，设置为 live
sdkAppId：您从腾讯云申请的 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());
});

2. 在远端流订阅成功事件回调中，通过调用 Stream.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());
});


步骤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 上必须要进行统一，否则会出现一些不可预料的问题。
本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈