WebRTC streams freeze after first frame

Question

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.

Answer 1

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.