如何使我的WebRTC正常工作_Webrtc

如何使我的WebRTC正常工作

webrtc

如何使我的WebRTC正常工作,webrtc,Webrtc,现在我正在用WebRTC建立一个视频通话网站。但它识别摄像机并要求允许摄像机。当我允许摄像机拍摄时，它什么也不显示。我将在这里写下我的代码 <body onload="init()"> <div class="row"> <div class="col-8"> <form action="#"> <h5>Current Room ID: <span id="curr_

现在我正在用WebRTC建立一个视频通话网站。但它识别摄像机并要求允许摄像机。当我允许摄像机拍摄时，它什么也不显示。我将在这里写下我的代码

  <body onload="init()">
    <div class="row">
      <div class="col-8">
        <form action="#">
          <h5>Current Room ID: <span id="curr_room_id"></span><br/></h5>
          <input id="new_room_id" name="room" type="text" placeholder="Enter a room id to connect..." style="padding: 5px"/>
          <input type="submit" id="connect" value="Connect" />
        </form>
        <input id="call" type="submit" value="Call" disabled="true"/>
        <input id="end" type="submit" value="End Call"disabled="true"/>
      </div>
      <div class="col-4" id="google_translate_element"></div>
    </div>

    <h1>local</h1>
    <video id="local_video" width="400px" style="border: 1px solid black;"></video>
    <h1>remote</h1>
    <video id="remote_video" width="400px" style="border: 1px solid black;"></video>
    <script src="/socket.io/socket.io.js"></script>
    <script src="../scripts/video-client.js"></script>
    <script src="../scripts/video-room.js"></script>
    <script>
      function init() {
        console.log("document loaded");
        call.removeAttribute("disabled");
        call.addEventListener("click", function(){
          createPeerConnection();
          call.setAttribute("disabled", true);
          end.removeAttribute("disabled");
        });
        end.addEventListener("click", function() {
          // change rooms
          end.setAttribute("disabled", true);
          call.removeAttribute("disabled");
        });
      }
    </script>
  </body>

我认为call.onclick（）必须对视频流正常工作，但它也不能正常工作。

您没有看到视频，因为您没有使用

getUserMedia

返回的流。您需要将

stream

附加到视频中。

原因很多：在设置之前使用

localStream

，无需继续协商，以及至少提到3个其他问题。谢谢您，jib。你能告诉我你提到的另外三个问题吗？#2、#5和#6。我还强烈建议在处理回调时使用RTPeerConnection API版本，因为API本质上是异步的，否则很容易导致错误（例如，您的

localStream

问题）。

console.log("loaded");
var socket = io();
var local = document.getElementById("local_video");
var remote = document.getElementById("remote_video");
var call = document.getElementById("call");
var end = document.getElementById("end");
var room_id = document.getElementById("curr_room_id");

var localStream = null, remoteStream = null;
var config = {'iceServers' : [{'url' : 'stun:stun.l.google.com:19302'}]};

var pc;
/////////////////////////////////
function createPeerConnection() {
  try {
    pc = new RTCPeerConnection(config);
    pc.onicecandidate = handleIceCandidate;
    pc.onaddstream = handleRemoteStreamAdded;
    pc.onremovestream = handleRemoteStreamRemoved;
    pc.onnegotiationneeded = handleNegotiationNeeded;
    getUserMedia(displayLocalVideo);
    pc.addStream(localStream);
    console.log("Created RTCPeerConnection");
  } catch (e) {
    console.log("Failed to create PeerConnection: " + e.message);
    return;
  }
}

function handleIceCandidate(event) {
  console.log("handleIceCandidate event: " + event);
  if(event.candidate) {
    sendMessage(JSON.stringify({'candidate': evt.candidate}));
  } else {
    consolel.log("End of ice candidates");
  }
}

function handleRemoteStreamAdded(event) {
  console.log("Remote stream added");
  displayRemoteVideo(event.stream);
  call.setAttribute("disabled", true);
  end.removeAttribute("disabled");
}

function handleRemoteStreamRemoved(event) {
  console.log("Remote stream removed: " + event);
  end.setAttribute("disabled", true);
  call.removeAttribute("disabled");
  local.src = "";
  remote.src = "";
}

function handleNegotiationNeeded() {
  pc.createOffer(localDescCreated, logError);
}

function localDescCreated(desc) {
  pc.setLocalDescription(desc, function() {
    sendMessage(JSON.stringify({'sdp': pc.localDescription}));
  }, logError);
}

call.onclick(function(){
  createPeerConnection();
});

/////////////////////////////////
function getUserMedia(callback) {
  navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(
    function(stream) {
      callback(stream);
      return stream;
    }).catch(logError);
}

function displayLocalVideo(stream) {
  localStream = stream;
  local.src = window.URL.createObjectURL(stream);
  local.play();
}

function displayRemoteVideo(stream) {
  remoteStream = stream;
  remote.src = window.URL.createObjectURL(stream);
  remote.play();
}

function logError(error) {
  console.log(error);
}

function sendMessage(message) {
  socket.emit("message", message);
}

/////// receiving stream //////////
socket.on("message", function(evt){
  if(!pc)
    createPeerConnection();
  var message = JSON.parse(evt.data);
  if(message.sdp) {
    pc.setRemoteDescription(new RTCSessionDescription(), function() {
      if(pc.remoteDescription.type == 'offer')
        pc.createAnswer(localDescCreated, logError);
    }, logError);
  } else {
    pc.addIceCandidate(new RTCIceCandidate(message.candidate));
  }
});