自定义采集与播放渲染

本文主要介绍 BRTC 本地流的自定义采集和音视频流的自定义播放渲染等高阶用法。

自定义采集

本地流在通过 createStream 创建时，可以指定使用 SDK 的默认采集方式，

如下，从摄像头和麦克风采集音视频数据：

const localStream = BRTC.createStream({ audio: true, video: true });
localStream.init().then(() => {
  // local stream initialized success
});

或者，采集屏幕分享流：

const localStream = BRTC.createStream({ audio: false, screen: true });
localStream.init().then(() => {
  // local stream initialized success
});

上述两种本地流的创建方式都是使用 SDK 的默认采集方式。为了便于开发者对音视频流进行预处理，createStream 支持从外部音视频源创建本地流，通过这种方式创建本地流，开发者可以实现自定义采集，比如说：

• 通过 getUserMedia 采集摄像头和麦克风音视频流
• 通过 getDisplayMedia 采集屏幕分享流
• 通过 captureStream 采集页面中正在播放的音视频
• 通过 captureStream 采集 canvas 画布中的动画

自定义采集示例

const client = BRTC.createClient({
  codec: 'h264',
  appId: 'xxxxxx' // 控制台获取的appId
});
client.init('123456').then(() => {
  client.join('token').then(() => {

    const videoElement = document.querySelector('#' + videoId);

    // 设置捕获帧率
    const stream = videoElement.captureStream(25);

    const localStream = BRTC.createStream({
      audioTrack: stream.getAudioTracks()[0],
      videoTrack: stream.getVideoTracks()[0]
    });

    // 设置上推码率, init 之前生效
    localStream.setVideoEncoderConfiguration({
      bitrate: 1000
    });
    localStream.init().then(() => {
      // 发布屏幕分享
      client.publish(localStream).then(() => {
        console.log('发布自定义流成功');
      });
    });
  });
});

自定义播放渲染

对于通过 BRTC.createStream 创建并初始化好的本地流或者通过 client.on('stream-added') 接收到的远端流，可以通过音视频流对象的 stream.play 方法进行音频和视频的播放渲染，stream.play 内部会自动创建音频播放器和视频播放器并将相应地

如果 App 想用自己的播放器，可以绕过 stream.play()/stop() 方法，通过 stream.getAudioTrack()/stream.getVideoTrack() 方法获取相应的音视频轨道，然后利用自己的播放器进行音视频的播放渲染。

使用这种自定义播放渲染方式后，stream.on('player-state-changed') 事件将不会被触发，App 需要自行监听音视频轨道 MediaStreamTrack 的 mute/unmute 等事件来判断当前音视频数据流的状态。

同时，App 层需要监听 client.on('stream-added')、client.on('stream-updated') 和 client.on('stream-removed') 等事件来处理音视频流的生命周期。

注意：

在 'stream-added' 与 'stream-updated' 两个事件的处理回调中，都必须检查是否有音频或视频 track，在 ’stream-updated‘ 事件处理中，如果有音频或视频 track，那么请务必更新播放器并使用最新的音视频 track 进行播放。