angular - Agora Angular 8 中的屏幕共享

Question

我正在尝试将 Agora 集成到 Angular 8 应用程序中。成功地，我能够加入和离开视频通话，现在我正在尝试集成我无法做到的屏幕共享。从 Agora 官方文档中，我们有屏幕共享的示例，但 AgoraRTC 在 Angular 中不支持，因为它是一个 JS 文件。

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

我正在使用这个 Angular npm 库。

我使用了以下代码

   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)
    );
  }

屏幕共享现在正在工作，但其他参与者看不到屏幕（在 2 个选项卡中打开）。

谢谢你。