Javascript WebRTC流在第一帧后冻结

Javascript WebRTC流在第一帧后冻结,javascript,google-chrome,video-streaming,webrtc,chromium,Javascript,Google Chrome,Video Streaming,Webrtc,Chromium,交易如下,我有一个WebRTC 1对1对话,使用: 一切似乎都很好,但有一个问题: Chrom*浏览器只显示视频的第一帧,然后视频和音频冻结。查看Chromium进程网络和CPU使用情况,它获取和解码视频,但不显示视频。这是我的密码: window.webrtc = new SimpleWebRTC({ localVideoEl: 'local', remoteVideosEl: 'remote', autoRequestMedia: true, deb

交易如下,我有一个WebRTC 1对1对话,使用:

一切似乎都很好,但有一个问题:

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


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(),因此它将启动视频/音频传输。为了避免控制台中出现异常,您可以使用此修补程序:

显然,videoAdded方法是一个问题,在删除它并让SimpleWebRTC处理视频添加后,它得到了修复,但这不是解决此问题的正确答案。
{
    "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
            }
    ]
}
window.webrtc = new SimpleWebRTC({
    localVideoEl: 'local',
    remoteVideosEl: '',
    autoRequestMedia: true,
    debug: true,
    url: 'https://server.server:8888/'
});