屏幕分享

本文主要介绍如何使用 BRTC 进行屏幕分享,下表中的浏览器，可以使用无插件屏幕分享。

创建屏幕分享流

const client = BRTC.createClient({
  codec: 'h264',
  appId: 'xxxxxx'
});
client.init('123456').then(() => {
  client.join('sig').then(() => {
    const screenShareStream = BRTC.createStream({audio: false, screen: true});
    // 仅采集屏幕分享视频流
    screenShareStream.on('video-track-ended', () => {
      console.log('屏幕分享结束');
      // 取消发布屏幕分享
      client.unpublish(screenShareStream).then(() => {
        // 销毁屏幕分享流实例
        screenShareStream.destroy();
      });
    });

    // 设置屏幕分享 profile, init 之前生效
    screenShareStream.setScreenProfile('720p');
    screenShareStream.init().then(() => {
      // 发布屏幕分享
      client.publish(screenShareStream).then(() => {
        console.log('发布屏幕分享成功');
      });
    });
  });
});

指定一个 Profile

通过 setScreenProfile 指定一个 Profile，每一个 Profile 对应一组分辨率、帧率、码率

const screenShareStream = BRTC.createStream({audio: false, screen: true});
screenShareStream.setScreenProfile('1080p');

Profile 列表

设置自定义分辨率、帧率、码率

通过 setVideoEncoderConfiguration 设置自定义分辨率、帧率、码率

const screenShareStream = BRTC.createStream({audio: false, screen: true});
screenShareStream.setVideoEncoderConfiguration({
  width: 540,
  height: 480,
  frameRate: 10,
  bitrate: 800
});

停止屏幕分享

client.unpublish(screenShareStream).then(() => {
  // 销毁屏幕分享流实例
  screenShareStream.destroy();
});

同时推摄像头视频和屏幕分享

由于一个 Client 只能推一路流,因此如果需要推送摄像头视频和屏幕分享,需要创建两个 Client 来实现。可以自行定义 userId 规则来区分流的类型,如 userId 以 0 结尾则负责推送摄像头,以 1 结尾负责推送屏幕分享。做到各端可以清楚屏幕分享流和摄像头流的对应关系。

const shareClient = BRTC.createClient({
  codec: 'h264',
  appId: 'xxxxxx'
});

// 设置 client 只用于推流,不会处理拉流逻辑
shareClient.setPublishOnly(true)

// 主 Client 中指定取消订阅 屏幕分享 的远端流
client.on('stream-added', event => {
  const remoteStream = event.stream;
  const remoteUserId = remoteStream.getUserId();
  if (isSelfScreenShare(remoteUserId)) {
    // 取消订阅自己的屏幕分享流
    client.unsubscribe(remoteStream);
  } else {
    // 订阅其他一般远端流
    client.subscribe(remoteStream);
  }
});

屏幕分享采集系统声音

采集系统声音只支持 Chrome 74+ ，在 Windows 和 Chrome OS 上，可以捕获整个系统的音频，在 Linux 和 Mac 上，只能捕获选项卡的音频。其它 Chrome 版本、其它系统、其它浏览器均不支持。 在弹出的对话框中勾选分享音频，发布的 stream 将会带上系统声音。

// 创建屏幕分享流 screenAudio 请设置为 true， 不支持同时采集系统和麦克风音量，请勿同时设置 audio 属性为 true
const shareStream = BRTC.createStream({audio: true, screen: true});
...

开发注意事项

• 在共享屏幕的时候，如果已经发布了摄像头流，那么共享屏幕的时候 audio 属性建议设置为 false，避免订阅端收到的两路流中都有音频，出现回声
• 在本地共享的时候，本地流的 client 不要订阅本地的媒体流，否则会增加时长计费