WebRTC流在第一帧之后冻结
WebRTC streams freeze after first frame
交易如下,我有一个WebRTC 1对1的对话,使用:
- SimpleWebRTC库
- CoTurn服务器
- 信令服务器
一切似乎都很好,但有一个问题:
Chrom*浏览器只显示视频的第一帧,然后视频和音频冻结。看看Chromium进程网络和CPU的使用情况,它正在获取和解码视频,但没有显示。以下是我的代码:
window.webrtc = new SimpleWebRTC({
localVideoEl: 'local',
remoteVideosEl: 'remote',
autoRequestMedia: true,
debug: true,
url: 'https://server.server:8888/'
});
window.webrtc.on('videoAdded', function (video, peer) {
var remotes = document.getElementById('remote');
if (remotes) {
var container = document.createElement('div');
container.className = 'videoContainer';
container.id = 'container_' + webrtc.getDomId(peer);
container.appendChild(video);
video.oncontextmenu = function () {
return false;
};
remotes.appendChild(container);
if (peer) {
peer.on('iceConnectionStateChange', function (event) {
switch (peer.pc.iceConnectionState) {
case 'checking':
$('#status').text('Connecting...');
break;
case 'connected':
case 'completed': // on caller side
$('#status').text('Connected');
break;
case 'disconnected':
$('#status').text('Disconnected');
break;
case 'failed':
$('#status').text('Failed to connect');
break;
case 'closed':
$('#status').text('Connection closed');
$('#remote').empty();
break;
}
});
}
}
});
window.webrtc.on('readyToCall', $.ajax({
url: '/getroom.php',
success: function (data) {
window.webrtc.joinRoom(data);
}
}));
<p id="status">Waiting...</p>
<video id="local" width="300" height="225" autoplay></video>
<div id="remote"></div>
信号管理员:
{
"uid": "nobody",
"isDev": true,
"logLevel": 3,
"server": {
"port": 8888,
"secure": true,
"key": "key.key",
"cert": "cer.cer"
},
"stunservers" : [
{
"url": "stun:server.server:3478"
}
],
"turnservers" : [
{
"url": "turn:server.server:3478",
"secret": "qgJeuJuIyeqX",
"expiry": 86400
}
]
}
CoTurn服务器被配置为qgJeuJuIyeqX
密钥和server.server
领域,其他一切都是默认的。
在Chrome中似乎是一个问题,重新添加视频元素会导致视频冻结。解决方案是只添加一次视频元素。我把remoteVideosEl部分留空:
window.webrtc = new SimpleWebRTC({
localVideoEl: 'local',
remoteVideosEl: '',
autoRequestMedia: true,
debug: true,
url: 'https://server.server:8888/'
});
通过这种方式,SimpleWebRTC不会自动为您附加视频元素,因此当调用"videoAdded"方法时,您可以第一次附加视频。
另一个选项是为DOM元素调用.play(),这样它将启动视频/音频传输。为了避免控制台出现异常,您可以使用以下修补程序:如何防止"play()请求被对pause()"的调用中断;错误
相关文章:
- jQuery单击事件在一次之后不会触发
- 我是否可以在渲染过程中使用三.js合并每一帧中的几何体
- 使用Javascript移动到同一页面中的另一帧
- WebRTC流在第一帧之后冻结
- Skrollr:当滚动位置在最后一个关键帧之后时传递函数
- 如何使用onmouseover打开另一帧中的链接
- 优化帮助:使用程序调用每一帧和低FPS
- 视频.js最后一帧图像
- HTML5 动画绘制在上一帧之上
- 通过jQuery在最后一项之后插入
- 如何删除多维数据集.js实例的一天之后的事件
- JavaScript中一帧的冲突检测
- 删除或隐藏上一帧中的图像-html 5画布
- 如何将击键传播到HTML页面中的每一帧
- 在X轴上的最后一列之后,在FusionChart中呈现竖线
- 嵌入youtube视频与最后一帧
- 在每一帧中选择元素
- 如何确定碰撞是新的还是从上一帧继续
- 为什么在三维渲染函数中,while循环不更新每一帧?
- CSS3最后一帧动画之后的循环在动画序列中完成