Firefox - mediaDevices.getUserMedia throws AbortError

user_2474715 0
Viewed 4915

I get the following error in firefox (no problems in Chrome / Edge / Safari):

MediaStreamError { name: "AbortError", message: "Starting video failed", constraint: "", stack: "" }

Browser console only shows < unavailable > when this error is thrown.

I am using adapter-latest.js from webrtc.github.io and the code works perfectly well on other pages within my application but not in one particular page. Is there a possibility to find out, what interferes with getUserMedia? I allready tried commenting out all other libraries and includes.

My code is:

       var video = document.getElementById('recorder');
       video.onloadedmetadata = function(e) {
           $("#takePicture").show();

           if($("#customerImage").attr("src") == ""){
               $("#recorder").show();
           }
       };
       navigator.mediaDevices.getUserMedia({ video: true})
           .then(stream => {
               video.srcObject = stream;
           })
           .catch(e => console.log(e));
getusermedia webrtc firefox
2 Answers

I was facing this issue because I had Chrome also running the same app and using the webcam. So basically the webcam was already in use and I was trying to access it via Firefox too.

user_74397610

Are you really sure that you need adapter? In my experience it makes more problems than it solves.

Can you try to use constraints?

Example (I removed some things, but it works like a charm here):

 constraints = {
    width: 1280,
    height: 720,
    frameRate: 10, //mobile
    facingMode: {
        exact: "environment"
    } //mobile
}



navigator.mediaDevices.getUserMedia({
    audio: false,
    video: constraints
}).
then(handleSuccess).catch(handleError);


function handleSuccess(stream) {
    video.src = URL.createObjectURL(stream);
    video.play();
}

function handleError(error) {
    console.log('navigator.getUserMedia error: ', error);
}
user_45752580
Related