Broken stopRecording using RecordRTC with Chrome

[bcbud]

Previous versions of Chrome worked fine, but the new version [Version 56.0.2924.87] seems to break/not execute the following line in stopRecording (note: still works fine in FF).

RecordRTC.js - line 107:
mediaRecorder.stop(_callback);

MediaRecorder object is created and defined as:

Object disableLogs:false
getNativeBlob:true
initCallback:null
mimeType:"video/webm"
type:"video"

But when it comes time to call recordRTC.stopRecording, Chrome stops executing after the (!== gif) check...

RecordRTC.js - Line 94:

function stopRecording(callback) {
        if (!mediaRecorder) {
            return console.warn(WARNING);
        }

        /*jshint validthis:true */
        var recordRTC = this;

        if (!config.disableLogs) {
            console.warn('Stopped recording ' + config.type + ' stream.');
        }

        if (config.type !== 'gif') {
            mediaRecorder.stop(_callback);
        } else {
            mediaRecorder.stop();
            _callback();
        }

        function _callback(__blob) {
            for (var item in mediaRecorder) {
                if (self) {
                    self[item] = mediaRecorder[item];
                }

Again, this works perfectly fine in FF, but has recently stopped working in Chrome.

Any suggestions or workarounds?

[felipejacson]

Hi. I'm with the same problem. But in Chrome 56.0.2924.87 (64-bit) is working. Wating for a suggestions.

[muaz-khan]

You can add a looper here to check MediaRecoder state:

self._stop = self.stop;
self.stop = function(cb) {
    self.manuallyStopped = true;
    self._stop(cb);
};

(function(looper) {
    if (mediaRecorder) {
        console.log(mediaRecorder.state);
    }
    if (mediaRecorder && mediaRecorder.state == 'inactive') {
        if (!self.manuallyStopped) {
            mediaRecorder.start(10 * 60 * 1000);
        }
    }

    setTimeout(looper, 1000);
})();

[bcbud]

Thanks, that fixed the issue... The info you posted was for MediaStreamRecorder.js (which I'm assuming you're developing more now?), so here's the updated code to be stuck into RecordRTC.js at line 1771 for anyone who needs it:

mediaRecorder.onerror = function(error) {
            if (!config.disableLogs) {
                if (error.name === 'InvalidState') {
                    console.error('The MediaRecorder is not in a state in which the proposed operation is allowed to be executed.');
                } else if (error.name === 'OutOfMemory') {
                    console.error('The UA has exhaused the available memory. User agents SHOULD provide as much additional information as possible in the message attribute.');
                } else if (error.name === 'IllegalStreamModification') {
                    console.error('A modification to the stream has occurred that makes it impossible to continue recording. An example would be the addition of a Track while recording is occurring. User agents SHOULD provide as much additional information as possible in the message attribute.');
                } else if (error.name === 'OtherRecordingError') {
                    console.error('Used for an fatal error other than those listed above. User agents SHOULD provide as much additional information as possible in the message attribute.');
                } else if (error.name === 'GenericError') {
                    console.error('The UA cannot provide the codec or recording option that has been requested.', error);
                } else {
                    console.error('MediaRecorder Error', error);
                }
            }

            // When the stream is "ended" set recording to 'inactive' 
            // and stop gathering data. Callers should not rely on 
            // exactness of the timeSlice value, especially 
            // if the timeSlice value is small. Callers should 
            // consider timeSlice as a minimum value

            if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') {
                mediaRecorder.stop();
            }

            self._stop = self.stop;
            self.stop = function(cb) {
                self.manuallyStopped = true;
                self._stop(cb);
            };

            (function(looper) {
                if (mediaRecorder) {
                    console.log(mediaRecorder.state);
                }
                if (mediaRecorder && mediaRecorder.state == 'inactive') {
                    if (!self.manuallyStopped) {
                        mediaRecorder.start(10 * 60 * 1000);
                    }
                }

                setTimeout(looper, 1000);
            })();
        };

[thijstriemstra]

@bcbud can you create a pull request?

[thijstriemstra]

@muaz-khan can this be closed?