流式傳輸到同一臺電腦 - webRTC

以下是我獲取流並將其發送到同一臺計算機的代碼。流式傳輸到同一臺電腦 - webRTC

我得到一個流，使用視頻標記顯示它，然後試圖發送流並在同一頁面中顯示另一個視頻標記。

有什麼我在這裏失蹤？或者我有完全錯誤的概念嗎？

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

來源

2016-03-07 Harish Sp

你錯過了ICE的候選人。試試這個（使用這種https fiddle爲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>

來源

2016-03-07 19:16:09 jib

流式傳輸到同一臺電腦 - webRTC

回答

相關問題