Javascript 视频流未通过我的RTPeerConnection发送_Javascript_Webrtc_Mediastream_Rtcpeerconnection

Javascript 视频流未通过我的RTPeerConnection发送

javascript webrtc

Javascript 视频流未通过我的RTPeerConnection发送,javascript,webrtc,mediastream,rtcpeerconnection,Javascript,Webrtc,Mediastream,Rtcpeerconnection,因此，我提出了这个小测试代码来模拟我所拥有的真实版本的情况。在其中，我在同一个文件中设置了2个对等连接，每个连接在html上都有一个专用的视频元素。问题是，当我开始共享屏幕时，流没有显示在另一个对等端（peer2），这与我在真实版本的代码中遇到的问题相同下面是js代码 'use strict'; const video1 = document.getElementById('video1'); const video2 = document.getElementById

因此，我提出了这个小测试代码来模拟我所拥有的真实版本的情况。在其中，我在同一个文件中设置了2个对等连接，每个连接在html上都有一个专用的视频元素。问题是，当我开始共享屏幕时，流没有显示在另一个对等端（

peer2

），这与我在真实版本的代码中遇到的问题相同

下面是js代码

'use strict';    
    const video1 = document.getElementById('video1');
    const video2 = document.getElementById('video2');
    let peer1 = new RTCPeerConnection();
    let peer2 = new RTCPeerConnection();

peer1.onicecandidate = ev => {
  console.log('peer1 oncandidate event');
  if (ev.candidate) {
    const c = new RTCIceCandidate(ev.candidate);
    peer2.addIceCandidate(c);
  }
};

peer2.onicecandidate = ev => {
  console.log('peer2 oncandidate event');
  if (ev.candidate) {
    const c = new RTCIceCandidate(ev.candidate);
    peer1.addIceCandidate(c);
  }
};

peer2.onaddtrack = ev => addStreamSource;

function startVideoStream() {
  const videoOptions = {
    video: true,
    audio: true
  };

  navigator.mediaDevices.getDisplayMedia(videoOptions)
    .then(gotLocalMediaStream)
    .catch(logError);
}

function gotLocalMediaStream(stream) {
  console.log('setting the stream');
  console.log(stream.getTracks());
  peer1.addTrack(stream.getTracks()[0]);
  video1.srcObject = stream;
  peer1.createOffer()
    .then(desc => {
      peer1.setLocalDescription(desc);
      peer2.setRemoteDescription(desc);
      peer2.createAnswer()
        .then(des => {
          peer2.setLocalDescription(des);
          peer1.setRemoteDescription(des);
        })
        .catch(logError);
    })
    .catch(logError);
}

function addStreamSource(event) {
  console.log('ADDING STREAM SOURCE:');
  video2.srcObject = event.streams[0];
}

function logError(e) {
  console.error(`Bad thing: ${e}`);
}

function logSuccess() {
  console.log('Promise Success!');
}

index.html

<html>

<head>
  <title>Pretty cinema</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h1 style="text-align:center;" id="text">
    Pretty video streaming service
  </h1>
  <br />
  <div id="vids">
    <video id="video1" autoplay controls>
      <source type='video/mp4' ; codecs="H.264" />
    </video>
    <video id="video2" autoplay controls>
      <source type='video/mp4' ; codecs="H.264" />
    </video>
  </div>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="./checking_peers.js"></script>
  <div>
    <div class="buttonsDiv">
      <button onclick="startVideoStream()" type="button">Share</button>
    </div>
  </div>
</body>

</html>


美丽电影院
漂亮的视频流服务


分享

重要提示：已找到解决方案

简单解释：我需要根据peer2上接收到的曲目创建一个媒体流

peer2.ontrack = event => {
  const video = new MediaStream([event.track]);
  video2.srcObject = video;
};

更多详细信息：当两个对等方连接时（他们交换了提供答案和ICE候选项），如果您在一端（peer1）添加了一个曲目，另一端（peer2）将接收一个事件，其中包含该曲目，如果您覆盖了peer2的方法

ontrack

。您可以通过

事件访问曲目。曲目

。通过调用

new MediaStream（）

并向其传递一个包含所有要基于流的曲目的数组，可以从该曲目创建一个

MediaStream

对象。新创建的流可以作为视频元素的源，使用

videoElement.srcObject=theMediaStream分配它
另外：我设置ICECandidate响应的方式有问题，因此仔细查看代码，这里写得正确，可能是您也有同样的问题。
或者，peer1.addTrack（stream.getTracks（）[0]，stream）
，您现有的代码也可以工作。