CODEWITHSUNDEEP
javascriptvideo-streamingagora.iovideochatscreensharing
Breno Mattos
Breno Mattos

Reputation: 11

How can I screen share and camera video same time in different tracks?

I am testing Agora features for a web app that already uses webRTC. Currently, it works with one separate track for audio and two video tracks: one for the camera and another for the screen share.

When I tried to share the screen I couldn`t publish it without unpublish the camera track, like the doc for 4.x sdk version says: https://docs.agora.io/en/video-calling/develop/product-workflow?platform=web

Agora.io screen share sequence diagram

How can I solve this? For me appears to be a typical case on a video chat, where one user shares his screen and keeps showing his audio and video to present something.

My code:

  async startScreenShare(id?: string): Promise<void> {
    let stream: MediaStream;
    if (!id) {
      stream = await (navigator.mediaDevices as any).getDisplayMedia({
        audio: false,
        video: true,
      });
    } else {
      const constraint = {
        audio: false,
        video: {
          mandatory: {
            chromeMediaSource: 'screen',
            chromeMediaSourceId: id,
          },
        },
      };

      stream = await navigator.mediaDevices.getUserMedia(constraint as any);
    }

    const videoTrack = stream.getTracks()[0];

    this.rtc.screenVideoTrack = AgoraRTC.createCustomVideoTrack({
      mediaStreamTrack: videoTrack,
    });

    this.rtc.client.unpublish(this.rtc.localVideoTrack);

    await this.rtc.client.publish(this.rtc.screenVideoTrack);

  }

It is working but losing the camera track.

Upvotes: 1

Views: 1266

Answers (1)

openkmj
openkmj

Reputation: 26

An AgoraRTCClient object can publish only one video track.

Create new AgoraRTCClient to publish another track.

See "Enable both screen sharing and video" section of Agora Docs.

Upvotes: 0

Related Questions