WebRTC视频未显示

时间：2018-11-11 17:52:27

标签： javascript html 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.");
    }

并且此代码给了我类似这样的错误errors，并且当您看到视频未显示时，我试图创建div（其中有视频标签），但还是无法正常工作

  

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

 <!DOCTYPE html>
 <html>

 <head>
 <title>
  Video Call
 </title>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="/videof.js"></script>

 <script>var width = Math.max(window.screen.width, window.innerWidth);

    if(width <= 414){
        var faceCam = document.getElementById("face_cam");
        faceCam.style.width = "15%";
    }

    function smaller(){
        if(width <= 414){
            var size = document.getElementById("face_cam").style.width;
            if(size == "15%"){
                faceCam.style.width = "3%";
                faceCam.style.height = "3%";
                faceCam.style.borderRadius = "0px"
            }
            else if(size == "3%"){
                faceCam.style.width = "15%";
                faceCam.style.height = "30%";
                faceCam.style.borderRadius = "10px"
            }
        }

        else{
            var size = document.getElementById("face_cam").style.width;
            if(size == "30%"){
                faceCam.style.width = "3%";
                faceCam.style.height = "3%";
                faceCam.style.borderRadius = "0px"
            }
            else if(size == "3%"){
                faceCam.style.width = "30%";
                faceCam.style.height = "30%";
                faceCam.style.borderRadius = "10px";
            }
         }
        }


     var width = Math.max(window.screen.width, window.innerWidth);

     function smaller(){
        var size = document.getElementById("face_cam").style.height;
        if (size == "30%"){
            var frame = document.getElementById("face_cam");
            frame.style.height = "3%";
            frame.style.width = "4%";
            frame.borderRadius = "0px";
        }

        else{
            var frame = document.getElementById("face_cam");
            frame.style.height = "30%";
            frame.style.width = "30%";
        }
        }
         function BACKT(){ 
              window.location.href = "http://localhost:8000/"
        }

       </script>
       </head>

       <body>
      <div class="test_vc_field">
      <video id="thevid" autoplay></video>
     <div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
     <video id="face_cam_vid" autoplay></video>
    </div>
    </div>
    <div class="nav">
   <button class="next">შემდეგი</button>
   <img src="next.png" class="next_icon">
    <button class="off" id="off">გათიშვა</button>
   <img src="shutdown.png" class="shd_icon">
  <button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი 
  გვერდი</button>
  <img src="home.png" class="home_icon" onclick="main()">
  </div>
  </body>

   </html>

第二个用户显示face_cam_vid的#thevid id vid是我显示的视频

1 个答案:

答案 0 :(得分：8)

这是可怕的代码。它已经过时，有6个问题跟踪WebRTC API的发展。

TL; DR：，该操作无效，因为您没有检查错误，并且只测试了一种浏览器。

1）旧的供应商前缀（删除它们）：

yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong

webkit-名称在Firefox或Edge中不起作用。这些年来已经不需要了。如果您切换到navigator.mediaDevices.getUserMedia，则可以完全跳过10行前缀处理前导。

2）使用旧的url（使用urls）

从技术上讲这是错误的，尽管我怀疑大多数浏览器都允许它：

iceServers: [{url: "stun:stun.1.google.com:19302"}] // <-- wrong

代替使用：

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

...因为从技术上来说，可以通过多个网址访问ICE服务器。

3）使用旧的回调API而不进行错误检查（改为使用promises）：

这是错误的：

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

...因为3rd failure callback argument is required。 Edge说TypeError: Argument not optional。

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

所有现代浏览器都支持mediaDevices上的promise version of the API。改用它：

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

4）您陷入了RTCPeerConnection的“承诺/回调混合陷阱”：

我有answered this before，但简而言之，这与上面的＃2类似，但有所不同。这是错误的：

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

您认为您正在呼叫old callback API，但您没有。那些需要 两个 参数：

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

实际上，您实际上是在调用同名的modern promise API，因为函数是JS中的对象：

const promise = yourConnection.createOffer(optionsObject);

这是您的代码停止工作的地方。永远不会调用您的回调函数，而是将其解释为空的选项对象。您忽略返回的承诺。请改用Promise API。

5）不赞成使用createObjectURL（stream），

它已在Firefox和Chrome 71（您收到的warning）中删除。这是错误的：

theirVideo.src = URL.createObjectURL(stream);

请改用此：

theirVideo.srcObject = stream;

6）为了加分：不推荐使用整个流API（使用轨道）。

addStream()和onaddstream不在the spec中，仅在某些浏览器中可用：

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

有关这些差异的更多信息，请参见my blog。

工作示例

以下should work in all browsers：

const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");

(async () => {
  if (!("mediaDevices" in navigator) || !("RTCPeerConnection" in window)) {
    alert("Sorry, your browser does not support WebRTC.");
    return;
  }
  const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
  yourVideo.srcObject = stream;

  const configuration = {
    iceServers: [{urls: "stun:stun.1.google.com:19302"}]
  };
  const yours = new RTCPeerConnection(configuration);
  const theirs = new RTCPeerConnection(configuration);

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

  yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
  theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);

  const offer = await yours.createOffer();
  await yours.setLocalDescription(offer);
  await theirs.setRemoteDescription(offer);

  const answer = await theirs.createAnswer();
  await theirs.setLocalDescription(answer);
  await yours.setRemoteDescription(answer);
})();
相关问题
最新问题