How to switch between webcam and screen share using a single WebRTC live stream?

[Jose_Emmanuel_Manang]

I am using the resources on this link: https://github.com/WowzaMediaSystems/webrtc-examples.

[Amara_Graham]

This functionality does not exist at this time in our repo. The example repo has one example for screenshare and one example for webcam chat/meeting, but not both.

[Marc_Medina]

Hi Amara! I also encountered this kind of error. What would be the best way to implement Wowza for eLearning? The feature that I want to achieve is Live Stream the teacher’s video and at the same time Share Screen the presentation (Ex. PPT, PDF, etc.).

[Jose_Emmanuel_Manang]

I see. I was planning to use Wowza for E-Learning where you can use your webcam and screen share simultaneously. Do you have some recommendations?

[Amara_Graham]

@Jose Emmanuel Manangan @Marc Medina honestly I would use Zoom at this point. Currently we do not have a way to composite the webcam and screenshare into a single stream at the server with Wowza. We’ve talked about putting compositing on our roadmap, but I cannot make any promises as to when this may happen or if it would include handling use cases like this.

I’m happy to add this item into our feature request backlog.

[Remco_Treuren]

You can switch between the two but not put them into one composite.

Switching is quite easy, what you need to use is replaceTrack. This will seamlessly switch the track from for instance webcam to screen and back without interrupting the stream. We’ve been doing this for years.

[Kevin_Mui]

Is there a repo that you can share? Sounds like you got it figured out!

[Kevin_Mui]

@Remco_Treuren could you share the codebase or example of how get webrtc to switch between cam/screenshare? TIA

[Remy_G]

You can use replaceTrack for this.

So you create a track for the screen with getDisplayMedia, and one for the camera with getUserMedia and you store the streams in two variables, let’s say ‘camera’ and ‘screen’. So you store the stream variable you get through both methods.

Then, to switch in this example from ‘camera’ to ‘stream’, :

     peerConnection.getSenders().forEach(
      function (rtpSender) {
        if (rtpSender.track.kind == 'video') {
          rtpSender.replaceTrack(screen.getVideoTracks()[0]).then(function() {
            console.log("Replaced video track from camera to screen");
          }).catch(function(error) {
            console.log("Could not replace video track: " + error);
          });
        }
      }
     );

[Chakrit_Worakulsawat]

Hi everyone,

I just tried replaceVideoTrack() function in webrtc-examples, but got the PeerConnectionError from startPublish() 's callback:

{
message: 'Peer connection failed',
stack: "Error: Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to set local offer sdp: Failed to set local video description recv parameters for m-section with mid='2'."
}

Anyone ever encountered this?
Thanks!