我使用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角的第三方库?谢谢
答案 0 :(得分:0)
假设peerx
是您的第三方库的全局变量,您必须将它放在组件装饰器之前:
declare var peerx: any;
通过这种方式,您可以访问第三方库的所有属性。如果您有时间丢失,您甚至可以编写Typescript的定义文件,这意味着您的IDE将自动完成(并且您需要import
而不是declare
)< / p>