跳到主要内容

屏幕共享

屏幕共享用于在通话过程中把当前桌面、窗口或浏览器标签页实时展示给对方，适合远程指导、问题排查、操作演示和页面讲解等场景。

当前实现支持双向屏幕共享：

  1. 支持访客端将自己的屏幕共享给客服端。
  2. 支持客服工作台和 desktop 客服端将自己的屏幕共享给访客端。
  3. 可在音频通话中直接开启屏幕共享，也可在视频通话中切换为屏幕共享展示。
  4. 共享开始后会持续保留语音通道，当前实现不采集系统声音，只共享画面内容。

功能说明​

当前屏幕共享能力包含以下特性：

  1. 只有在通话已接通后，页面才会显示“共享屏幕”按钮。
  2. 开启共享后，通话界面会自动进入共享展示态，按钮切换为“停止共享”。
  3. 如果共享前本地已经开启摄像头，停止共享后会自动恢复摄像头画面。
  4. 如果共享前是纯音频通话，停止共享后会自动回到音频通话状态。
  5. 如果在浏览器共享选择器中手动结束共享，页面也会自动同步停止共享状态。

使用前准备​

  1. 访客或客服双方已经建立音频或视频通话，并处于已接通状态。
  2. 当前浏览器支持屏幕采集能力，也就是支持 getDisplayMedia。
  3. 如果页面运行在 iframe 中，宿主页面需要允许 display-capture，并同时保留 camera、microphone 等音视频权限。
  4. 建议使用最新版 Chrome、Edge 等 Chromium 内核浏览器，以获得更稳定的共享体验。

适用场景​

访客端共享给客服端​

适合让客服查看用户当前操作页面、业务系统界面、表单填写过程或错误提示。

客服端共享给访客端​

适合客服向访客演示后台操作步骤、引导用户完成配置，或进行远程讲解。

如何开启共享​

第一步：先建立通话​

屏幕共享不是独立入口，需要先发起并接通音频客服或视频客服。只有进入通话中状态后，底部控制栏才会显示共享按钮。

第二步：点击“共享屏幕”​

接通后，在底部操作栏点击屏幕共享按钮。

  1. 访客端和 desktop 客服端都使用同一个共享入口。
  2. 按钮仅在当前窗口支持共享时显示；如果当前窗口不支持，则不会出现该按钮。
  3. 在 iframe 场景下，如果宿主没有开放 display-capture 权限，按钮也不会正常可用。

选择共享窗口​

点击后，浏览器会弹出系统级选择器，通常可选择以下内容之一：

  1. 整个屏幕。
  2. 某个应用窗口。
  3. 某个浏览器标签页。

按照浏览器提示选择要共享的目标，然后确认开始共享。

webrtc_screen_sharing_start

开始共享​

共享成功后，页面会立即进入共享中状态，并表现为：

  1. 页面标题和状态会切换为“屏幕共享”“屏幕共享中”等提示。
  2. 底部按钮会由“共享屏幕”切换为“停止共享”。
  3. 当前共享内容会优先作为主展示画面。
  4. 麦克风语音仍可继续传输，双方可以边看边沟通。

如果是从音频通话中直接开启共享，系统会临时开启视频发送能力用于传输屏幕画面，但本质上仍然是“语音 + 屏幕展示”的协作场景。

webrtc_screen_sharing_page

本地查看共享内容​

发起共享的一方会在本地看到自己的共享内容预览。当前实现中，共享画面会优先占据主视图，方便确认自己正在展示的内容是否正确。

如果共享前已经打开摄像头，系统会在停止共享后自动恢复摄像头；如果共享前没有摄像头画面，则停止后不会继续保留本地视频。

webrtc_screen_sharing_agent

查看远程共享屏幕​

接收共享的一方会直接在通话主区域看到对方的共享画面。

  1. 即使当前通话原本是音频通话，只要对方开启了屏幕共享，接收方也会进入共享展示视图。
  2. 当对方停止共享后，页面会自动回到原来的音频或视频通话布局。
  3. 如果当前是单向视频场景，屏幕共享仍会以共享内容优先展示。

webrtc_screen_sharing_visitor

如何停止共享​

可以通过以下任一方式结束共享：

  1. 在通话底部再次点击“停止共享”。
  2. 在浏览器原生共享提示条中停止共享。
  3. 直接结束当前通话。

停止后，页面会自动恢复到共享前的媒体状态：

  1. 共享前是视频通话，则恢复视频通话。
  2. 共享前是音频通话，则恢复音频通话。
  3. 如果浏览器或系统强制结束共享，页面也会自动同步更新。

嵌入式页面注意事项​

如果屏幕共享页面通过 iframe、内嵌弹窗或第三方业务系统打开，需要额外注意以下事项：

  1. 宿主 iframe 必须允许 display-capture，否则浏览器不会允许屏幕共享。
  2. 通常还需要同时保留 camera 和 microphone 权限，避免音视频能力异常。
  3. 某些浏览器对跨域 iframe、企业安全策略或系统权限控制更严格，若按钮未出现，优先检查宿主页面权限配置。

常见问题​

为什么看不到“共享屏幕”按钮？​

  1. 当前通话尚未接通。
  2. 当前浏览器不支持屏幕共享。
  3. 页面运行在 iframe 中，但宿主没有开放 display-capture 权限。

为什么点击后无法开始共享？​

  1. 浏览器共享窗口选择器被取消。
  2. 系统或浏览器拦截了当前页面的屏幕录制权限。
  3. 当前环境的安全策略不允许当前页面执行屏幕采集。

为什么停止共享后又恢复成摄像头画面？​

这是当前实现的预期行为。如果共享前本地已经开启摄像头，停止共享后系统会自动恢复摄像头视频流，避免用户重新手动开启。

为什么共享时听得到声音，但对方听不到系统播放的声音？​

当前实现只共享屏幕画面，不采集系统声音。通话中的语音仍然来自麦克风输入，因此适合讲解和协同演示，不适合直接转播系统音频内容。

编辑此页
最后由 jack ning 于 更新

这页文档对您有帮助吗？