屏幕分享

编辑文档更新于 2025-01-16 07:59:52

BRTC 支持屏幕分享，即将当前系统的屏幕内容通过 BRTC SDK 分享给房间里的其他用户。
屏幕分享不但支持“辅路分享”，也支持使用”主视频流“进行分享。使用主路视频流屏幕分享时，摄像头的采集需要先被停止，否则会相互冲突。屏幕共享功能需要在加入房间后，再调用相应函数启动或者关闭。在启动屏幕分享时通过参数指定使用的线路。

相关函数接口在 electron-sdk 2.0.7 及以上版本支持。

百家云 SDK 的屏幕共享特性可提供以下功能，适用于各种场景下的屏幕共享。

共享整个屏幕

将你的整个屏幕进行共享，包括屏幕中的所有信息，该功能支持同时采集两块屏幕的信息并共享。

共享 app 窗口

如果你不希望将整个屏幕内容分享给其他用户，可以只共享一个 app 窗口中的画面。

共享指定区域

如果你只希望共享屏幕或 app 窗口中的一部分，可以在开启屏幕共享时设置一个共享区域，只有该区域内的画面会被分享。

获取资源列表

调用 getScreenCaptureSources ，获取可共享的屏幕和窗口的对象列表，列表中包含窗口 ID 和屏幕 ID 等重要信息。方便用户通过列表中的缩略图选择共享某个显示器的屏幕或某个窗口。

// 获取可共享窗口或屏幕的信息列表。
const list = this.client.getScreenCaptureSources({width: 240,height: 135}, {width: 24,height: 24})
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
list.map((item) => {
  //在视图中显示可共享屏幕和窗口列表
  canvas.width = item.thum.width
  canvas.height = item.thum.height
  ctx.putImageData(item.thum, 0, 0)
  const thum = canvas.toDataURL()

  const data = {
    type: item.type,
    sourceId: item.sourceId,
    name: item.sourceName,
    thum,
    thumWidth: item.thum.width,
    thumHeight: item.thum.height
  }
  // 设置屏幕分享窗口的图表显示位置和大小
  if (item.icon) {
    canvas.width = item.icon.width
    canvas.height = item.icon.height
    ctx.putImageData(item.icon, 0, 0)
    data.iconWidth = item.icon.width
    data.iconHeight = item.icon.height
    data.icon = canvas.toDataURL()
  }

  return data
})

开启屏幕分享

根据实际应用场景，在以下 3 种屏幕共享方式中任选一种。

共享整个屏幕

// BRTCScreenCaptureSourceTypeWindow = 0, ///< 该分享目标是某一个窗口
// BRTCScreenCaptureSourceTypeScreen = 1, ///< 该分享目标是整个桌面
// 指定共享整个屏幕，rect 设为 { 0, 0, 0, 0 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeScreen, sourceId, rect, property);
// / 主画面视频流
//BRTC_VIDEO_STREAM_TYPE_BIG = 0,
// / 小画面视频流  
//BRTC_VIDEO_STREAM_TYPE_SMALL = 1,
// / 辅流     
//BRTC_VIDEO_STREAM_TYPE_SUB = 2
this.client.startScreenCapture(BRTC_VIDEO_STREAM_TYPE_SUB, {bitrate: 1000, fps: 5 });
// 开启采集系统声音，屏幕分享时可选是否采集系统声音
this.client.startSystemAudioLoopback();

共享整个屏幕指定区域

// 指定共享整个屏幕的指定区域，rect 设为 { 10, 20, 300, 300 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeScreen, sourceId, rect, property);
this.client.startScreenCapture(BRTC_VIDEO_STREAM_TYPE_SUB, {bitrate: 1000, fps: 5 });
// 开启采集系统声音，屏幕分享时可选是否采集系统声音
this.client.startSystemAudioLoopback();

共享 app 窗口

// 指定共享的 app 窗口，rect 设为 { 0, 0, 0, 0 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeWindow, sourceId, rect, property);
this.client.startScreenCapture(BRTC_VIDEO_STREAM_TYPE_SUB, {bitrate: 1000, fps: 5 });
// 开启采集系统声音，屏幕分享时可选是否采集系统声音
this.client.startSystemAudioLoopback();

共享指定区域

// 指定共享 app 窗口的指定区域，rect 设为 { 10, 10, 100, 200 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeWindow, sourceId, rect, property);
this.client.startScreenCapture(BRTC_VIDEO_STREAM_TYPE_SUB, {bitrate: 1000, fps: 5 });
// 开启采集系统声音，屏幕分享时可选是否采集系统声音
this.client.startSystemAudioLoopback();

