Tutorial: 屏幕分享

屏幕分享

本文主要介绍屏幕分享的使用方法。

屏幕分享只支持 Chrome M72+。

创建和发布屏幕分享流

// 创建屏幕分享流
const localStream = TRTC.createStream({ audio: false, screen: true });
// 监听屏幕分享停止事件
localStream.on('screen-sharing-stopped', event => {
  console.log('screen sharing was stopped');
});

// 初始化屏幕分享流
localStream.initialize().then(() => {
  console.log('screencast stream init success');
  // 发布屏幕分享流
  client.publish(localStream).then(() => {
    console.log('screen casting');
  });
});

屏幕分享属性

屏幕分享属性包括分辨率、帧率和码率,可以通过 setScreenProfile() 接口指定一个属性 Profile,每个 Profile 对应着一组分辨率、帧率和码率。

const localStream = TRTC.createStream({ audio: false, screen: true });
localStream.setScreenProfile('1080p');
localStream.initialize().then(() => {
  // screencast stream init success
});

或者使用自定义分辨率、帧率和码率:

const localStream = TRTC.createStream({ audio: false, screen: true });
localStream.setScreenProfile({ width: 1920, height: 1080, frameRate: 5, bitrate: 1600 /* kbps */});
localStream.initialize().then(() => {
  // screencast stream init success
});

停止屏幕分享

// 停止推送屏幕分享
client.unpublish(localStream).then(() => {
  // 关闭屏幕分享流
  localStream.close();
});

屏幕分享属性推荐列表:

profile 分辨率(宽 x 高) 帧率(fps) 码率 (kbps)
480p 640 x 480 5 900
480p_2 640 x 480 30 1000
720p 1280 x 720 5 1200
720p_2 1280 x 720 30 3000
1080p 1920 x 1080 5 1600
1080p_2 1920 x 1080 30 4000
  • 屏幕分享默认使用 '1080p' Profile。

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

一个 Client 至多只能同时推送一路音频和一路视频,若想同时推送摄像头视频和屏幕分享,建议创建另外一个独立的 Client 专门负责推送屏幕分享。

// 使用一个独立的用户ID进行推送屏幕分享
const shareId = 'share-userId';
const shareClient = TRTC.createClient({ mode: 'rtc', sdkAppId, userId: shareId, userSig });

// 指明该 shareClient 默认不接收任何远端流 (它只负责发送屏幕分享流)
shareClient.setDefaultMuteRemoteStreams(true);
shareClient.join({ roomId }).then(() => {
  console.log('shareClient join success');
  // 创建屏幕分享流
  const localStream = TRTC.createStream({ audio: false, screen: true });
  localStream.initialize().then(() => {
    // screencast stream init success
    shareClient.publish(localStream).then(() => {
      console.log('screen casting');
    });
  });
});

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

屏幕分享采集系统声音

采集系统声音只支持 Chrome M74+ ,在 Windows 和 Chrome OS 上,可以捕获整个系统的音频,在 Linux 和 Mac 上,只能捕获选项卡的音频。其它 Chrome 版本、其它系统、其它浏览器均不支持。

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

在弹出的对话框中勾选分享音频,发布的 stream 将会带上系统声音。