屏幕共享
更新时间: 2024/08/05 15:02:55
通过 NERTC SDK 可以在视频通话或互动直播过程中实现屏幕共享,主播或连麦者可以将自己的屏幕内容,以视频的方式分享给远端参会者或在线观众观看,从而提升沟通效率,一般适用于多人视频聊天、在线会议以及在线教育场景。
-
视频会议场景中,参会者可以在会议中将本地的文件、数据、网页、PPT 等画面分享给其他与会者,让其他与会者更加直观的了解讨论的内容和主题。
-
在线课堂场景中,老师可以通过屏幕共享将课件、笔记、教学内容等画面展示给远端的其他学生观看,降低传统教学模式下的沟通成本,提升教育场景的用户体验。
NERTC SDK 以辅流的形式实现屏幕共享,即单独为屏幕共享开启一路上行的视频流,摄像头的视频流作为主流,屏幕共享的视频流作为辅流,两路视频流并行,主播同时上行摄像头画面和屏幕画面两路画面。
此外 NERTC SDK 还支持在共享屏幕的同时,也共享本地播放的系统背景音。具体请参考音频共享。
示例项目
网易云信在 GitHub 上提供设置屏幕共享的开源示例项目 ScreenShare,您可以前往下载体验,也可以在线体验此功能。
注意事项
- NERTC Web SDK 自 V4.1.0 版本起,支持同时开启摄像头和屏幕共享,屏幕共享流以辅流形式发送。
- 屏幕共享功能支持 Chrome 72 及后续版本。
- NERTC Android、iOS、Windows 和 macOS SDK V3.9.0 及以上版本,Web SDK V4.1.0 及以上版本支持通过辅流实现屏幕共享。如果使用辅流的屏幕共享方案,请保证房间内所有成员均升级到支持版本以上,否则互相通信时会因同时发送主流和辅流造成通话异常等问题。
- 如果您的 App 无法针对所有端进行强制升级,屏幕共享场景中仅部分端使用上述支持的版本,为避免上述通话异常问题,必须保证通话过程中单人同时只有一路上行视频流。当需要将视频流切换为屏幕共享流时,请先通过关闭视频流,再启动屏幕共享流。反向切换同理。
本端共享屏幕
API 调用时序
sequenceDiagram
participant 应用A
participant NERtcSDK1
participant WECAN
participant NERtcSDK2
participant 应用B
Note right of 应用A: 设置画布
应用A->>NERtcSDK1: setLocalRenderMode
note over 应用A, 应用B: 开启屏幕共享
Note right of 应用A: 初始化时开启
应用A->>NERtcSDK1: NERTC.createStream(screen:true)
应用A->>NERtcSDK1: setScreenProfile
应用A->>NERtcSDK1: setVideoEncoderConfiguration
应用A->>NERtcSDK1: localStream.init
Note right of 应用A: 加入房间时开启
应用A->>NERtcSDK1: setScreenProfile
应用A->>NERtcSDK1: setVideoEncoderConfiguration
应用A->>NERtcSDK1: Stream.open
note over 应用A, 应用B: 控制屏幕共享进程
应用A->>NERtcSDK1: Stream.muteScreen/Stream.unmuteScreen
应用A->>NERtcSDK1: Stream.close
NERtcSDK1-->>应用A: on('stopScreenSharing')
NERtcSDK1 -> WECAN: 视频数据传输
WECAN -> NERtcSDK2: 视频数据传输
NERtcSDK2-->>应用B: on('stream-removed')
实现方法
-
设置屏幕共享辅流画布。
通过
setLocalRenderMode
接口设置本端的屏幕共享画面大小。此方法可以设置屏幕共享画面的高度和宽度,在屏幕共享画面与自定义宽高不匹配时支持裁剪。 -
开始屏幕共享。
您可以在初始化之前配置屏幕共享,进入通话后会直接进入屏幕共享状态。进入通话时,默认订阅远端的屏幕共享流,所以可以直接接收到远端的屏幕共享流。
您也可以根据场景需求,在通话过程中随时开启屏幕共享。
-
初始化时开启屏幕共享。
在调用
createStream
方法创建音视频流时,把video
字段设为true
,screen
字段设为true
,即可在初始化之前启动屏幕共享。 -
通话过程中开启屏幕共享。
加入房间之后,调用
Stream.open
方法,并将type
参数设置为screen
,可以随时启动屏幕共享。
-
-
暂停或重新启动屏幕共享。
在屏幕共享过程中,可以通过
Stream.muteScreen
和Stream.unmuteScreen
接口启动或暂停屏幕共享流。自 V4.1.0 版本起,原 muteVideo 和 unmuteVideo 接口不再对屏幕共享流有效。
-
关闭屏幕共享。
退出通话时,屏幕共享流会自动关闭。如果您在通话过程中需要关闭辅流形式的屏幕共享,可以通过
Stream.close
接口关闭屏幕共享,并且停止发布屏幕共享流。此时本地会触发
stopScreenSharing
回调,远端会收到stream-removed
回调。
示例代码
jslet client = NERTC.createClient({
appkey,
});
await client.join({
channelName: "channel123",
uid: 123123,
});
//创建本地流时,设置screen为true
let localStream = NERTC.createStream({
uid: 123123,
audio: true,
video: true,
screen: true,
});
try{
await localStream.init()
console.log('初始化本地流成功');
}catch(error){
console.error('初始化本地流失败 ', error);
}
设置屏幕共享属性
开启屏幕共享之前,您可以根据用户喜好设置屏幕共享流的相关属性,调整屏幕共享画面的清晰度,获得较高的用户体验。
-
通过
setScreenProfile
接口设置屏幕共享的视频流属性,例如分辨率和帧率。若您选择在初始化时开启屏幕共享,
setScreenProfile
需要在init
接口之前调用;若您选择在通话过程中开启屏幕共享,setScreenProfile
需要在localStream.open
接口之前调用。例如,您可以通过
resolution
参数设置屏幕共享视频流的分辨率,支持设置为:resolution可选值 类型 说明 NERTC.VIDEO_QUALITY_480p number 屏幕共享低分辨率 640x480 NERTC.VIDEO_QUALITY_720p number 屏幕共享中分辨率 1280x720 NERTC.VIDEO_QUALITY_1080p number 屏幕共享中分辨率 1920x1080 示例代码如下:
//设置屏幕共享视频流的分辨率为 1080p let resolution = NERTC.VIDEO_QUALITY_1080p localStream.setScreenProfile({resolution})
-
通过
setVideoEncoderConfiguration
接口设置屏幕共享偏好,以调整编码倾向。您可以通过contentHint
参数设置屏幕共享内容为动画或细节。motion
:内容类型为动画。当共享的内容是视频、电影或游戏时,推荐选择该内容类型。当你设置内容类型为动画时,按您设置的帧率处理。detail
:内容类型为细节。当共享的内容是图片或文字时,推荐选择该内容类型。当您设置内容类型为细节时,最高帧率允许设置到 10 帧,设置超过 10 帧时,不生效,按 10 帧处理。
示例代码如下:
//设置内容类型为动画 rtc.localStream = NERTC.createStream({screen: true}) rtc.localStream.setVideoEncoderConfiguration({ mediaType: "screen", streamType: "high", maxBitrate: 3_000_000, contentHint: "motion", })
观看远端屏幕共享
API 调用时序
sequenceDiagram
participant 应用A
participant NERtcSDK1
participant WECAN
participant NERtcSDK2
participant 应用B
应用A->>NERtcSDK1: setupRemoteSubStreamVideoCanvas
Note right of 应用A: 收到远端用户开启屏幕共享的回调
NERtcSDK1-->>应用A: on('stream-added')
应用A->>NERtcSDK1: setSubscribeConfig
NERtcSDK1-> WECAN: 视频数据传输
WECAN-> NERtcSDK2: 视频数据传输
NERtcSDK2-->>应用B: on('stream-subscribed')
实现方法
-
设置远端辅流画布。 通过
setRemoteRenderMode
接口设置远端的屏幕共享画面大小。此方法可以设置屏幕共享画面的高度和宽度,在屏幕共享画面与自定义宽高不匹配时支持裁剪。 -
订阅远端用户的屏幕共享流。 接收端可以通过
setSubscribeConfig
接口选择是否订阅发送端的屏幕共享:js
client.on('stream-added', function(evt){ // 只订阅远端音频,不订阅视频及屏幕共享 evt.stream.setSubscribeConfig({ audio: true, video: false, screen: false }); client.subscribe(evt.stream); });
API 参考
方法 | 功能描述 |
---|---|
createStream |
创建并返回音视频流对象。 |
Stream.open |
打开音视频输入设备,如屏幕共享,并发布出去。 |
Stream.close |
关闭音视频输入设备,如屏幕共享,并停止发布。 |
Stream.muteScreen |
暂停屏幕共享。 |
Stream.unmuteScreen |
重新启动屏幕共享。 |
setScreenProfile |
设置视频流,如屏幕共享流的属性。 |
setVideoEncoderConfiguration |
设置视频编码属性,如屏幕共享偏好。 |
setRemoteRenderMode |
设置远端的屏幕共享画面大小。 |
setSubscribeConfig |
订阅远端的屏幕共享。 |