Javascript WebRTC视频未显示

我正在创建一对一webrtc视频聊天室，但此代码不起作用，我想知道原因

function hasUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia; 
}

function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || 
window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
return !!window.RTCPeerConnection;
}



 function startPeerConnection(stream) {
 var configuration = {

    "iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
 };
 yourConnection = new RTCPeerConnection(configuration);
 theirConnection = new webkitRTCPeerConnection(configuration);

 yourConnection.addStream(stream);
 theirConnection.onaddstream = function (e) {
     theirVideo.src = window.URL.createObjectURL(e.stream);
 };


 yourConnection.onicecandidate = function (event) {
    if (event.candidate){

   theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
    }
  };

 theirConnection.onicecandidate = function (event) {
    if (event.candidate) {
        yourConnection.addIceCandidate(new 
  RTCIceCandidate(event.candidate));
    }
  };

    yourConnection.createOffer(function (offer) {
    yourConnection.setLocalDescription(offer);
    theirConnection.setRemoteDescription(offer);

    theirConnection.createAnswer(function (offer) {
        theirConnection.setLocalDescription(offer);
        yourConnection.setRemoteDescription(offer);
    });
    });
     }


    var yourVideo = document.querySelector("#face_cam_vid"),
    theirVideo = document.querySelector("#thevid"),
   yourConnection, theirConnection;

   if (hasUserMedia()) {
      navigator.getUserMedia({ video: true, audio: true }, function(stream) 
 {
        yourVideo.src = window.URL.createObjectURL(stream);
        if (hasRTCPeerConnection()) {
            startPeerConnection(stream);
        } else {
            alert("Sorry, your browser does not support WebRTC.");
        }
         }, function (error) {
         console.log(error);
        }
               );
     } else {
      alert("Sorry, your browser does not support WebRTC.");
    }

这段代码给了我一个类似这样的错误，当你看到视频没有显示时，我试图创建div（视频标签所在的位置），但它无论如何都不起作用

如果你能帮助我，我会很高兴这里是我的html

视频通话
var width=Math.max（window.screen.width，window.innerWidth）；
if（width这是过时的代码。它包含6个跟踪WebRTC API发展的问题

TL；DR:它不起作用，因为您没有检查错误，并且只测试了一个浏览器

1） 旧供应商前缀（删除）：
而是使用：

iceServers: [{urls: "stun:stun.1.google.com:19302"}]

…因为从技术上讲，可以通过多个URL访问ICE服务器

3） 使用旧的回调API而不进行错误检查（改用承诺）：
这是错误的：

navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });

yourConnection.createOffer(function(offer) { /* ... */ }); 

theirVideo.src = URL.createObjectURL(stream);

…因为一个。Edge显示
类型错误：参数不是可选的

Chrome和Safari中的遗留bug允许这样做，但在Firefox或Edge中不起作用。忽视错误会使你无法了解事情为什么不起作用。如果用户拒绝摄像头访问，你想知道

所有现代浏览器都支持
媒体设备上的
。用它来代替：

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => { /* use stream here */ })
  .catch(error => console.log(error));

4） 您落入了RTPeerConnection的“承诺/回调混淆陷阱”：
简而言之，这类似于上面的#2，但有一点扭曲。这是错误的：

navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });

yourConnection.createOffer(function(offer) { /* ... */ }); 

theirVideo.src = URL.createObjectURL(stream);

你以为你在打电话给警察，但你不是。所需的两个参数：

yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);

实际上，您调用的是同一个名称，因为函数是JS中的对象：

const promise = yourConnection.createOffer(optionsObject);

这就是代码停止工作的地方。您的回调函数从未被调用，而是被解释为一个空的选项对象。你忽视了回报的承诺。改用promise API

5） createObjectURL（流）已弃用，已消失。
它已在Firefox和Chrome71（您收到的最新版本）中删除。这是错误的：

navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });

yourConnection.createOffer(function(offer) { /* ... */ }); 

theirVideo.src = URL.createObjectURL(stream);

相反，请使用以下命令：

theirVideo.srcObject = stream;

6） 还有一点：不推荐使用整个流API（使用轨迹）。
addStream（）
&
onaddstream
已不在，仅在某些浏览器中可用：

yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;

相反，对等连接现在完全基于跟踪。改用这个：

for (const track of stream.getTracks()) {
  yourConnection.addTrack(track, stream);
}
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];

有关这些差异的更多信息，请参阅

工作示例
以下是：

嘿，它工作，但部分原因是它不等待第二个用户连接这条路线，并显示我和他们的视频与我的相机苏，因为我说我想要一对一的聊天室，我想这个代码可以帮我：这是照片你的代码是一个本地循环演示，而不是聊天室。改为在MDN上签出。签出后，它也尝试了此演示，但没有房间，三个人如何能够同时连接WEBRTC？这是一种艰难的方式。三个人或者意味着每个人都有两个连接，一个用于其他参与者（也称为网状呼叫）。超过5名参与者后，您将需要使用中央SFU服务器方法。“房间”只是发现同龄人的应用程序逻辑；不是WebRTC的一部分。我需要房间吗？或者当前两个已经在流式传输时，它会分离第三个客户端还是什么？对不起，我是新手