Javascript 远程视频元素在webrtc中不显示任何内容

我是WebRTC新手，我想通过node.js上的web套接字设置视频调用，我无法显示远程视频屏幕，但本地视频元素工作正常

可能是我错过了我无法理解的流程

我在这里发布我的html代码和java脚本

HTML代码

  <!---display sharing screen--->
<div id="video_container" style="display:none;">
This Streams Remote Video
  <video  controls autoplay id="remotevideo"></video><br>
This Streams Local Video
  <video controls autoplay id="local_video"></video>

</div>

---

你的代码太长了，没有人会花时间来修复它。请尽量简明扼要，写下您已经尝试过的内容以及确切的问题。这样，其他用户可以更容易地帮助您。您在控制台中是否遇到任何错误？另外，这段代码是来自书籍、在线教程还是存储库？Thanks@AdrianBer，我删除了不必要的代码，是的@jason我从rob manson的《开始使用webrtc》一书中写的，我在console中没有遇到问题，我的问题是远程对等视频没有在第一个对等的远程视频元素中传输。我会找到一些其他WebRTC示例代码，看看是否会发生同样的情况。感谢@Jason帮助我！！

var webrtc_capable = true;
var rtc_peer_connection = null;
var rtc_session_description = null;
var get_user_media = null;
var connect_stream_to_src = null;
var stun_server = "stun.l.google.com:19302";

if (navigator.getUserMedia) { // WebRTC 1.0 standard compliant browser
  rtc_peer_connection = RTCPeerConnection;
  rtc_session_description = RTCSessionDescription;
  get_user_media = navigator.getUserMedia.bind(navigator);
  connect_stream_to_src = function(media_stream, media_element) {
  media_element.srcObject = media_stream;
  media_element.play();
  };
} else if (navigator.mozGetUserMedia) { // early firefox webrtc implementation
  rtc_peer_connection = mozRTCPeerConnection;
  rtc_session_description = mozRTCSessionDescription;
  get_user_media = navigator.mozGetUserMedia.bind(navigator);
  connect_stream_to_src = function(media_stream, media_element) {
    media_element.mozSrcObject = media_stream;
    media_element.play();
  };
  stun_server = "74.125.31.127:19302";
} else if (navigator.webkitGetUserMedia) { // early webkit webrtc implementation
  rtc_peer_connection = webkitRTCPeerConnection;
  rtc_session_description = RTCSessionDescription;
  get_user_media = navigator.webkitGetUserMedia.bind(navigator);
  connect_stream_to_src = function(media_stream, media_element) {
    media_element.src = URL.createObjectURL(media_stream);
  };
} else {
  alert("This browser does not support WebRTC - visit WebRTC.org for more info");
  webrtc_capable = false;
}
</script>

<!---Javascript for splitting screen--->
<script>
function splitScreen()
{
  var z;
  document.getElementById("chat").style.display="block";
  z=document.getElementById("video_container");
  z.className="videoContainer";
  z.style.display="block";
}

 var call_token; // unique token for this call
 var signaling_server; // signaling server for this call
 var local_peer_connection;
 //function to establish webrtc connection
function start(){

    peer_connection=new rtc_peer_connection({ // RTCPeerConnection configuration 
    "iceServers": [ // information about ice servers
      { "url": "stun:"+stun_server }, // stun server info
    ]
  });
  setup_video();
    peer_connection.onicecandidate== function (ice_event) {
    if (ice_event.candidate) {
      signaling_server.send(
        JSON.stringify({
          token:call_token,
          type: "new_ice_candidate",
          candidate: ice_event.candidate ,
        })
      );
    }
  };
   peer_connection.onaddstream=function(event){
       //alert("remote video is getting called!!");
       connect_stream_to_src(event.stream,document.getElementById("remotevideo"));
   };

   signaling_server = new WebSocket("ws://localhost:3455");

   if (document.location.hash === "" || document.location.hash === undefined) { // you are the Caller

    // create the unique token for this call 
    var token = Date.now()+"-"+Math.round(Math.random()*10000);
    call_token = "#"+token;

    // set location.hash to the unique token for this call
    document.location.hash = token;

    signaling_server.onopen = function() {
      // setup caller signal handler
      signaling_server.onmessage = caller_signal_handler;

      // tell the signaling server you have joined the call 
      signaling_server.send(
        JSON.stringify({ 
          token:call_token,
          type:"join",
        })
      );
    }

    document.title = "You are the Caller";
    //document.getElementById("loading_state").innerHTML = "Ready for a call...ask your friend to visit:<br/><br/>"+document.location;

  } else { // you have a hash fragment so you must be the Callee 

    // get the unique token for this call from location.hash
    call_token = document.location.hash;

    signaling_server.onopen = function() {
      // setup caller signal handler
      signaling_server.onmessage = callee_signal_handler;

      // tell the signaling server you have joined the call 
      signaling_server.send(
        JSON.stringify({ 
          token:call_token,
          type:"join",
        })
      );

      // let the caller know you have arrived so they can start the call
      signaling_server.send(
        JSON.stringify({ 
          token:call_token,
          type:"callee_arrived",
        })
      );
    }

    document.title = "You are the Callee";
   // document.getElementById("loading_state").innerHTML = "One moment please...connecting your call...";
  }

  // setup message bar handlers
  document.getElementById("message_input").onkeydown = send_chat_message;
  document.getElementById("message_input").onfocus = function() { this.value = ""; }
}

/* functions used above are defined below */

// handler to process new descriptions
function new_description_created(description) {
  peer_connection.setLocalDescription(
    description, 
    function () {
         //  connect_stream_to_src(event.stream,document.getElementById("remotevideo"));
      signaling_server.send(
        JSON.stringify({
          token:call_token,
          type:"new_description",
          sdp:description 
        })
      );
    }, 
    log_error
  );
}

