tencent cloud

文档反馈

最后更新时间:2022-08-08 15:40:34

    本文档主要介绍如何订阅房间中其他用户的音视频流,也就是如何播放其他用户的音频和视频。为了方便起见,我们在接下来的文档中,会将“房间中的其他用户”统称为“远端用户”。

    在使用 TRTC Web SDK 中,经常会接触到以下对象:

    • Client 对象,代表一个本地客户端。Client 类的方法提供了加入通话房间、发布本地流、订阅远端流等功能。
    • Stream 对象,代表一个音视频流对象,包括本地音视频流对象 LocalStream 和远端音视频流对象 RemoteStream。Stream 类的方法主要提供音视频流对象的行为,包括音频和视频的播放控制。

    步骤1:创建 Client 对象

    可以参考文档 进入房间-步骤1 创建 client。

    需要特别注意的是,创建 Client 时可选择设置订阅模式,TRTC 提供了两种订阅模式:

    • 自动订阅,当收到 stream-added 事件时,SDK 会立刻接收并解码该远端流所包含的音视频数据,这也是 SDK 的默认行为。
    • 手动订阅,由于负责屏幕分享的 client 只需推流、不需要拉流,因此可在屏幕分享 client 中关闭自动订阅。
    const client = TRTC.createClient({
    ...,
    autoSubscribe: false // 默认为 true 即自动订阅
    });
    

    步骤2:监听远端流加入事件并订阅远端流

    订阅远端流首先需要知道有哪些远端流可以订阅,可以通过监听事件 Client.on('stream-added') 获取房间内的远端流,收到该事件说明这个远端流可以进行订阅,在事件回调通过 Client.subscribe() 订阅远端音视频流。

    client.on('stream-added', event => {
    const remoteStream = event.stream;
    console.log('远端流增加: ' + remoteStream.getId());
    //订阅远端流
    client.subscribe(remoteStream);
    });
    
    注意:

    步骤3:监听订阅成功事件并播放远端流

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

    play 方法更详细的参数说明参见 Stream.play()

    client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    console.log('远端流订阅成功:' + remoteStream.getId());
    // 播放远端流
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });
    

    需要特别注意的是,由于浏览器限制自动播放策略的影响,调用 play 方法可能会返回 PLAY_NOT_ALLOWED 错误, 此时 SDK 会弹窗引导用户与页面产生交互。当产生交互后,SDK 会主动调用接口恢复播放。

    您也可以在 TRTC.createClient() 接口中将 enableAutoPlayDialog 参数设置为 false,来关闭 SDK 的弹窗功能,并且由自己实现引导用户通过点击等操作调用 Stream.resume() 恢复音视频播放。

    client.on('stream-subscribed', event => {
    const remoteStream = event.stream;
    console.log('远端流订阅成功:' + remoteStream.getId());
    // 使用 remoteStream 监听 error 的方式捕捉并处理 0x4043 错误
    remoteStream.on('error', error => {
      const errorCode = error.getCode();
      if (errorCode === 0x4043) {
        // PLAY_NOT_ALLOWED, 引导用户手势操作并调用 stream.resume 恢复音视频播放
        // remoteStream.resume()
      }
    });
    // 开始播放远端流
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });
    

    步骤4:进入音视频通话房间

    监听事件后,即可调用 Client.join() 进入音视频通话房间。可以参考文档 进入房间-步骤2

    完整代码

    const client = TRTC.createClient({
    mode: 'rtc',
    sdkAppId,
    userId,
    userSig
    });
    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 监听 error 的方式捕捉并处理 0x4043 错误
    remoteStream.on('error', error => {
      const errorCode = error.getCode();
      if (errorCode === 0x4043) {
        // PLAY_NOT_ALLOWED, 引导用户手势操作并调用 stream.resume 恢复音视频播放
        // remoteStream.resume()
      }
    });
    // 开始播放远端流
    remoteStream.play('remote-stream-' + remoteStream.getId());
    });
    try {
    await client.join({ roomId });
    console.log('进房成功');
    } catch (error) {
    console.error('进房失败,请稍后再试' + error);
    }
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持