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

时间:2017-06-28 12:27:03

标签: javascript angular

我使用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角的第三方库?谢谢

1 个答案:

答案 0 :(得分:0)

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

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