流式传输到同一台电脑 - webRTC [英] Streaming to the same pc - webRTC
本文介绍了流式传输到同一台电脑 - webRTC的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我获取流并将其发送到同一台机器的代码.
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);
};
}
推荐答案
您缺少 ICE 候选人.试试这个(对 Chrome 使用这个 https fiddle):
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>这篇关于流式传输到同一台电脑 - webRTC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
