Switch camera to desktop capture

[edwinsyarief]

Hi Anyone,

Can someone give some example how to switch camera to desktop capture? or maybe camera to desktop capture + camera.

Thank you.

Best Regards, Edwin

[adwpc]

https://webrtc.github.io/samples/src/content/devices/input-output/

[edwinsyarief]

Hi @adwpc ,

Thanks for response. But I'm not asking about the switch hardware, I'm was asking about how to switch camera into share screen in realtime. Is it possible in this sdk?

Thanks & Regards, Edwin

[aixinaxc]

adopt LocalStream.getDisplayMedia Can share desktop video stream

const dispaly = await LocalStream.getDisplayMedia({
                    audio: true,
                    video: true,
                    simulcast: true, // enable simulcast
                })

                await this.CLIENT.publish(dispaly);

[edwinsyarief]

Sorry, but what I meant that are we able to share screen like this: using this sdk? Because I need to be able to share screen.

And also, when we switch between camera and screen sharing, is it possible doing like this?

        LocalStream.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: "screen",
              maxWidth: 1280,
              maxHeight: 720,
            },
            optional: [],
          },
        }).then(async (stream) => {
          console.log(stream);
          thiz.currentStream.removeTrack(thiz.currentVideoTrack);
          thiz.currentVideoTrack.stop();
          let newVideoTrack = stream.getVideoTracks()[0];
          thiz.currentStream.addTrack(newVideoTrack);
          thiz.currentVideoTrack = newVideoTrack;
          let video = document.getElementById("vrStreamVideo");
          if (video !== null && video !== undefined) {
            video.srcObject = thiz.currentStream;
          }
        });

Because the code above is not working. Please help. Thanks in advance

[edwinsyarief]

Sorry, @aixinaxc it works. Thanks

[edwinsyarief]

Okay, I'm able to switch the video to screen sharing, I replace the current video track with new screen stream track

         LocalStream.getDisplayMedia({
          audio: true,
          cursor: true,
          resolution: "hd",
        }).then(async (stream) => {
          const screenTrack = stream.getVideoTracks()[0];
          thiz.currentStream.removeTrack(thiz.currentVideoTrack);
          thiz.currentStream.addTrack(screenTrack);
          thiz.currentClientObject.publish(thiz.currentStream);

          screenTrack.onended = () => {
            thiz.currentStream.removeTrack(screenTrack);
            thiz.currentStream.addTrack(thiz.currentVideoTrack);
            thiz.currentClientObject.publish(thiz.currentStream);
          };
        });

But the participant still seeing the video stream not the screen sharing. How to push update to all participants?

[aixinaxc]

adopt this.CLIENT.publish (dispaly) push the shared stream, and you can see it from the far end

this.CLIENT Connection created for ionsfujsonrpcsignal

async OpenDisplayMedia(){
                const dispaly = await LocalStream.getDisplayMedia({
                    audio: true,
                    video: true,
                    simulcast: true, // enable simulcast
                })
                this.$refs.mainVideo.srcObject = dispaly //Load stream to video
                await this.CLIENT.publish(dispaly);  // Push the stream to the far end
            }

[edwinsyarief]

When I've tried this, changes still not showing on all participant instead still showing the old video, and after a couple seconds, the sfu is down:

Here is my code:

      LocalStream.getDisplayMedia({
          audio: true,
          video: true,
          simulcast: true,
        }).then(async (stream) => {
          thiz.currentStream = stream;
          await thiz.currentClientObject.publish(stream);
        });

[aixinaxc]

Is your ion SFU the latest version

[edwinsyarief]

Yes, the ion sfu is the latest from git. And the ion sdk js version 1.6.0.

I have also tried sfu 1.9.0 with sdk js 1.6.0, still not update the screen share on the participants, the participants still see the host's face

[aixinaxc]

Yes, the ion sfu is the latest from git. And the ion sdk js version 1.6.0.

I have also tried sfu 1.9.0 with sdk js 1.6.0, still not update the screen share on the participants, the participants still see the host's face

You can pull my project for testing. My project is based on Vue and webpack. He's available for sharing screens https://github.com/aixinaxc/starlight

[edwinsyarief]

@aixinaxc ,

thank you, but in my case, when the host changing between camera to share screen, the stream id must be the same. So, I was doing:

currentStream.removeTrack(currentStream.getVideoTracks()[0]);
currentStream.addTrack(newStream.getVideoTracks()[0]);

Am I doing it wrong?

Thank you

[edwinsyarief]

It is working now. There is no issue anymore about switching camera to screen share