WebRtc 远程流未在 Web 中呈现答案

【问题标题】：WebRtc remote stream is not rendering in webWebRtc 远程流未在 Web 中呈现
【发布时间】：2021-09-18 15:50:07
【问题描述】：

我正在尝试实现 webrtc 视频应用程序，其中只有呼叫者可以将他的视频发送给 cal-lee，反之亦然。我还设置了一个 websocket 服务器来交换 sdp。我在每个跟踪和日志中都取得了成功，但是如果我在 onstream 或 onTrack 上打印，远程视频不会出现，我可以看到流对象。请检查，任何铅都可以。感谢您的宝贵时间。

客户端html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Client</title>
</head>
<body>
  <video id="localVideo" autoplay muted playsinline></video>   
  <div>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
  </div>
  <script src="./clientConnection.js" ></script>
</body>
</html>

Clientjs（发送端）

// stream constraints, put at lower end for low bandwidth handling
var streamConstraint = {
  audio: false,
  video: {
      width: {
          ideal: 320
      },
      height: {
          ideal: 240
      },
      frameRate: {
          min: 1,
          max: 15
      }
  }
}

var iceServers = [
  // {
  //   urls: "stun:stun.services.mozilla.com",
  //   username: "louis@mozilla.com",
  //   credential: "webrtcdemo"
  // },
  {
    urls: [
      "stun:stun.l.google.com:19305",
      "stun:stun1.l.google.com:19305",
      "stun:stun2.l.google.com:19305",
      "stun:stun3.l.google.com:19305",
      "stun:stun4.l.google.com:19305",
    ]
  }
];

var configuration = {
  iceServers: iceServers,
}

var ws = new WebSocket("ws://127.0.0.1:5000");
console.log(ws);
ws.onopen = function () {
  console.log('ho gya connect');
  ws.send(JSON.stringify({
    type: 'join-room',
    paperId: 1234
  }));
}

ws.onmessage = function (data) {
  const message = JSON.parse(data.data);
  switch (message.type) {
    case 'video-answer': acceptOffer(message.sdp);
      break;
  }
  console.log('I received a message', data);
}

var startButton = document.getElementById('startButton');
var callButton = document.getElementById('callButton');
var hangupButton = document.getElementById('hangupButton');
callButton.disabled = true;
hangupButton.disabled = true;
startButton.onclick = start;
callButton.onclick = call;
hangupButton.onclick = hangup;

var startTime;
var localVideo = document.getElementById('localVideo');

localVideo.addEventListener('loadedmetadata', function() {
  trace('Local video videoWidth: ' + this.videoWidth +
    'px,  videoHeight: ' + this.videoHeight + 'px');
});

var localStream;
var connection;
var offerOptions = {
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
};

function getName(pc) {
  return (pc === pc1) ? 'pc1' : 'pc2';
}

function getOtherPc(pc) {
  return (pc === pc1) ? pc2 : pc1;
}

function gotStream(stream) {
  trace('Received local stream');
  localVideo.srcObject = stream;
  localStream = stream;
  callButton.disabled = false;
}

function start() {
  trace('Requesting local stream');
  startButton.disabled = true;
  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
  })
    .then(gotStream)
    .catch(function(e) {
      alert('getUserMedia() error: ' + e.name);
    });
}

function call() {
  callButton.disabled = true;
  hangupButton.disabled = false;
  trace('Starting call');
  startTime = window.performance.now();
  var videoTracks = localStream.getVideoTracks();
  var audioTracks = localStream.getAudioTracks();
  if (videoTracks.length > 0) {
    trace('Using video device: ' + videoTracks[0].label);
  }
  if (audioTracks.length > 0) {
    trace('Using audio device: ' + audioTracks[0].label);
  }
  var servers = null;
  connection = new RTCPeerConnection(configuration);
  trace('Created local peer connection object pc1');

  connection.onicecandidate = function(e) {
    onIceCandidate(e);
  };
  connection.oniceconnectionstatechange = onIceStateChange;
  

  localStream.getTracks().forEach(track => connection.addTrack(track, localStream));
  trace('Added local stream to pc1');

  trace('pc1 createOffer start');
  connection.createOffer(
    offerOptions
  ).then(
    onCreateOfferSuccess,
    onCreateSessionDescriptionError
  );
}

