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

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

我刚才提到的链接“：

Remote VideoStream not working with WebRTC

而且我已经在Chrome中检查：//的WebRTC，内部/跟踪的连接，但未能找到确切病因

下面是我的代码：

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>

有什么建议？

来源

2017-08-26 user3573851

1）使用调试器2）你选择了正确的相机源 - 有时你需要检查其他解决方案。在大多数情况下，请选择带有“usb”前缀或后缀（设备名称）的设备。任何消息日志？ –

在调试器中，远程的src显示为空。我错过了什么？你是否应该正确设置本地相机源？这里推荐的设置是什么？ – user3573851

是的，尝试其他设备。如果您有带麦克风和麦克风的网络摄像头，则可能只有（例如）带有黑色屏幕的音频... –

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

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

到

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

然后它为我工作。

来源

2017-08-27 00:05:53 jib

Jib，你是否在你的最后得到这个工作？这是在两个独立系统上运行的两个会话之间接收远程视频的唯一更改吗？ – user3573851

[是]（https://jsfiddle.net/jib1/hf1s577e/）。 – jib

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

回答

相关问题