屏幕共享

功能简介

屏幕共享，是指在视频通话或互动直播过程中将屏幕内容以视频的方式分享给其他的观众，以增强互动体验，提高沟通效率。

屏幕共享在如下场景中应用广泛：

• 视频会议场景中，屏幕共享可以将讲话者本地的文件、数据、网页、PPT 等画面分享给其他与会人；
• 在线课堂场景中，屏幕共享可以将老师的课件、笔记、讲课内容等画面展示给学生观看。

示例源码下载

请参考 下载示例源码 获取源码。

相关源码请查看 “lib\topics\OtherFunctions\screen_sharing” 目录下的文件。

前提条件

在实现屏幕共享功能之前，请确保：

• 平台及设备要求：
  • Android 平台：支持 Android 5.0 或以上版本，且支持音视频的 Android 设备或模拟器（推荐使用真机）。
  • iOS 平台：
    • 支持 iOS 12.0 或以上版本且支持音视频的 iOS 设备或模拟器（推荐使用真机）。
    • 该功能对设备性能要求较高，推荐在 iPhone X 及之后机型上使用。
  • Windows 平台：Windows8、Windows10 或以上版本。
  • Web 平台：
    • 屏幕共享目前仅支持桌面端（例如 Windows 和 macOS）的 Chrome 、Edge 和 Firefox 浏览器，以及 macOS 的 Safari 浏览器。
      • 有插件形式：支持在 Chrome 65 或以上版本的浏览器共享屏幕。
      • 无插件形式：支持在 Chrome 72 或以上版本的浏览器，Edge 80 或以上版本的浏览器，以及 Firefox 和 Safari 13 或以上版本浏览器共享屏幕。
    • 如果开发者使用 macOS 系统，请先打开电脑的“系统偏好设置 > 安全性与隐私 > 屏幕录制”，添加使用的浏览器，才可以进行屏幕共享。
• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 AppSign，详情请参考 控制台 - 项目信息。
• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。

使用步骤

1 开启权限

• （必选）Android 在录制屏幕前，会弹窗提示用户是否允许应用录制屏幕，请进行授权。

  Android 在使用屏幕录制功能时，请务必 获取用户录制屏幕授权，否则将无法使用该功能。

• macOS 调用屏幕共享接口在 macOS 平台会获取相关权限，需要在 “安全性与隐私” 中开启录屏权限与辅助功能权限，如不生效需要将之前的权限删除再次新增。

  • 录屏权限

    

  • 辅助功能权限

    

• Web 平台安装屏幕共享插件（可选）

2 Windows、macOS 需要获取窗口（包括屏幕）列表信息

SDK 可以通过 getScreenCaptureSources 获取当前可共享的所有窗口信息。

List<ZegoScreenCaptureSourceInfo> list = await ZegoExpressEngine.instance.getScreenCaptureSources(400, 400, 100, 100);

3 创建屏幕共享源

调用 createScreenCaptureSource 接口创建屏幕共享源对象。

// 对于 Android、iOS、Web 平台，sourceId、sourceType 不需要传入，传入也不会导致创建失败
ZegoScreenCaptureSource source = await ZegoExpressEngine.instance.createScreenCaptureSource();

// 对于 windows、macOS 平台 sourceId、sourceType 为必填参数，数据来源于 getScreenCaptureSources 接口获取的数据结果
// ZegoScreenCaptureSource source = await ZegoExpressEngine.instance.createScreenCaptureSource(sourceId: list[0].sourceID, sourceType: list[0].sourceType);

4 设置采集源为屏幕共享源

设置采集源为屏幕共享源，则需要对视频源和音频源进行设置。

视频源

SDK 推流的视频源默认为摄像头源，如果需要推屏幕共享源，需要通过 setVideoSource 切换为屏幕共享。

ZegoExpressEngine.instance.setVideoSource(ZegoVideoSourceType.ZegoVideoSourceScreenCapture, instanceID: source.getIndex(), channel: ZegoPublishChannel.Main);

音频源

SDK 推流的音频源默认为麦克风源，如果需要推屏幕共享源，需要通过 setAudioSource 进行切换为屏幕共享。

ZegoExpressEngine.instance.setAudioSource(ZegoAudioSourceType.ScreenCapture, channel: ZegoPublishChannel.Main);

5 开启屏幕共享

有两种屏幕共享方式，分别为应用内屏幕共享和跨应用屏幕共享。

var config = ZegoScreenCaptureConfig(true, true, 100, 100);
source.startCapture(config: config, inApp: true);

var config = ZegoScreenCaptureConfig(true, true, 100, 100);
source.startCapture(config: config, inApp: false);

调用 startCapture 接口共享整个系统的画面。

source.startCapture();

source.updateCaptureSource(list[1].sourceID, list[1].sourceType)

source.updateCaptureRegion(Rect.fromLTWH(10, 10, 400, 400));

source.setExcludeWindowList([list[1].sourceID]);

source.enableWindowActivate(true);

source.enableCursorVisible(true);

ZegoExpressEngine.onExceptionOccurred = (ZegoScreenCaptureSource source,
      ZegoScreenCaptureSourceExceptionType exceptionType) {
};

ZegoExpressEngine.onMobileScreenCaptureStart = () {
};
ZegoExpressEngine.onMobileScreenCaptureExceptionOccurred = (ZegoScreenCaptureSourceExceptionType exceptionType) {
};

6 登录房间并开始推流

调用 loginRoom 接口，传入房间 ID 参数 “roomID” 和用户参数 “user”，登录房间。

调用 startPublishingStream 接口，传入流 ID 参数 “streamID”，向远端用户发送本端的音视频流。

// 创建用户 
var user = new ZegoUser.id("user1");

// 开始登录房间 
ZegoExpressEngine.instance.loginRoom("room1", user);  
// 开始推流 
ZegoExpressEngine.instance.startPublishingStream("stream1");  

至此，我们已完成采集屏幕数据并通过 ZEGO Express SDK 分享到远端的操作。

7 观看远端屏幕共享

完成以上步骤之后，其他用户可以使用 startPlayingStream 接口拉取屏幕共享流。

// 拉流播放，需传入发起屏幕共享的用户推流时所用的 streamID
ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: ZegoCanvas.view(playView));

8 停止屏幕共享

调用 stopCapture 接口停止共享。

source.stopCapture();

更多功能

描边

在屏幕共享时，您可以调用 enableHightLight 接口对屏幕区域或者窗口启用描边，设置描边的颜色和宽度。

// 边框大小，默认值 4， 最大值为 100
// 边框颜色，格式为 0xRRGGBB，默认为绿色即 0x00FF00
var config = ZegoLayerBorderConfig(4, 0x00FF00);
source.enableHightLight(true, config)