Question

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

我已经提到了链接“：

Remote VideoStream not working with WebRTC

我已经检查了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);
}

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

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

}

在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>

任何建议？

Answer 1

你只是发送一种方式，并且听错了。变化：

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

到

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

然后它适合我。

使用适配器库

1 个答案: