tencent cloud

Feedback

Last updated: 2023-10-30 11:11:57

    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

    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.
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support