function onCreateSessionDescriptionError(error) {
  trace('Failed to create session description: ' + error.toString());
}

function onCreateOfferSuccess(desc) {
  console.log(desc);
  trace('Offer from pc1\n' + desc.sdp);
  trace('pc1 setLocalDescription start');
  connection.setLocalDescription(desc).then(
    function() {
      onSetLocalSuccess();
      ws.send(JSON.stringify({
        paperId: 1234,
        type: "video-offer",
        sdp: desc
      }));
    },
    onSetSessionDescriptionError
  );
}

function onSetLocalSuccess() {
  trace(connection + ' setLocalDescription complete');
}

function onSetRemoteSuccess() {
  trace(connection + ' setRemoteDescription complete');
}

function onSetSessionDescriptionError(error) {
  trace('Failed to set session description: ' + error.toString());
}

function acceptOffer(desc) {
  trace('pc1 setRemoteDescription start');
  connection.setRemoteDescription(desc).then(
    function() {
      onSetRemoteSuccess();
    },
    onSetSessionDescriptionError
  );
}

function onIceCandidate(event) {
  connection.addIceCandidate(event.candidate)
    .then(
      function() {
        onAddIceCandidateSuccess();
      },
      function(err) {
        onAddIceCandidateError(err);
      }
    );
  trace(connection + ' ICE candidate: \n' + (event.candidate ?
    event.candidate.candidate : '(null)'));
}

function onAddIceCandidateSuccess() {
  trace(connection + ' addIceCandidate success');
}

function onAddIceCandidateError(error) {
  trace(connection + ' failed to add ICE Candidate: ' + error.toString());
}

function onIceStateChange(event) {
  if (connection) {
    trace(connection + ' ICE state: ' + connection.iceConnectionState);
    console.log('ICE state change event: ', event);
  }
}

function hangup() {
  trace('Ending call');
  connection.close();
  connection = null;
  hangupButton.disabled = true;
  callButton.disabled = false;
}

// logging utility
function trace(arg) {
  var now = (window.performance.now() / 1000).toFixed(3);
  console.log(now + ': ', arg);
}

企业.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Corporate</title>
</head>
<body>
  <video id="remoteVideo" autoplay playsinline></video>
  <script src="./corporateConnection.js" ></script>
</body>
</html>

Corporate.js（接收端）

var iceServers = [
  // {
  //   urls: "stun:stun.services.mozilla.com",
  //   username: "louis@mozilla.com",
  //   credential: "webrtcdemo"
  // },
  {
    urls: [
      "stun:stun.l.google.com:19305",
      "stun:stun1.l.google.com:19305",
      "stun:stun2.l.google.com:19305",
      "stun:stun3.l.google.com:19305",
      "stun:stun4.l.google.com:19305",
    ]
  }
];

var configuration = {
  iceServers: iceServers,
}

var ws = new WebSocket("ws://127.0.0.1:5000");
console.log(ws);
ws.onopen = function () {
  console.log('ho gya connect');
  ws.send(JSON.stringify({
    type: 'join-room',
    paperId: 1234
  }));
}

ws.onmessage = function (data) {
  const message = JSON.parse(data.data);
  console.log(message);
  switch (message.type) {
    case 'video-offer': acceptRemoteOffer(message.sdp);
      break;
  }
  console.log(data);
}


var startTime;
var remoteVideo = document.getElementById('remoteVideo');

remoteVideo.addEventListener('loadedmetadata', function() {
  trace('Remote video videoWidth: ' + this.videoWidth +
    'px,  videoHeight: ' + this.videoHeight + 'px');
});

