Docs Overview/
Web/

Web

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, // Fill in your sdkAppId
  userId: 'userA', // Fill in your userId
  userSig: 'userA_sig', // Fill in userSig corresponding to userId
  roomId: 6969
})
await trtcA.startScreenShare();
2. Play Remote Screen Sharing
const trtcB = TRTC.create();
trtcB.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  // Main video stream, generally the stream pushed by the camera
  if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
    // 1. Place a div tag with an id of `${userId}_main` on the page to play the main stream in the div tag. The business side can customize the id of the div tag. This is just an example.
    // 2. Play the main video stream
    trtcB.startRemoteVideo({ userId, streamType,  view: `${userId}_main` });
  } else {
    // Sub video stream, generally the stream pushed by screen sharing.
    // 1. Place a div tag with an id of `${userId}_screen` on the page to play the screen sharing in the div tag. The business side can customize the id of the div tag. This is just an example.
    // 2. Play screen sharing
    trtcB.startRemoteVideo({ userId, streamType, view: `${userId}_screen` });
  }
});

await trtcB.enterRoom({
  scene: 'rtc',
  sdkAppId: 140000000, // Fill in your sdkAppId
  userId: 'userB', // Fill in your userId
  userSig: 'userB_sig', // Fill in userSig corresponding to userId
  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
 // Stop screen sharing collection and publishing
 await trtcA.stopScreenShare();

 // Other users in the room will receive the TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE event, and streamType is TRTC.TYPE.STREAM_TYPE_SUB.
 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.



// Listen for screen sharing stop event
trtcA.on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
  console.log('screen sharing was stopped');
});


Precautions

1. What is the main/sub video stream?
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.

Reference: webkit issue.

// good
async function onClick() {
  // It is recommended to execute the collection logic first when onClick is executed
  await trtcA.startScreenShare();
  await trtcA.enterRoom({ 
    roomId: 123123,
    sdkAppId: 140000000, // Fill in your sdkAppId
    userId: 'userA', // Fill in your userId
    userSig: 'userA_sig', // Fill in userSig corresponding to userId
  });
}

// bad
async function onClick() {
  await trtcA.enterRoom({ 
    roomId: 123123,
    sdkAppId: 140000000, // Fill in your sdkAppId
    userId: 'userA', // Fill in your userId
    userSig: 'userA_sig', // Fill in userSig corresponding to userId
  });
  // Entering the room may take more than 1s, and the collection may fail
  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.
3. WebRTC screen sharing known issues and workarounds