autoMuteDevice not working in Chrome

[retrocausal]

trafficstars

Description

This has been discussed across various tickets #304 , #157 etc. Basically, Upon hitting stop / on finishing recording, the devices Must Turn Off. Since this isn't happening, we are either to pass autoMuteDevices, or, handle it in a callback. However, even with these options configured, the user can only record Once. A second tap on record with these configurations in place, breaks MediaRecorder and throws a DOM Exception

Steps to reproduce

1. Create a react component with react v16.2
2. install videojs-record from npm with all its dependencies - version 3.8.0
3. import videojs into your component.
4. write out your component exactly as it is in the guide / wiki
5. add autoMuteDevices to the record plugin and set it to true
6. Also add a callback to your onFinish / onStop events on the player. and follow the code as given here
7. open your component on the browser
8. hit record
9. Once recording is complete, Hit record again.

Results

Expected

1. All controls must be retained
2. The recorder must start recording again

Actual

1. The stop button disappears, as does the replay button
2. The recorder resizes abruptly and then comes back to actual dimensions.
3. There are errors on the console that say VIDEOJS: ERROR: DOMException: Failed to execute 'start' on 'MediaRecorder': The MediaRecorder failed to start because there are no audio or video tracks available.
4. The recorder turns blank on timeout - maxLength without recording anything

Error output

If there are any errors at all, please include them here. VIDEOJS: ERROR: DOMException: Failed to execute 'start' on 'MediaRecorder': The MediaRecorder failed to start because there are no audio or video tracks available.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? 3.8.0

browsers

what browser(s) are affected? Make sure to test with all third-party browser chrome v75.x / firefox v 67.x extensions disabled.

OSes

what platforms (operating systems and devices) are affected? macOS mojave

[retrocausal]

Opened per comments on #157

It is tough to share a plunk or actual code, as the library aliases video.js. almost all external code sharing platform fail to build aliased code. However, you may still see it on this page

[thijstriemstra]

It is tough to share a plunk or actual code

well, can you reproduce it without react?

[retrocausal]

I really tried, but I can not seem to find all the necessary dependencies hosted on a cdn. I can only get the JS file. If i do it via npm, aliasing comes into play again. Also, code sharing platforms do not expose node_modules to write it like in the examples you have shared on github.

[retrocausal]

I really tried, but I can not seem to find all the necessary dependencies hosted on a cdn. I can only get the JS file. If i do it via npm, aliasing comes into play again. Also, code sharing platforms do not expose node_modules to write it like in the examples you have shared on github.

However, If you take my word,

1. I just locally setup the respository
2. ran npm stuff, and started the service on port 8080
3. edited examples/audio-video.html - added the callbacks on the event onStopRecord
4. refreshed my page
5. hit record
6. hit stop
7. hit record again and again landed on the same exception

[thijstriemstra]

thanks for the detailed feedback, I'll take a look this weekend. you keep calling the option autoMuteDevices but it's actually autoMuteDevice. Maybe it's as simple as that.. ;)

[retrocausal]

Phew I double checked. seems to be a typo here on github ,the code still reads autoMuteDevice

[thijstriemstra]

I just checked the option with Firefox 68.0.1 on Ubuntu 18 (tested with both video-only and audio-only) and it worked exactly as expected: when recording the camera light is on, when pressing stop the light turns off.

Also tested it on Chrome 76 beta but here the light did not turn off when stopping the recording, so looks like Chrome hasn't implemented it yet..

var options = {
    controls: true,
    width: 320,
    height: 240,
    fluid: false,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: 10,
            debug: true,
            autoMuteDevice: true
        }
    }
};

edited examples/audio-video.html - added the callbacks on the event onStopRecord

Not sure what this means? Why not use a code example to illustrate your point?

[thijstriemstra]

related chromium ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=642785

[retrocausal]

@thijstriemstra Thanks so much for all the help on this. Much much appreciated

[aphavichitr]

@thijstriemstra @retrocausal has this issue been resolved yet? I'm still able reproduce with videojs-record v4.1.1 on Mac + Chrome

[thijstriemstra]

if you click on the chromium bug link, you will see the ticket's still open https://bugs.chromium.org/p/chromium/issues/detail?id=642785

[aphavichitr]

Ok, so there's no work around for now? Everyone is just keeping the camera on after the recording and only destroying the player after leaving the page?

[thijstriemstra]

Ok, so there's no work around for now?

There used to be this much hated piece of software called the Flash Player that allowed me to do it, on every platform, circa 2003. Twenty years later and here we are.. 🙉