Question

我使用simple-peer js创建视频聊天，问题是它是第三方库，它不与角度系统通信，例如angular不跟踪属性绑定更改等。是代码

export class AppComponent implements OnInit, OnChanges {
  @ViewChild('myVideo') myVideo:any;

  texttoken :string;

  targetpeer: any;
  peer: any;
  n = <any>navigator;

  ngOnInit() {


    let video = this.myVideo.nativeElement;
    let peerx: any;
    let jsonToken:any;
    this.n.getUserMedia = (this.n.getUserMedia || this.n.webkitGetUserMedia || this.n.mozGetUserMedia || this.n.msGetUserMedia);
    this.n.getUserMedia({video:true, audio:true}, function(stream) {
    peerx = new SimplePeer ({
      initiator: location.hash === '#init',
      trickle: false,
      stream:stream
    })

    peerx.on('signal', function(data) {
      console.log(JSON.stringify(data)); 
      jsonToken = JSON.stringify(data);
      this.targetpeer = data;
    })

    peerx.on('data', function(data) {
      console.log('Recieved message:' + data);
    })

    peerx.on('stream', function(stream) {
      video.src = URL.createObjectURL(stream);
      video.play();
    })

    }, function(err){
    console.log('Failed to get stream', err);
    });


    setTimeout(() => {
      this.peer = peerx;
      this.texttoken = jsonToken;
      console.log(this.peer);
    }, 1000);

  }         
}

所以我唯一需要的是从peerx.on('signal'回调来获取数据，我有时需要延迟数据，因为你可以看到我只能在1秒后获得数据（参见timeOut函数）我得到了JsonToken），我能想到的唯一解决方案是创建一个无限循环来每隔x秒从那里获取更新的数据，你还有其他更好的想法吗？你如何处理2/4角的第三方库？谢谢

Answer 1

假设peerx是您的第三方库的全局变量，您必须将它放在组件装饰器之前：

declare var peerx: any;

通过这种方式，您可以访问第三方库的所有属性。如果您有时间丢失，您甚至可以编写Typescript的定义文件，这意味着您的IDE将自动完成（并且您需要import而不是declare）< / p>

Angular 2/4与第三方库进行通信

1 个答案: