Streaming to the same pc - webRTC

2019-07-27 10:05发布

站内问答 / 后端开发
1235 1 4

The following is my code for getting a stream and sending it to the same machine.

I'm getting a stream, displaying it using a video tag and then trying to send the stream over and display it another video tag in the same page.

Is there something I'm missing here? or Have I got the concept completely wrong?

<!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);
        };
}

标签： webrtc
举报
1条回答
倾城　Initia
2楼-- · 2019-07-27 10:18

You're missing ICE candidates. Try this (use this https fiddle for Chrome):

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;
<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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)