Tutorial: Screen Sharing

Function Description

This article mainly introduces how to implement screen sharing function 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 collection 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 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 TRTC.EVENT.REMOTE_AUDIO_AVALIABLE 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