RTCPeerConnection黑色流

Question

我正在尝试使用webRTC开发应用程序。在这种情况下，我将视频发送到RTCPeerConnection并在正确的视频中播放。

RTCPeerConnection的连接工作正常，我收到了流，但是播放时它是黑色的。如果不是发送视频，而是使用“ getUserMedia（）”发送摄像机，则流很好。我已经尝试过https://webrtc.github.io/samples/src/content/capture/video-pc/的示例，并且在此页面中它可以工作，但是当我克隆存储库并使用它时，我也遇到了同样的问题。

我的JS代码如下：

'use strict';

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

//Get & show the stream.
const leftVideo = document.getElementById('streamVideo');
const rightVideo = document.getElementById('showVideo');

let stream
let localStream;
let pc1;
let pc2;

const iceCandidates = [];
const offerOptions = {
  OfferToReceiveAudio: 1,
  OfferToReceiveVideo: 1
};

startButton.addEventListener('click', start);


async function start() {
  console.log('Requesting local stream');

  leftVideo.play();
  startButton.disabled = true;

  try {
    if (leftVideo.captureStream) {
      stream = await leftVideo.captureStream();
    } else if (leftVideo.mozCaptureStream) {
      stream = await leftVideo.mozCaptureStream();
    }
  } catch (e) {
    console.log(`getUserMedia() error: ${e.name}`);
  }

  /* Stream camera video&audio */
  //const stream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
  //leftVideo.srcObject = stream;
  //
  localStream = stream;

  var configuration = {
    "iceServers": [{ "urls": "stun:stun.1.google.com:19302" }]
  };
  pc1 = new RTCPeerConnection(configuration);
  pc2 = new RTCPeerConnection(configuration);
  console.log("Created RTCPeerConnections");

  pc1.addEventListener('icecandidate', e => onIceCandidate(pc1, e));
  pc2.addEventListener('icecandidate', e => onIceCandidate(pc2, e));
  console.log("Added candidates handlers created.")

  pc2.ontrack = gotRemoteStream;
  console.log("Received stream handler created");

  pc2.oniceconnectionstatechange = () => console.log('PC2 ice state ' + pc2.iceConnectionState);

  console.log("localStream: " + localStream);

  console.log(`Streamed tracks added ${localStream.getTracks()[0].label}`);
  localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));

  try{
    const offer = await pc1.createOffer(offerOptions);
    //console.log(`Offer from pc1\n${offer.sdp}`);
    //console.log("Pc1 offer created.");
    try {
      await pc1.setLocalDescription(offer);
      console.log("Pc1 description created.")
    } catch(error) {
      console.log(`Failed to set session description: ${error.toString()}`);
    }
    setPc2Connection(offer);
  } catch(error) {
    console.log(`Failed to create session description: ${error.toString()}`);
  }
}


async function setPc2Connection(desc) {
  try {
    await pc2.setRemoteDescription(desc);
    //console.log(`Description set\n${desc.sdp}`);
    console.log("Pc2 description set.");
  } catch (error) {
    console.log(`Failed to set session description: ${error.toString()}`);
  }

  try {
    const answer = await pc2.createAnswer();

    try {
      await pc2.setLocalDescription(answer);
      //console.log(`Pc2 description created\n${answer.sdp}`)
      console.log("Pc2 description created.");
    } catch (error) {
      console.log(`Failed to set session description: ${error.toString()}`);
    }

    try {
      await pc1.setRemoteDescription(answer);
      console.log("Session Pc1 complete.")
    } catch (error) {
      console.log(`Failed to set session description: ${error.toString()}`);
    }
  } catch (error) {
    console.log(`Failed to create session description: ${error.toString()}`);
  }
}


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


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


async function onIceCandidate(pc, e) {
  // Save a list of ice candidates to send to the peer
  try{
    if (e.candidate !== null) {
      console.log(`${getName(pc)} new ${event.candidate.candidate}`);
      await getOtherPc(pc).addIceCandidate(e.candidate);

      iceCandidates.push(e.candidate);
    }

    var strList = "";
    iceCandidates.forEach(function(element) {
      strList = strList + element.candidate + '\n';
    });

    console.log('Candidates list:\n' + strList);
  } catch (error) {
    console.log(`${pc} failed to add ICE Candidate: ${error.toString()}`);
  }
}


function gotRemoteStream(e) {
  console.log(e.streams[0]);
  if (rightVideo.srcObject !== e.streams[0]) {
    rightVideo.srcObject = e.streams[0];
    console.log('pc2 received remote stream');
  }
}

我的Index.html是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Share div WebRTC</title>
  </head>
  <body>

    <div id="container">
      <video width="650" height="480" id="streamVideo" playsinline controls>
        <source src="../videos/FollowRoad Video.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <!--Stream Camera&Audio <video width="650" height="480" id="streamVideo" playsinline autoplay></video>-->
      <video width="650" height="480" id="showVideo" playsinline autoplay></video>
    </div>

    <div class="box">
       <button id="startButton">Start</button>
   </div>

    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="main.js" async></script>
  </body>
</html>

css样式是：

#startButton {
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none;
  background: purple;
  padding: 20px;
  border-radius: 50px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
  float: left;
}

#video {
  border: 1px solid #999;
  width: 98%;
  max-width: 860px;
}

#leftBox {
  width: 650px;
  height: 640px;
  border: 15px solid lightblue;
  padding: 50px;
  margin: 20px;
  float: left;
}

#rightBox {
  width: 650px;
  height: 640px;
  border: 15px solid pink;
  padding: 50px;
  margin: 20px;
  float: right;
}

我已将代码上传到GitHub，以轻松克隆代码https://github.com/pmvera/webrtc/tree/master/peerconnection_stream。

如何播放流而不是黑色？

谢谢大家！