Web端如何实现指定区域屏幕共享及Agora固定共享区域自定义

1 指定区域屏幕采集实现 #

Web原生getDisplayMedia接口仅支持采集整个屏幕、应用窗口或标签页，要实现指定区域裁剪，需要通过Canvas做中转处理：

• 先调用原生接口获取完整的屏幕共享流，建议配置较高的基础参数，避免裁剪后画面模糊：

  const fullStream = await navigator.mediaDevices.getDisplayMedia({
    video: {
      width: { max: 3840 },
      height: { max: 2160 },
      frameRate: { max: 30 }
    },
    preferCurrentTab: false
  })
  

• 创建离屏Canvas和临时视频元素，把完整流喂给视频元素后，按照目标区域的坐标、宽高实时裁剪绘制到Canvas：

  // 初始化临时视频元素
  const rawVideo = document.createElement('video')
  rawVideo.srcObject = fullStream
  await rawVideo.play()
  
  // 初始化裁剪用Canvas，targetX、targetY为目标区域左上角坐标，targetW、targetH为目标区域宽高
  const cropCanvas = document.createElement('canvas')
  cropCanvas.width = targetW
  cropCanvas.height = targetH
  const ctx = cropCanvas.getContext('2d')
  
  // 循环绘制裁剪后的画面
  function renderCropFrame() {
    ctx.drawImage(rawVideo, targetX, targetY, targetW, targetH, 0, 0, targetW, targetH)
    requestAnimationFrame(renderCropFrame)
  }
  renderCropFrame()
  

• 从Canvas中获取裁剪后的指定区域流，需要保留音频的话，把原始流的音频轨合并到新流里：

  // 30为输出帧率，可按需调整
  const cropStream = cropCanvas.captureStream(30)
  // 合并原始音频轨
  fullStream.getAudioTracks().forEach(track => cropStream.addTrack(track))
  

注意：Chrome 107+版本支持getDisplayMedia配合cropTo接口直接裁剪浏览器窗口区域，不需要走Canvas中转，性能更好但兼容性一般，面向公网的产品建议优先使用Canvas方案做兼容。

2 Agora共享流自定义配置 #

不需要使用Agora默认的屏幕采集接口，直接把裁剪好的自定义流推到Agora通道即可，同时可以自定义所有共享相关参数：

• 如果使用Agora Web SDK 4.x版本，用createCustomVideoTrack和createCustomAudioTrack封装裁剪后的流：

  // 封装自定义视频轨，可单独设置码率范围适配共享区域的分辨率
  const customScreenVideoTrack = AgoraRTC.createCustomVideoTrack({
    mediaStreamTrack: cropStream.getVideoTracks()[0],
    bitrateMin: 1000,
    bitrateMax: 3000
  })
  // 存在音频的话封装自定义音频轨
  const customScreenAudioTrack = cropStream.getAudioTracks().length ? 
    AgoraRTC.createCustomAudioTrack({
      mediaStreamTrack: cropStream.getAudioTracks()[0]
    }) : null
  

• 发布逻辑和普通屏幕共享流完全一致，Agora会将其识别为正常的屏幕共享流，支持所有流控、录制相关的能力。
• 额外自定义能力：
  • 要给共享区域加水印、边框高亮效果，直接在Canvas的renderCropFrame绘制逻辑里叠加对应图层即可，不需要修改Agora侧配置
  • 需要动态调整共享区域时，直接修改drawImage的坐标、宽高参数即可，不需要重新推流
  • 高DPI屏幕适配可以将Canvas宽高乘以window.devicePixelRatio，绘制参数同步乘以对应系数，避免裁剪画面模糊
  • 要限制用户修改共享源，监听原始fullStream的ended事件，触发后直接销毁自定义轨并提示用户重新选择共享源即可。

内容的提问来源于stack exchange，提问作者nikhil menaria