// handle signals as a caller
function caller_signal_handler(event) {
  var signal = JSON.parse(event.data);
  if (signal.type === "callee_arrived") {
    peer_connection.createOffer(
      new_description_created, 
      log_error
    );
  } else if (signal.type === "new_ice_candidate") {
    peer_connection.addIceCandidate(
      new RTCIceCandidate(signal.candidate)
    );
  } else if (signal.type === "new_description") {
    peer_connection.setRemoteDescription(
      new rtc_session_description(signal.sdp), 
      function () {
         peer_connection.addStream(remotevideo);
          connect_stream_to_src(event.stream, document.getElementById("remotevideo"));
        if (peer_connection.remoteDescription.type == "answer") {
          // extend with your own custom answer handling here
          //connect_stream_to_src(remotevideo, document.getElementById("remotevideo"));
        }
      },
      log_error
    );
  } else if (signal.type === "new_chat_message") {
    add_chat_message(signal);
  } else {
    // extend with your own signal types here
  }
}

// handle signals as a callee
function callee_signal_handler(event) {
  var signal = JSON.parse(event.data);
  if (signal.type === "new_ice_candidate") {
    peer_connection.addIceCandidate(
      new RTCIceCandidate(signal.candidate)
    );
  } else if (signal.type === "new_description") {
    peer_connection.setRemoteDescription(
      new rtc_session_description(signal.sdp), 
      function () {

        if (peer_connection.remoteDescription.type == "offer") {
          peer_connection.createAnswer(new_description_created, log_error);
          connect_stream_to_src(event.stream, document.getElementById("remotevideo"));
        }
      },
      log_error
    );
  } else if (signal.type === "new_chat_message") {
    add_chat_message(signal);
  }
}

// add new chat message to messages list
function add_chat_message(signal) {
  var messages = document.getElementById("messages");
  var user = signal.user || "them"; 
  messages.innerHTML = user+": "+signal.message+"<br/>\n"+messages.innerHTML;
}

// send new chat message to the other browser
function send_chat_message(e) {
  if (e.keyCode == 13) 
  {
    var new_message = this.value;
    this.value = ""; 
    signaling_server.send(
      JSON.stringify(
      {
        token:call_token,
        type: "new_chat_message",
        message: new_message 
      })
    );
    add_chat_message({ user: "you", message: new_message }); 
  }
}

function setup_video()
{//alert("In setup_video function");
   get_user_media({
      "audio":true,
      "video":true
   },
   function (local_stream) { // success callback
      // display preview from the local camera & microphone using local <video> MediaElement
      connect_stream_to_src(local_stream, document.getElementById("local_video"));
      // add local camera stream to peer_connection ready to be sent to the remote peer
      peer_connection.addStream(local_stream);
    },
    log_error
  );
}


// generic error handler
function log_error(error) {
  console.log(error);
}

// useful libs
var http = require("http");
var fs=require("fs");
var websocket = require("websocket").server;

// general variables
var port = 3455;
var webrtc_clients = [];
var webrtc_discussions = {};

// web server functions
var http_server = http.createServer(function(request, response) {
  var matches = undefined;
  if (matches = request.url.match("^/images/(.*)")) {
    var path = process.cwd()+"/images/"+matches[1];
    fs.readFile(path, function(error, data) {
      if (error) {
        log_error(error);
      } else {
        response.end(data);
      }
    });
  } else {
    response.end(page);
  }
});
http_server.listen(port, function() {
  log_comment("server listening (port "+port+")");
});
var page = undefined;
fs.readFile("htmlfilename",function(error,data){
  if(error){
    log_comment(error);
  }
  else{
     page=data;
  }
});
// web socket functions
var websocket_server = new websocket({
  httpServer: http_server
});
websocket_server.on("request", function(request) {
  log_comment("new request ("+request.origin+")");

  var connection = request.accept(null, request.origin);
  log_comment("new connection ("+connection.remoteAddress+")");

  webrtc_clients.push(connection);
  connection.id = webrtc_clients.length-1;

  connection.on("message", function(message) {
    if (message.type === "utf8") {
      log_comment("got message "+message.utf8Data);

      var signal = undefined;
      try { signal = JSON.parse(message.utf8Data); } catch(e) { };
      if (signal) {
        if (signal.type === "join" && signal.token !== undefined) {
          try {
            if (webrtc_discussions[signal.token] === undefined) {
              webrtc_discussions[signal.token] = {};
            }
          } catch(e) { };
          try {
            webrtc_discussions[signal.token][connection.id] = true;
          } catch(e) { };
        } else if (signal.token !== undefined) {
          try {
            Object.keys(webrtc_discussions[signal.token]).forEach(function(id) {
              if (id != connection.id) {
                webrtc_clients[id].send(message.utf8Data, log_error);
              }
            });
          } catch(e) { };
        } else {
          log_comment("invalid signal: "+message.utf8Data);
        }
      } else {
        log_comment("invalid signal: "+message.utf8Data);
      }
    }
  });

  connection.on("close", function(connection) {
    log_comment("connection closed ("+connection.remoteAddress+")");    
    Object.keys(webrtc_discussions).forEach(function(token) {
      Object.keys(webrtc_discussions[token]).forEach(function(id) {
        if (id === connection.id) {
          delete webrtc_discussions[token][id];
        }
      });
    });
  });
});

// utility functions
function log_error(error) {
  if (error !== "Connection closed" && error !== undefined) {
    log_comment("ERROR: "+error);
  }
}
function log_comment(comment) {
  console.log((new Date())+" "+comment);
}