webrtc - 如何让我的 WebRTC 正常工作

问题描述

现在我正在使用 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>

我认为这是因为没有向 webview 显示视频流。但我什么也没找到。请告诉我。这是 video-client.js

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

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

标签： webrtc

webrtc - 如何让我的 WebRTC 正常工作

问题描述

解决方案

推荐阅读