更新共享区域或参数

在房间内，你可以调用如下方法动态更新屏幕共享区域或参数。

如果你要更新屏幕共享的区域，调用 selectScreenCaptureTarget 方法，重新设置 rect 参数、划定新的共享区域。
如果你要更新屏幕共享的参数（是否采集鼠标；是否高粱显示正在共享的窗口；是否对屏幕或 app 窗口描边；是否采集子窗口等），更新 selectScreenCaptureTarget 函数中的 property 参数的配置。

// 指定共享 app 窗口的指定区域，rect 设为 { 10, 10, 100, 200 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeWindow, sourceId, rect, property);

对屏幕描边

在房间内，你可以修改参数值对共享区域或者窗口描边。将 BRTCScreenCaptureProperty 中的 enableHighLight 设置为 true，并同时设置 highLightColor 和 highLightWidth 来指定描边的颜色和宽度。

property = {
            enableCaptureMouse: true,
            enableHighLight: true,
            enableHighPerformance: true,
            highLightColor: 0xFFFF0000,
            highLightWidth: 15,
            enableCaptureChildWindow: true
        } ;
// 指定共享 app 窗口的指定区域，rect 设为 { 10, 10, 100, 200 }
this.client.selectScreenCaptureTarget(BRTCScreenCaptureSourceTypeWindow, sourceId, rect, property);

停止屏幕共享

调用 stopScreenCapture，在教室内停止屏幕共享。

// 停止屏幕共享
this.client.stopScreenCapture()

设定视频编码参数

通过设置 [startScreenCapture()] 中的参数 params ，您可以指定屏幕分享的编码质量。如果您指定 params 为 null，SDK 会自动选择最佳的编码参数，我们推荐的参数设定如下：

参数项	参数名称	常规推荐值
视频码率	bitrate	1000kbps
视频的宽	width	1280
视频的高	height	720
视频的帧率	frameRate	5
视频分辨率模式	resolutionMode	Landscape

由于屏幕分享的内容一般不会剧烈变动，所以设置较高的 frameRate 并不经济，推荐 5 FPS 即可
如果您要分享的屏幕内容包含大量文字，可以适当提高分辨率和码率设置

观看屏幕分享

若用户通过主画面视频流（BRTCVideoStreamTypeBig）进行屏幕分享。房间里的其他用户会通过 user-video-available-changed 事件获得这个通知。
若用户通过屏幕共享专用视频流（BRTCVideoStreamTypeSub）进行屏幕分享。房间里的其他用户会通过 user-sub-video-available-changed 事件获得这个通知。
希望观看屏幕分享的用户可以通过 startRemoteView 接口来启动渲染远端用户屏幕分享画面。

示例代码

getScreenSourceList() {
  // 读取可以屏幕分享的窗口和应用列表
  const list = this.client.getScreenCaptureSources({
    width: 240,
    height: 135
  })
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')

  return list.map((item) => {
    canvas.width = item.thum.width
    canvas.height = item.thum.height
    ctx.putImageData(item.thum, 0, 0)
    const thum = canvas.toDataURL()

    const data = {
      type: item.type,
      sourceId: item.sourceId,
      name: item.sourceName,
      thum,
      thumWidth: item.thum.width,
      thumHeight: item.thum.height
    }

    if (item.icon) {
      canvas.width = item.icon.width
      canvas.height = item.icon.height
      ctx.putImageData(item.icon, 0, 0)
      data.iconWidth = item.icon.width
      data.iconHeight = item.icon.height
      data.icon = canvas.toDataURL()
    }

    return data
  })
},
selectScreenCaptureTarget() {
  this.client.selectScreenCaptureTarget(1, 1);
},
getScreenCaptureSources() {
  //显示屏幕共享可选窗口
  this.screenSourceList = this.getScreenSourceList()
  this.screenSourceDialogShow = true
},
resumeScreenCapture() {
  this.client.resumeScreenCapture()
},
pauseScreenCapture() {
  this.client.pauseScreenCapture()
},
stopScreenCapture() {
  this.client.stopScreenCapture()
},
startScreenCapture() {
  //监听按钮事件，开始屏幕共享
  this.client.startScreenCapture(2, {
    bandWidth: 1000,
    fps: 5
  })
},