观看屏幕共享

功能介绍

当房间内有人开启屏幕共享时，观看端通过 屏幕共享 UI 组件 订阅并显示共享画面。组件由 SDK 内部完成拉流与渲染，业务侧将 handler() 返回的 DOM 挂入页面即可。

注意：

须在成功进入房间后，方可观看他人屏幕共享。

1. 创建组件并显示

收到 CRVideo_NotifyScreenShareStarted 后，创建组件、挂载 DOM，并调用 setVideo 绑定共享者：

var screenShareObj = null;

CRVideo_NotifyScreenShareStarted.callback = function (sharerUID) {
  screenShareObj = CRVideo_CreatScreenShareObj();
  document.getElementById("screenContainer").appendChild(screenShareObj.handler());
  screenShareObj.setVideo(sharerUID);

  var nicknameStyle = {
    display: "block",
    left: "10px",
    top: "10px",
    backgroundColor: "rgba(0, 0, 0, .7)",
    padding: "0 10px",
    borderRadius: "15px",
  };
  screenShareObj.setNickNameStyle(nicknameStyle);
  screenShareObj.setNickNameContent(CRVideo_GetMemberNickName(sharerUID) + "'s screen");
};

setVideo(UID) 中 UID 为共享者用户 ID。组件默认宽高为父容器的 100%，一般通过父容器 CSS 控制显示区域。

若进入房间时共享已在进行，同样监听 CRVideo_NotifyScreenShareStarted 或根据业务状态创建组件并 setVideo。

2. 共享结束与销毁组件

收到 CRVideo_NotifyScreenShareStopped 后，应销毁组件并移除 DOM：

CRVideo_NotifyScreenShareStopped.callback = function (sharerUID) {
  if (screenShareObj) {
    document.getElementById("screenContainer").removeChild(screenShareObj.handler());
    screenShareObj.destroy();
    screenShareObj = null;
  }
};

3. 组件常用能力

CRVideo_ScreenShareObj 与 CRVideo_VideoObj 共用部分 UI 方法，例如：

handler() — 获取组件 DOM
setNickNameStyle / setNickNameContent — 昵称样式与内容
destroy() — 销毁组件

观看端一般只需 setVideo 显示画面；若需在本端画面上标注，见屏幕共享标注。

观看屏幕共享

功能介绍

1. 创建组件并显示

2. 共享结束与销毁组件

3. 组件常用能力

相关文档