[英]video tag not displaying webrtc stream video with Angular 5
xyz.html xyz.html
<video id="localVideo" #localVideo autoplay="autoplay"></video> <video id="remoteVideo" #remoteVideo autoplay="autoplay"></video> <button (click)="startVideoCall()">Start video call </button>
xyz.ts xyz.ts
@ViewChild ('localVideo') public localVideo:ElementRef;
@ViewChild ('remoteVideo') public remoteVideo:ElementRef;
//on getUserMedia
this.localVideo.nativeElement.src = window.URL.createObjectURL(stream);
this.localVideo.nativeElement.play();
// on receiving the remote stream
this.remoteVideo.nativeElement.src = window.URL.createObjectURL(event.stream);
this.remoteVideo.nativeElement.play();
I am using WebRTC for a video call application. 我正在将WebRTC用于视频通话应用程序。 The issue is i am able to see my local video.
问题是我可以看到我的本地视频。 But the same doesnt work for remote video.
但是对于远程视频来说,这是行不通的。 When i do inspect element on remoteVideo video tag i can see the url.
当我检查remoteVideo视频标签上的元素时,我可以看到URL。 The enitre tag when i receive the remote stream is as follows :
<video _ngcontent-c7="" autoplay="autoplay" id="remoteVideo" src="blob:http://localhost:4200/832b72ca-4184-4215-9ab6-276242bf0291"></video>
but the video is not visible. 我收到远程流时的enitre标记如下:
<video _ngcontent-c7="" autoplay="autoplay" id="remoteVideo" src="blob:http://localhost:4200/832b72ca-4184-4215-9ab6-276242bf0291"></video>
但视频不可见。 Any help would be appreciated. 任何帮助,将不胜感激。 Thank you.
谢谢。
Maybe this way, to support both types: 也许这样,就可以同时支持两种类型:
try {
this.remoteVideo.nativeElement.srcObject = event.stream;
} catch(error) {
this.remoteVideo.nativeElement.src = URL.createObjectURL(event.stream);
};
this.remoteVideo.nativeElement.play();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.