视频标签不显示Angular 5的webrtc流视频

时间:2018-05-07 11:48:10

标签: html5 angular html5-video webrtc

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

    @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();

我正在使用WebRTC进行视频通话应用。问题是我能够看到我的本地视频。但同样不适用于远程视频。当我检查remoteVideo视频标签上的元素时,我可以看到网址。收到远程流时的enitre标记如下: <video _ngcontent-c7="" autoplay="autoplay" id="remoteVideo" src="blob:http://localhost:4200/832b72ca-4184-4215-9ab6-276242bf0291"></video> 但视频不可见。 任何帮助,将不胜感激。 谢谢。

1 个答案:

答案 0 :(得分:0)

也许这样,支持这两种类型:

try {

    this.remoteVideo.nativeElement.srcObject = event.stream;

} catch(error) {

    this.remoteVideo.nativeElement.src = URL.createObjectURL(event.stream);
};

this.remoteVideo.nativeElement.play();