WebRTC本地插入多个转发节点
网络延迟是一种比较常见的情况。在本地网页上,我们可以建立多个RTCPeerConnection,增加转发次数,来模拟出网络延迟的效果。
建立通话后,再往后面增加本地转发节点。
准备
页面准备,方便我们后面调试
<div id="container">
<h1><a href="https://域名/webrtc/peerconnection/upgrade-to-video" title="">WebRTC插入多个转发节点</a></h1>
<div id="videos">
<video id="video1" playsinline autoplay muted></video>
<video id="video2" playsinline autoplay></video>
</div>
<section><input type="checkbox" id="audio"><label for="audio">包含音频(>= Chrome 49)</label></section>
<div id="buttons">
<button id="start">开始</button>
<button id="call" disabled>呼叫</button>
<button id="insertRelay" disabled>插入转发</button>
<button id="hangup" disabled>挂断</button>
</div>
<div id="status"></div>
</div>
<script src="../../src/js/adapter-域名"></script>
<script src="js/域名"></script>
<script src="js/域名"></script>
放上2个video和几个button。引入WebRTC adapter和控制脚本。
如果要使用官方的适配器adapter,按下边的地址来引入
<!-- <script src="../../src/js/adapter-域名"></script> -->
<script src="https://域名/adapter/adapter-域名"></script>
控制
分为域名
和域名
。
域名
包含新建节点的逻辑。域名
控制主流程。
域名
这里能新建2个RTCPeerConnection,建立新的连接。
function doNothing() { }
function errFunc(context) {
return function (error) {
trace(\'报错 \' + context + \': \' + 域名ring);
};
}
// 新建2个节点并建立连接
function Connection2(stream, handler) {
let servers = null;
let pc1 = new RTCPeerConnection(servers);
let pc2 = new RTCPeerConnection(servers);
域名tream(stream);
域名ecandidate = function (event) {
if (域名idate) {
域名ceCandidate(new RTCIceCandidate(域名idate),
doNothing, errFunc(\'AddIceCandidate\'));
}
};
域名ecandidate = function (event) {
if (域名idate) {
域名ceCandidate(new RTCIceCandidate(域名idate),
doNothing, errFunc(\'AddIceCandidate\'));
}
};
域名dstream = function (e) {
handler(域名am);
};
域名teOffer(function (desc) {
域名ocalDescription(desc);
域名emoteDescription(desc);
域名teAnswer(function (desc2) {
域名ocalDescription(desc2);
域名emoteDescription(desc2);
}, errFunc(\'域名teAnswer\'));
}, errFunc(\'域名teOffer\'));
域名 = pc1;
域名 = pc2;
}
域名e = function () {
域名e();
域名e();
};
Connection2(stream, handler)
新建pc1和pc2,将传入的stream
作为数据源交给pc1。
随后在pc1和pc2之间建立连接。pc2接到数据流后再交回给handler
。
域名
先拿到ui
\'use strict\';
// 获取ui
const video1 = 域名ySelector(\'video#video1\');
const video2 = 域名ySelector(\'video#video2\');
const statusDiv = 域名ySelector(\'div#status\');
const audioCheckbox = 域名ySelector(\'input#audio\');
const startBtn = 域名ySelector(\'button#start\');
const callBtn = 域名ySelector(\'button#call\');
const insertRelayBtn = 域名ySelector(\'button#insertRelay\');
const hangupBtn = 域名ySelector(\'button#hangup\');
记录一些变量
const connectionList = []; // 连接点
let localStream;
let remoteStream;
启动,获取数据流。可以选择是否带音频流。拿到数据流后,交给video1
显示,并且记录为localStream
function gotStream(stream) {
域名bject = stream;
localStream = stream;
域名bled = false;
}
function start() {
域名bled = true;
const options = 域名ked ? { audio: true, video: true } : { audio: false, video: true };
域名serMedia(options)
.then(gotStream)
.catch(function (e) {
alert(`获取媒体失败 ${e}`);
});
}
发起呼叫
function gotremoteStream(stream) {
remoteStream = stream;
域名bject = stream;
域名(\'接收到了传输后的数据流\');
域名Content = `当前节点数: ${域名th * 2}`;
域名bled = false;
}
function call() {
域名bled = true;
域名bled = false;
域名bled = false;
域名(\'呼叫!\');
域名(new Connection2(localStream, gotremoteStream));
}
呼叫的方法是call()
,使用Connection2来建立第一级连接。
连接的记录存放在connectionList
。
插入转发和call有点类似,都使用了Connection2。但是输入的是remoteStream
。
function insertRelay() {
域名(new Connection2(remoteStream, gotremoteStream));
域名bled = true;
}
多次调用insertRelay()
,可以模拟出多层转发的情况。转发次数多了,视频延迟得也就越明显。
挂断/结束方法hangup()
function hangup() {
域名(\'挂断\');
while (域名th > 0) {
const pipe = 域名();
域名e();
}
域名bled = true;
域名bled = true;
域名bled = false;
}
将connectionList
里面的连接全部拿出来结束掉。
如果数量比较多,结束耗时也会比较长。
效果预览
效果预览请参考WebRTC插入多个转发节点
可以尝试多点击几次插入转发按钮。观察视频的延迟情况。
小结
本地网页可以通过增加节点的办法,模拟出视频传输延迟的效果。Connection2(stream, handler)
里的代码写的非常简洁,也利于了解WebRTC传输建立的过程。
从这个例子我们也可以看出,实际工程中要尽量减少中间节点。并且要优先选择质量高的节点。
本文链接