Angular 使用适配器库的WebRTC中的远程视频为空

我是WebRTC的新手，目前正在尝试在我的Angular2项目中实现点对点视频聊天。我正在使用webrtc-adapter.js npm设置连接。远程视频保持空白，只有本地网络摄像头视频工作

我提到了链接：

我已经登记入住了chrome://webrtc-internals/ 跟踪连接，但无法找到确切原因

下面是我的代码：

setupRTC() {
    var log = msg => "<p>" + msg + "</p>";
    var failed = e => log(e + ", line " + e.lineNumber);
    this.pc = new RTCPeerConnection(SERVERS, DEFAULT_CONSTRAINTS);
    this.remotepc = new RTCPeerConnection(SERVERS, DEFAULT_CONSTRAINTS);
    var add = (pc, ca) => ca && pc.addIceCandidate(ca).catch(failed);

    this.pc.onicecandidate = e => add(this.remotepc, e.candidate);
    this.remotepc.onicecandidate = e => add(this.pc, e.candidate);
    this.pc.ontrack = e => (this.remoteVideo.nativeElement.srcObject = e.streams[0]);
    this.pc.oniceconnectionstatechange = e => log(this.pc.iceConnectionState);
}

setupRTC（）{
var log=msg=>“”+msg+“
”；
var failed=e=>log（e+，行“+e.lineNumber）；
this.pc=新的RTPeerConnection（服务器、默认\u约束）；
this.remotepc=新的RTPeerConnection（服务器、默认\u约束）；
var add=（pc，ca）=>ca&&pc.addIceCandidate（ca）.catch（失败）；
this.pc.onicecandidate=e=>add（this.remotepc，e.candidate）；
this.remotepc.onicecandidate=e=>add（this.pc，e.candidate）；
this.pc.ontrack=e=>（this.remoteVideo.nativeElement.srcObject=e.streams[0]）；
this.pc.oniceconnectionstatechange=e=>log（this.pc.iceConnectionState）；
}

视频聊天在点击按钮事件时启动，如下所示：

startVideo() {
    debugger;
    let nav = <any>navigator;
    var log = msg => "<p>" + msg + "</p>";
    var failed = e => log(e + ", line " + e.lineNumber);
    nav.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => this.pc.addStream(this.localVideo.nativeElement.srcObject = stream))
        .then(() => this.pc.createOffer())
        .then(offer => this.pc.setLocalDescription(offer))
        .then(() => this.remotepc.setRemoteDescription(this.pc.localDescription))
        .then(() => this.remotepc.createAnswer())
        .then(answer => this.remotepc.setLocalDescription(answer))
        .then(() => this.pc.setRemoteDescription(this.remotepc.localDescription))
        .catch(failed);

}

startVideo（）{
调试器；
让nav=导航器；
var log=msg=>“”+msg+“
”；
var failed=e=>log（e+，行“+e.lineNumber）；
getUserMedia（{video:true，audio:true}）
.then（stream=>this.pc.addStream（this.localVideo.nativeElement.srcObject=stream））
.然后（（）=>this.pc.createOffer（））
.then（offer=>this.pc.setLocalDescription（offer））
.然后（（）=>this.remotepc.setRemoteDescription（this.pc.localDescription））
.然后（（）=>this.remotepc.createAnswer（））
.then（答案=>this.remotepc.setLocalDescription（答案））
.然后（（）=>this.pc.setRemoteDescription（this.remotepc.localDescription））
.捕获（失败）；
}

在HTML中，我有一个弹出窗口：

                       <modal #myModal3 cancelButtonLabel="Close" (onClose)="showCam()">
                            <modal-header>
                                <h4>Video Chat</h4>
                            </modal-header>

                            <modal-content>
                                <div id="callPage" class="call-page">
                                    <video id = "localVideo" [src]="localVideo" autoplay></video>
                                    <video id = "remoteVideo" [src]="remoteVideo" autoplay></video>

                                    <div class="row text-center">
                                        <div class="col-md-12">
                                            <button id="callBtn" (click)="startVideo()">Call</button>
                                            <button id="hangUpBtn">Hang Up</button><div id="div"></div>
                                        </div>
                                    </div>

                                </div>
                            </modal-content>
                        </modal>

视频聊天
呼叫
挂断

---

有什么建议吗？

您只发送了一种方式，但听到了错误的一端。更改：

this.pc.ontrack = e => this.remoteVideo.srcObject = e.streams[0];

到

---

然后它对我有用。

1）使用调试器2）您选择了正确的相机源吗？有时您需要检查其他解决方案。在大多数情况下，选择带有“usb”前缀或后缀（设备名称）的设备。有任何消息日志吗？在调试器中，遥控器的src显示为空。我是否遗漏了什么？您的意思是应该正确设置本地摄像头源吗？此处的建议设置是什么？是，请尝试其他设备。如果您有带麦克风的网络摄像头，并且耳机上还有一个麦克风，则可能有（例如）只有黑屏音频…还有！有时你也需要超时（最多1或2秒）在createAnswer/setRemoteDescription之间。查看webrtc日志，一定有一些警告…Jib，您是否在您的终端工作？这是在两个独立系统上运行的两个会话之间接收远程视频的唯一更改吗？

this.remotepc.ontrack = e => this.remoteVideo.srcObject = e.streams[0];