在大型会议或在线教育等场景中，为了满足提升沟通效率的需求，主讲人或老师需要将本端的屏幕内容分享给远端参会者或在线学生观看。NERoom 支持屏幕共享功能，帮助您实时分享本端设备的屏幕内容，满足在线教育、互动娱乐、金融面签、视频会议等低延时高互动场景的需求。

功能介绍

通过 NERoom SDK 可以在视频通话中实现屏幕共享，主播或连麦者可以将自己的屏幕内容，以视频的方式分享给远端参会者或在线观众观看，从而提升沟通效率，一般适用于多人视频聊天、在线会议以及在线教育场景。

• 视频会议场景中，参会者可以在会议中将本地的文件、数据、网页、PPT 等画面分享给其他与会者，让其他与会者更加直观的了解讨论的内容和主题。

• 在线课堂场景中，老师可以通过屏幕共享将课件、笔记、教学内容等画面展示给远端的其他学生观看，降低传统教学模式下的沟通成本，提升教育场景的用户体验。

NERoom SDK 以辅流的形式实现屏幕共享，即单独为屏幕共享开启一路上行的视频流，摄像头的视频流作为主流，屏幕共享的视频流作为辅流，两路视频流并行，主播同时上行摄像头画面和屏幕画面两路画面。

注意事项

1. 您需要先调用 joinRoom 方法加入 NERoom 的房间，并且此房间开启了 RTC 房间的配置，即在创建房间时，已在NECreateRoomOptions方法中，设置enableRtc 参数为 true，具体操作方法请参见创建房间。
2. 您需要先调用 setupLocalVideoCanvas 方法开启本地视图后才能发布视频流。

开启本地共享屏幕

配置步骤

1. 调用 getRoomContext 方法获取房间上下文。

   调用此方法时，您需要将 roomUuid 设置为您所加入房间的 ID。

2. 调用 setupLocalVideoCanvas 方法设置本地辅流画布。

3. 调用 startScreenShare 方法共享本端屏幕。

示例代码

/**
 * 获取房间上下文NERoomContext
 * @param roomUuid 房间ID
 */
const NERoomContext = NERoomService.getRoomContext(roomUuid)

// 设置本地视图
const element = document.querySelector(".myVideo");
NERoomContext.rtcController.setupLocalVideoCanvas(element);
try {
    const res = await NERoomContext.rtcController.startScreenShare()
    console.log('openScreenShare', res);
} catch (err) {
    console.error(err)
}

关闭本地共享屏幕

配置步骤

1. 调用 getRoomContext 方法获取房间上下文。

   调用此方法时，您需要将 roomUuid 设置为您所加入房间的 ID。

2. 调用 stopScreenShare 方法停止共享本地屏幕。

示例代码

/**
 * 获取房间上下文NERoomContext
 * @param roomUuid 房间ID
 */
const NERoomContext = NERoomService.getRoomContext(roomUuid)

try {
    const res = await NERoomContext.rtcController.stopScreenShare()
    console.log('closeScreenShare', res);
} catch (err) {
    console.error(err)
}

观看远端屏幕共享

配置步骤

1. 调用 getRoomContext 方法获取房间上下文。

   调用此方法时，您需要将 roomUuid 设置为您所加入房间的 ID。

2. 设置远端辅流画布。

   1. 远端用户加入房间时，可以通过 onMemberJoinRoom 事件获取远端用户 ID。
   2. 调用 setupRemoteVideoSubStreamCanvas 方法设置指定远端用户的的辅流视频画布。调用此方法时，您需要设置 userUuid 为指定远端用户的 ID。

3. 订阅远端用户的屏幕共享流。

   1. 收到 onMemberScreenShareStateChanged 远端用户开启屏幕共享辅流通道的回调。
   2. 调用 subscribeRemoteVideoSubStream 方法订阅远端的屏幕共享辅流视频，订阅之后才能接收远端的辅流视频数据。

4. 结束屏幕共享。

收到 onMemberScreenShareStateChanged 其他用户关闭辅流的回调，结束屏幕共享。

示例代码

/**
 * 获取房间上下文NERoomContext
 * @param roomUuid 房间ID
 */
const NERoomContext = NERoomService.getRoomContext(roomUuid)

try {
    NERoomContext.rtcController.subscribeRemoteSubVideoStream(member.uuid, true)
} catch (error) {
    console.error(error)
}

关闭某成员的屏幕共享

在会议等场景中，主持人可以关闭某成员的屏幕共享。

您可以在云信控制台上配置某角色是否具备该权限，只有具备该权限的角色才可以执行此操作。

配置步骤

1. 调用 getRoomContext 方法获取房间上下文。

   调用此方法时，您需要将 roomUuid 设置为您所加入房间的 ID。

2. 调用 stopMemberScreenShare关闭房间内某成员的屏幕共享。相关的参数说明如下表所示。

参数	说明
userUuid	待关闭屏幕共享的成员的 uuid。

3. 房间内其他成员会收到 onMemberScreenShareStateChanged 回调，通知房间内其他成员关于屏幕共享状态的变更。

示例代码

/**
 * 获取房间上下文NERoomContext
 * @param roomUuid 房间ID
 */
const NERoomContext = NERoomService.getRoomContext(roomUuid)

try {
    NERoomContext.rtcController.stopMemberScreenShare(member.uuid)
} catch (error) {
    console.error(error)
}

API 参考

方法	功能描述
getRoomContext	获取房间上下文。
onMemberJoinRoom	成员加入房间通知。
setupLocalVideoCanvas	设置本端辅流画布。
setupRemoteVideoSubStreamCanvas	设置远端辅流画布。
subscribeRemoteVideoSubStream	订阅远端辅流。
startScreenShare	开启屏幕共享。
stopScreenShare	关闭屏幕共享。
onMemberScreenShareStateChanged	成员屏幕共享状态变更通知。
stopMemberScreenShare	关闭房间内某成员的屏幕共享。