How to switch between screen sharing stream and camera video stream?

When using ZEGO Express Web SDK to implement screen sharing, developers can refer to this article to switch between the published screen sharing stream and the video stream captured by the camera.

ZEGO recommends the following three methods, all using switching from screen sharing stream to camera video stream as an example.

1. Create two streams
2. Destroy the current stream and then create and publish a new stream
3. Replace the current video track

Create Two Streams

If the developer's actual application scenario allows creating and publishing two streams simultaneously, ZEGO recommends using this method:

1. The publishing end creates two MediaStream or ZegoLocalStream instance objects, corresponding to two streams — screen sharing stream and camera video stream. For specific implementation methods of creating streams, please refer to the createStream or createZegoStream interface.

2. When you need to switch from screen sharing stream to camera video stream, the playing end can select to play the camera video stream based on the stream ID of the camera video stream to successfully switch.

Destroy the Current Stream and Then Create and Publish a New Stream

1. Call stopPubliushStream to stop publishing, then call the destroyStream interface to destroy the current screen sharing stream.

2. Call createStream or createZegoStream to create a camera video stream.

3. Call the startPublishingStream interface to publish the camera video stream.

This method has good compatibility and stability, but cannot dynamically switch and has a longer switching time (about one to two seconds).

Replace the Current Video Track

Version 3.0.0 and Above

1. By calling the createZegoStream interface, create a ZegoLocalStream instance object localStream, which by default captures camera microphone stream.

   Call the startPublishingStream interface, passing in "streamID" and the stream object "localStream" obtained from creating the stream, to send the local audio and video stream to remote users.

   try {
       const localStream = await zg.createZegoStream()
       zg.startPublishingStream(streamID, localStream)
   } catch (err) {
       console.error(err)
   }

   try {
       const localStream = await zg.createZegoStream()
       zg.startPublishingStream(streamID, localStream)
   } catch (err) {
       console.error(err)
   }

2. After successful publishing, you need to replace the camera video in the publishing stream with screen sharing video. You can call the startCaptureScreen interface to capture screen sharing, then call the updatePublishingStream interface to update the video in the publishing stream.

   try {
       await localStream.startCaptureScreen()
       zg.updatePublishingStream(localStream, 0)
   } catch (err) {
       console.error(err)
   }

   try {
       await localStream.startCaptureScreen()
       zg.updatePublishingStream(localStream, 0)
   } catch (err) {
       console.error(err)
   }

Before Version 3.0.0

Call the replaceTrack interface to replace the video track in the audio and video stream with the camera video stream.

This method can achieve dynamic switching with fast switching speed, but the replaceTrack interface has many limitations:

• Only supports Chrome 65+, Safari, and the latest Firefox browser.
• May not work on some mobile devices.
• Before use, you need to create screen sharing stream and camera video stream through createStream.

Related References

• Video Call - Screen Sharing
• Video Call - Implementation Process