Question

以下是获取流并将其发送到同一台计算机的代码。

我正在获取一个流，使用视频标记显示该流，然后尝试发送该流并在同一页面中显示另一个视频标记。

我有什么东西在这里失踪吗？或者我的概念完全错了吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<video autoplay width="1280" height="720"></video>
<br />

<video id="rec" autoplay width="1280" height="720"></video>

<script>




var peerConnection1 = new webkitRTCPeerConnection(null);
var peerConnection2 = new webkitRTCPeerConnection(null);


var p1desc,p2desc
peerConnection1.createOffer(success1,function(e){},{'offerToReceiveAudio':true,'offerToReceiveVideo':true});

function success1(desc)
{
    peerConnection1.setLocalDescription(desc);
    p2srd(desc);
}

function p2srd(desc)
{
    peerConnection2.setRemoteDescription(desc);
    peerConnection2.createAnswer(success2);
}

function success2(desc)
{
    peerConnection2.setLocalDescription(desc);
    p1srd(desc);
}

function p1srd(desc)
{
    peerConnection1.setRemoteDescription(desc);
    begin();
}

function begin()
{
    var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function(mediaStream) {

  peerConnection1.addStream(mediaStream);   
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(mediaStream);


  video.onloadedmetadata = function(e) {

  };
});
p.catch(function(err) { console.log(err.name); });

    peerConnection2.onaddstream = function (e){
            var vidr = document.getElementById('rec');

  vidr.src = window.URL.createObjectURL(e.stream);
        };
}

Answer 1

你错过了ICE候选人。试试这个（将此https fiddle用于Chrome）：

＆＃13;

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

var start = () => navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(log);

var add = (pc, can) => can && pc.addIceCandidate(can).catch(log);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);

pc2.onaddstream = e => video2.srcObject = e.stream;
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

＆＃13;

<video id="video1" height="120" width="160" autoplay muted></video>
<video id="video2" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

＆＃13;

流式传输到同一台电脑 - webRTC

1 个答案: