Screenshare in Agora Angular 8

Question

I am trying to integrate Agora in Angular 8 application. Successfully, I am able to join and leave video call, now I am trying to integrate screen share which I am unable to do so. As from the Agora official documentation, we have examples for screen share but AgoraRTC isn't supporting in Angular as it is a JS file.

https://www.npmjs.com/package/angular-agora-rtc

I am using this Angular npm library.

I have used the following code

   constructor(
    private agoraService: NgxAgoraService
  ) {
    // AgoraRTC.createClient({
    //   mode: 'rtc',
    //   codec: 'vp8'
    // })
    this.uid = Math.floor(Math.random() * 100);
    this.agoraService.createClient({ mode: 'rtc', codec: 'vp8' });
  }

  ngOnInit() {
    this.showImage = true;
  }

  goLive() {
    this.showImage = false;
    this.showStopBtn = true;
    this.channel_name = ((document.getElementById("channel_name") as HTMLInputElement).value);
    console.log("Channel Name = " + this.channel_name);
    this.agoraService.client.join(null, this.channel_name, null, (uid) => {
      //alert("UID = "+uid)
      this.uid = uid;
      this.localStream = this.agoraService.createStream({
        streamID: uid,
        audio: true,
        video: true,
        screen: false,
      });
      this.localStream.setVideoProfile('4K_3');
      this.subscribeToStreams();
    });
  }

  private subscribeToStreams() {
    // The user has granted access to the camera and mic.
    this.localStream.on(StreamEvent.MediaAccessAllowed, () => {
      console.log('accessAllowed');
    });
    // The user has denied access to the camera and mic.
    this.localStream.on(StreamEvent.MediaAccessDenied, () => {
      console.log('accessDenied');
    });

    this.localStream.init(
      () => {
        console.log('getUserMedia successfully');
        this.localStream.play('agora_local');
        this.agoraService.client.publish(this.localStream, (err) =>
          console.log('Publish local stream error: ' + err)
        );
        this.agoraService.client.on(ClientEvent.LocalStreamPublished, (evt) =>
          console.log('Publish local stream successfully')
        );
      },
      (err) => console.log('getUserMedia failed', err)
    );

    this.agoraService.client.on(ClientEvent.Error, (err) => {
      console.log('Got error msg:', err.reason);
      if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
        this.agoraService.client.renewChannelKey(
          '',
          () => {
            console.log('Renew channel key successfully');
          },
          (err) => {
            console.log('Renew channel key failed: ', err);
          }
        );
      }
    });

    this.agoraService.client.on(ClientEvent.RemoteStreamAdded, (evt) => {
      const stream = evt.stream;
      this.agoraService.client.subscribe(stream);
    });

    this.agoraService.client.on(ClientEvent.RemoteStreamSubscribed, (evt) => {
      const stream = evt.stream as Stream;
      if (!this.remoteCalls.includes(`agora_remote${stream.getId()}`))
        this.remoteCalls.push(`agora_remote${stream.getId()}`);
      setTimeout(() => stream.play(`agora_remote${stream.getId()}`), 1000);
    });

    this.agoraService.client.on(ClientEvent.RemoteStreamRemoved, (evt) => {
      const stream = evt.stream as Stream;
      stream.stop();
      this.remoteCalls = this.remoteCalls.filter(
        (call) => call !== `#agora_remote${stream.getId()}`
      );
      console.log(`Remote stream is removed ${stream.getId()}`);
    });

    this.agoraService.client.on(ClientEvent.PeerLeave, (evt) => {
      const stream = evt.stream as Stream;
      if (stream) {
        stream.stop();
        this.remoteCalls = this.remoteCalls.filter(
          (call) => call === `#agora_remote${stream.getId()}`
        );
        console.log(`${evt.uid} left from this channel`);
      }
    });
  }

  stopLive() {
    this.agoraService.client.leave(() => {
      console.log("client leaves channel");
    }, (err) => {
      console.log("client leave failed ", err);
      //this.toaster.error("Some error occurred while leaving. Please try again!", "Failed")
    });
    this.localStream.stop();
    this.localStream.close();
    this.showImage = true;
    this.showStopBtn = false;
  }

  initScreenShare() {
    this.localStream = this.agoraService.createStream({
      streamID: this.uid,
      audio: false,
      video: false,
      screen: true,
      extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg'
    });
   
    this.localStream.setScreenProfile("480p_1");
    this.localStream.init(() => {
      console.log('init local stream success');
      // play stream with html element id "local_stream"
      this.localStream.play('video_local');
      this.agoraService.client.publish(this.localStream, (err) =>
        console.log('Publish local stream error: ' + err)
      );
      this.agoraService.client.on(ClientEvent.LocalStreamPublished, (evt) =>
        console.log('Publish local stream successfully')
      );
    },
      (err) => console.log('getUserMedia failed', err)
    );
  }

Screenshare is now working, but the screen(opening in 2 tabs) cannot be seen by other participants.

Thank you.

Answer 1

shareScreen(channel): void {

  this.agoraService.client.unpublish(this.localStream, function (err) {});
  this.agoraService.client.on(
    ClientEvent.LiveStreamingStopped,
    function (evt) {}
  );
  this.localStream = this.agoraService.createStream({
    streamID: channel,
    audio: false,
    video: false,
    screen: true,
    screenAudio:true
  });
  this.localStream.init(
    () => {
      this.agoraService.client.publish(this.localStream, function (err) {});
      this.showscreen=true;
      this.agoraService.client.on(
        ClientEvent.LocalStreamPublished,
        function (evt) {}
      );
    },
    (err) => {}
  );

}