Agora Angular 8中的屏幕共享

问题描述

我正在尝试将Agora集成到Angular 8应用程序中。成功地，我能够加入和退出视频通话，现在我正在尝试整合无法共享的屏幕共享。从Agora官方文档中可以看到屏幕共享的示例，但是Angular不支持AgoraRTC，因为它是一个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)
    );
  }

屏幕共享现在可以使用，但其他参与者看不到屏幕（在2个标签中打开）。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）