question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken stopRecording using RecordRTC with Chrome

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
bcbudcommented, Feb 14, 2017

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);
            })();
        };
0reactions
thijstriemstracommented, Mar 1, 2017

@muaz-khan can this be closed?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Audio+Video+Screen Recording using RecordRTC
The audio is distorted exactly after 30 seconds in Mac chrome browser alone. ... I press stop recording there are no options to...
Read more >
Source: RecordRTC.js
Use this property on "stopRecording" to verify the encoder's sample-rates. ... Media Stream Recording API has not been implemented in chrome yet; ...
Read more >
WebRTC : Chrome not recording video/audio - Stack Overflow
So the simplest solution for chrome is: record video as webm using first instance of RecordRTC . record audip as wav using second...
Read more >
Issue 524281: Poor audio quality when running under Citrix ...
Open Chrome running in a Citrix virtualized environment 2. Attempt to send or record audio using a WebRTC application or something like ...
Read more >
RTCMultiConnection.startRecording | This method is ...
Did you meant that, blobs.video in "stopRecording" callback is empty or NULL? ... In chrome, RecordRTC can record merely local-stream's audio; however in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found