remoteVideo.onresize = function() {
  trace('Remote video size changed to ' +
    remoteVideo.videoWidth + 'x' + remoteVideo.videoHeight);
  // We'll use the first onsize callback as an indication that video has started
  // playing out.
  if (startTime) {
    var elapsedTime = window.performance.now() - startTime;
    trace('Setup time: ' + elapsedTime.toFixed(3) + 'ms');
    startTime = null;
  }
};

var localStream;
var connection;
var offerOptions = {
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
};

var servers = null;
connection = new RTCPeerConnection(configuration);
trace('Created remote peer connection object pc2');
connection.onicecandidate = function(e) {
    onIceCandidate(e);
};
connection.oniceconnectionstatechange = onIceStateChange;
connection.onaddstream = gotRemoteStream;
connection.ontrack = gotStreamTracks;

function acceptRemoteOffer(desc) {
  trace('pc2 setRemoteDescription start');
  connection.setRemoteDescription(desc).then(
    function() {
      onSetRemoteSuccess();
    },
    onSetSessionDescriptionError
  );
  trace('pc2 createAnswer start');
  connection.createAnswer().then(
    onCreateAnswerSuccess,
    onCreateSessionDescriptionError
  );
}

function onCreateSessionDescriptionError(error) {
  trace('Failed to create session description: ' + error.toString());
}

function onSetLocalSuccess() {
  trace(connection + ' setLocalDescription complete');
}

function onSetRemoteSuccess() {
  trace(connection + ' setRemoteDescription complete');
}

function onSetSessionDescriptionError(error) {
  trace('Failed to set session description: ' + error.toString());
}

function gotRemoteStream(e) {
  console.log(e);
  remoteVideo.srcObject = e.stream;
  trace('pc2 received remote stream');
}

function gotStreamTracks(e) {
  console.log("remote stream to yah bhi mil rhe h", e);
  console.log(remoteVideo);
  //remoteVideo.srcObject = e.streams[0];
  remoteVideo.src = window.URL.createObjectURL(e.streams[0]);
}

function onCreateAnswerSuccess(desc) {
  trace('Answer from pc2:\n' + desc.sdp);
  trace('pc2 setLocalDescription start');
  connection.setLocalDescription(desc).then(
    function() {
      onSetLocalSuccess();
      ws.send(JSON.stringify({
        paperId: 1234,
        type: "video-answer",
        sdp: desc
      }));
    },
    onSetSessionDescriptionError
  );
}

function onIceCandidate(event) {
  connection.addIceCandidate(event.candidate)
    .then(
      function() {
        onAddIceCandidateSuccess();
      },
      function(err) {
        onAddIceCandidateError(err);
      }
    );
  trace(connection + ' ICE candidate: \n' + (event.candidate ?
    event.candidate.candidate : '(null)'));
}

function onAddIceCandidateSuccess() {
  trace(connection + ' addIceCandidate success');
}

function onAddIceCandidateError(error) {
  trace(connection + ' failed to add ICE Candidate: ' + error.toString());
}

function onIceStateChange(event) {
  if (connection) {
    trace(connection + ' ICE state: ' + connection.iceConnectionState);
    console.log('ICE state change event: ', event);
  }
}

function hangup() {
  trace('Ending call');
  connection.close();
  connection = null;
  hangupButton.disabled = true;
  callButton.disabled = false;
}

// logging utility
function trace(arg) {
  var now = (window.performance.now() / 1000).toFixed(3);
  console.log(now + ': ', arg);
}

【问题讨论】：

标签： javascript node.js websocket webrtc

【解决方案1】：

您不能将流作为媒体源传递给视频元素。这条线是行不通的：

remoteVideo.src = window.URL.createObjectURL(e.streams[0])

因为e.streams[0] 不是 MSE。在您的代码中删除它。

【讨论】：