Chrome fires deviceReady event when cam is in use

[rluiten]

Description

In Firefox 66 I get a deviceErrorCode name of "NotReadableError" if video is in use.

In Chrome 73 I do not get a deviceError in fact i get a deviceReady
But when I try to start recording I get an error in console.

This data is captured in my local dev environment.

Steps to reproduce

On my Windows 10 (build 1803) development pc.

1. I start the local windows 10 camera app and let it hold camera.
2. I then proceed into my app and go to the video recording page.
3. In Chrome I get a deviceReady called in my page - my page enables the start video capture button.
4. When I click the start capture button get the above error in javascript console.

The error isn't surprising, what is surprising is that I get a deviceReady.
Despite reporting deviceReady I do not see the video preview it remains black.

Results

Expected

In Chrome I should receive deviceError event.

Actual

In Chrome I do receive a deviceReady event.
It fails later in start() video capture.

Error output

This error appears in the Chrome js console when I execute start() because Chrome things I have the device due to deviceReady event.

VM16438 1.chunk.js:83096 VIDEOJS: ERROR: DOMException: Failed to execute 'start' on 'MediaRecorder': The MediaRecorder failed to start because there are no audio or video tracks available.
    at MediaStreamRecorder.record (http://localhost:5004/static/js/1.chunk.js:99218:21)
    at initRecorder (http://localhost:5004/static/js/1.chunk.js:97053:19)
    at Object.startRecording (http://localhost:5004/static/js/1.chunk.js:97035:5)
    at MRecordRTC.startRecording (http://localhost:5004/static/js/1.chunk.js:98180:28)
    at RecordRTCEngine.start (webpack://VideojsRecord/./src/js/engine/record-rtc.js?:96:19)
    at Record.startRecording (webpack://VideojsRecord/./src/js/videojs.record.js?:622:19)
    at Player.eval (webpack://VideojsRecord/./src/js/videojs.record.js?:600:22)
    at HTMLDivElement.bound (http://localhost:5004/static/js/1.chunk.js:116215:15)
    at HTMLDivElement.func (http://localhost:5004/static/js/1.chunk.js:116042:8)
    at HTMLDivElement.data.dispatcher (http://localhost:5004/static/js/1.chunk.js:115857:31)
    at trigger (http://localhost:5004/static/js/1.chunk.js:115995:25)
    at Player.trigger$$1 [as trigger] (http://localhost:5004/static/js/1.chunk.js:116904:12)
    at Player.(anonymous function) [as handleTechLoadedmetadata_] (http://localhost:5004/static/js/1.chunk.js:138060:17)
    at Html5.bound (http://localhost:5004/static/js/1.chunk.js:116215:15)
    at HTMLVideoElement.bound (http://localhost:5004/static/js/1.chunk.js:116215:15)

Additional Information

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

versions

videojs

"videojs-record": "^3.6.0"

browsers

Launched in Incognito mode in Chrome to isolate addons.

OSes

Windows 10 build 1803 64bit, up to date patches.

[thijstriemstra]

this is probably hopefully an upstream issue in RecordRTC..

[rluiten]

Do you mean this ? https://github.com/muaz-khan/RecordRTC
Should I report it there ?

[thijstriemstra]

@rluiten yeah that is the 'recorder' library that videojs-record uses, but not sure if the bug's there, I'll have to check. Can you try one of the recordrtc examples and see if you get different/better error messages there?

[rluiten]

I can try, can you point me at one? Or just dig around in the RecordRTC doc?

[thijstriemstra]

https://www.webrtc-experiment.com/RecordRTC/simple-demos/

[rluiten]

Ok tried out https://www.webrtc-experiment.com/RecordRTC/simple-demos/video-recording.html

In Firefox 66 in Private mode with my video tied up by the Win10 Camera app.

1. I click Start Recording.
2. I get a prompt to allow video, and click Allow
3. I get a dialog with "Unable to capture your camera. Please check console logs" message.

Visible in the js console i see this error logged in console after I click Ok on the Unable capture dialog

MediaStreamError { name: "NotReadableError", message: "Failed to allocate videosource", constraint: "", stack: "" }

In Chrome 73 in Incognito mode with my video tied up by the Win10 Camera app.

1. I click Start Recording.
2. I get a prompt to allow video, and click Allow
3. The Black window area of video vanishes it appear to collapse to a point.
4. I see in console (not errors just log messages). Which looks like things are ok

started recording video stream.
RecordRTC.js:1049 Using recorderType: MediaStreamRecorder
RecordRTC.js:2081 Passing following config over MediaRecorder API. {type: "video", mimeType: "video/webm", initCallback: ƒ, checkForInactiveTracks: false}
RecordRTC.js:705 Recorder state changed: recording
RecordRTC.js:99 Initialized recorderType: MediaStreamRecorder for output-type: video

5. If i click Stop Recording i see in console

RecordRTC.js:763 RecordRTC is destroyed.
destroy @ RecordRTC.js:763
stopRecordingCallback @ video-recording.html:40
_callback @ RecordRTC.js:177
mediaRecorder.ondataavailable @ RecordRTC.js:2148
blob:https://www.webrtc-experiment.com/0ce9274c-8eee-4d2c-8a0e-134b57637880:1 GET blob:https://www.webrtc-experiment.com/0ce9274c-8eee-4d2c-8a0e-134b57637880 net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

So Chrome doesnt report video unavailable it appears.

[thijstriemstra]

thanks for the details. There's also a lot of info here: https://blog.addpipe.com/common-getusermedia-errors/ Maybe try something like:

var constraints = {
    video: true,
    audio: true
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
    console.log('device ready');
}).catch(function(err) {
    //log to console first 
    console.log(err); /* handle the error */
    if (err.name == "NotFoundError" || err.name == "DevicesNotFoundError") {
        //required track is missing 
    } else if (err.name == "NotReadableError" || err.name == "TrackStartError") {
        //webcam or mic are already in use 
    } else if (err.name == "OverconstrainedError" || err.name == "ConstraintNotSatisfiedError") {
        //constraints can not be satisfied by avb. devices 
    } else if (err.name == "NotAllowedError" || err.name == "PermissionDeniedError") {
        //permission denied in browser 
    } else if (err.name == "TypeError" || err.name == "TypeError") {
        //empty constraints object 
    } else {
        //other errors 
    }
});

[rluiten]

Nice, I should be able to figure where I am at with that page and your example.
Thanks so much!
I'll let you know if I learn anything else I think might be useful.

[rluiten]

Even using that code directly with getUserMedia() is failing in Chrome to tell me its in use, it behaves as if the video stream is available. Oh well, it a known problem its not a show stopper for me at the moment.

[thijstriemstra]

Thanks for the details. Annoying issue. Not sure if this ticket should be closed or.. Did you find any chrome/chromium bug reports for this? And if not, maybe open one?

[rluiten]

I havnt gone looking in chrome bugs, but it does appear to be squarely in that court.
I did a few searches, but got little information on any reports or even properly where to report it.

[thijstriemstra]

this is from '15: https://stackoverflow.com/questions/31108855/webrtc-check-if-camera-and-microphone-are-in-use-on-chrome If it's still a bug, chrome is just lame.

I do hope the chromium devs have an open issue for this, haven't found it yet though.

The testrtc project has a test that detects silence from a microphone here that could be useful in determining if the audio track returned is silent, and a similar video test that detects frozen or black frames.

Come on, this can't be real. 🤦‍♂️