WebRTC streams freeze after first frame
chromium, google-chrome, javascript, video-streaming, webrtc
Solution
Seems to be an issue in Chrome where re-appending video elements causes the video to freeze. The solution is to only add the video element once. I got around this by leaving the remoteVideosEl section blank:
window.webrtc = new SimpleWebRTC({
localVideoEl: 'local',
remoteVideosEl: '',
autoRequestMedia: true,
debug: true,
url: 'https://server.server:8888/'
});
This way SimpleWebRTC does not automatically attach the video element for you, so when the 'videoAdded' method is called you can attach the video for the first time.
Problem
Here's the deal, I've got a WebRTC 1 on 1 conversation using: - SimpleWebRTC library - CoTurn server - Signaling server Everything seems to work fine, but there is one problem: Chrom* browsers display only first frame of the video and then the video freezes, as well as audio. Looking at the Chromium process network and CPU usage, it's getting and decoding video, but not showing it. Here are my codes: ``` 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> ``` Signalmaster: ``` { "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 server is configured to `qgJeuJuIyeqX` secret key and to `server.server` realm, everything else is default.