How to pause a share screen stream with openvidu browser?

OpenVidu v2 How to implement?
1

I’m using ReactJS to build a video conference and I have implemented a share screen feature. However, I would like to implement a pause button to pause the share screen stream. If I were to use publishVideo and set it to false, it would pause the stream but it would be a blank black screen. But what would be nice is to have the latest screen share and just freeze it without going blank. Is there a way I can implement this?

2

I don’t think there is a simple, easy way of achieving this. Of course it is possible, but it will require some extra steps. I think it would be necessary to capture a frame and override the video track of the internal RTCPeerConnection to display that single frame. So you won’t really disable/mute the video track, you would just override it to send an image instead of a video feed.

4

So far I have something like this:

const [isPaused, setIsPaused] = useState(false);
const [initialStreamTrack, setInitialStreamTrack] = useState(null);

useEffect(() => {
    if (!shareScreenStream) return;
    setInitialStreamTrack(shareScreenStream.getVideoTracks()[0])
}, [shareScreenStream])

const handlePauseShareScreen = () => {
    const video = document.getElementById('participant-video')
    const { width, height } = initialStreamTrack.getSettings()
    if (!isPaused) {
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        context.drawImage(video, 0, 0, width, height)
        const newStream = canvas.captureStream();
        shareScreenPublisher.replaceTrack(newStream.getVideoTracks()[0]);
        setIsPaused(true);
    } else {
        shareScreenPublisher.replaceTrack(initialStreamTrack);
        setIsPaused(false);
    }
}

I can pause the video successfully even though the height and width of the image is still wrong, but I can’t seem to unpause the video. Anything I’m doing wrong here?

5

Try this:

1.- Create a new stream and clone your video track

var originalShareScreen = new MediaStream;
originalShareScreen.addTrack(shareScreenStream.getVideoTracks()[0].clone())

2.- When you click unpause button, replace your publisher video track with your original videotrack

shareScreenPublisher.replaceTrack(originalShareScreen.getVideoTracks()[0]);