Function Description
This article mainly introduces how to implement screen sharing in TRTC Web SDK.
Implementation Process
1. Start Local Screen Sharing
const trtcA = TRTC.create();
await trtcA.enterRoom({
scene: 'rtc',
sdkAppId: 140000000,
userId: 'userA',
userSig: 'userA_sig',
roomId: 6969
})
await trtcA.startScreenShare();
2. Play Remote Screen Sharing
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. Start Camera + Screen Sharing at the Same Time
await trtcA.startLocalVideo();
await trtcA.startScreenShare();
4. Screen Sharing + System Audio
System audio is supported by Chrome M74+
On Windows and Chrome OS, the audio of the entire system can be collected.
On Linux and Mac, only the audio of a certain page can be collected.
Other Chrome versions, other systems, and other browsers are not supported.
await trtcA.startScreenShare({ option: { systemAudio: true }});
Check Share sytem audio
in the pop-up dialog box, and the system audio will be mixed with the local microphone and published. Other users in the room will receive the REMOTE_AUDIO_AVAILABLE event. 5. Stop Screen Sharing
await trtcA.stopScreenShare();
trtcB.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, ({ userId, streamType }) => {
if (streamType === TRTC.TYPE.STREAM_TYPE_SUB) {
}
})
In addition, users may also stop screen sharing through the browser's own button, so the screen sharing stream needs to listen for the screen sharing stop event and respond accordingly.
trtcA.on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
console.log('screen sharing was stopped');
});
Precautions
2. The SDK uses the 1080p
parameter configuration by default to collect screen sharing. For details, refer to the interface: startScreenShare Common Issues
1. Safari screen sharing error getDisplayMedia must be called from a user gesture handler
This is because Safari restricts the getDisplayMedia
screen capture interface, which must be called within 1 second of the callback function of the user click event.
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 screen sharing fails with the error message "NotAllowedError: Permission denied by system" or "NotReadableError: Could not start video source" when screen recording is already authorized. Chrome bug. Solution: Open 【Settings】> Click 【Security & Privacy】> Click 【Privacy】> Click 【Screen Recording】> Turn off Chrome screen recording authorization > Reopen Chrome screen recording authorization > Close Chrome browser > Reopen Chrome browser.
Was this page helpful?