功能描述
本文主要介绍如何在 TRTC Web SDK 实现屏幕分享功能。
实现流程
1. 【推流端】开启屏幕分享
const trtcA = TRTC.create();
await trtcA.enterRoom({
scene: 'rtc',
sdkAppId: 140000000,
userId: 'userA',
userSig: 'userA_sig',
roomId: 6969
})
await trtcA.startScreenShare();
2. 【拉流端】播放屏幕分享
const trtcB = TRTC.create();
trtcB.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
trtcB.startRemoteVideo({ userId, streamType, view: `${userId}_main` });
} else {
trtcB.startRemoteVideo({ userId, streamType, view: `${userId}_screen` });
}
});
await trtcB.enterRoom({
scene: 'rtc',
sdkAppId: 140000000,
userId: 'userB',
userSig: 'userB_sig',
roomId: 6969
})
3. 同时推摄像头 + 屏幕分享
await trtcA.startLocalVideo();
await trtcA.startScreenShare();
4. 屏幕分享 + 系统音频
采集系统音频支持 Chrome M74+
在 Windows 和 Chrome OS 上,可以采集整个系统的音频。
在 Linux 和 Mac 上,只能采集某个页面的音频。
其它 Chrome 版本、其它系统、其它浏览器均不支持。
await trtcA.startScreenShare({ option: { systemAudio: true }});
5. 停止屏幕分享
await trtcA.stopScreenShare();
trtcB.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, ({ userId, streamType }) => {
if (streamType === TRTC.TYPE.STREAM_TYPE_SUB) {
}
})
另外用户还可能会通过浏览器自带的按钮停止屏幕分享,因此屏幕分享流需要监听屏幕分享停止事件,并进行相应的处理。
trtcA.on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
console.log('screen sharing was stopped');
});
注意事项
常见问题
1. Safari 屏幕分享出现报错 getDisplayMedia must be called from a user gesture handler
这是因为 Safari 限制了 getDisplayMedia
屏幕采集的接口,必须在用户点击事件的回调函数执行的 1 秒内才可以调用。
async function onClick() {
await trtcA.startScreenShare();
await trtcA.enterRoom({
roomId: 123123,
sdkAppId: 140000000,
userId: 'userA',
userSig: 'userA_sig',
});
async function onClick() {
await trtcA.enterRoom({
roomId: 123123,
sdkAppId: 140000000,
userId: 'userA',
userSig: 'userA_sig',
})
await trtcA.startScreenShare();
}
2. Mac Chrome 在已授权屏幕录制的情况下屏幕分享失败,出现 "NotAllowedError: Permission denied by system" 或者 "NotReadableError: Could not start video source" 错误信息,Chrome bug。解决方案:打开【设置】> 点击【安全性与隐私】> 点击【隐私】> 点击【屏幕录制】> 关闭 Chrome 屏幕录制授权 > 重新打开 Chrome 屏幕录制授权 > 关闭 Chrome 浏览器 > 重新打开 Chrome 浏览器。
本页内容是否解决了您的问题?