TypeError: Argument 1 is not valid for any of the 1-argument overloads of URL.createObjectURL in Mozilla Firefox

0

I have a web app with a photo capturing feature via webcam. This functionality always behaved very well in Chrome and Mozilla Firefox, but since yesterday the following bug is appearing in the Mozilla console when I click on "Allow access to the webcam" and the camera image is simply not displayed.

TheJavascriptcodeforcameraactivationandphotocaptureisasfollows:

varvideo=document.getElementById("video"),
    canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    photo = document.getElementById("photo"),
    vendorUrl = window.URL || window.webkitURL;

function abrirModalFoto() {
    $("#modalFoto").show();

    navigator.getMedia =
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;

    navigator.getMedia(
        {
            video: true,
            audio: false
        },
        function(stream) {
            video.src = vendorUrl.createObjectURL(stream);
            video.play();
        },
        function(error) {
            console.log(error);
        }
    );
}

var baseImage = "";
function capturarFoto() {
  $("#btn-cancelar-foto").show();
  $("#btn-capturar-foto").hide();
  $("#btn-salvar-foto").show();
  $("#video").hide();
  context.drawImage(video, 0, 0, 500, 400);
  baseImage = canvas.toDataURL("image/png");
  photo.setAttribute("src", baseImage);
}

Obs. 1: The curious fact is that the browser behaves as if the webcam was active (because the light is on)

Obs2: In Chrome everything works perfectly

    
asked by anonymous 11.09.2018 / 14:54

1 answer

0

I found the solution to the problem in a discussion of createObjectURL depreciation in Firefox's own forum.

Just replace the% wrapper with%

by video.src = vendorUrl.createObjectURL(stream);

Font

    
11.09.2018 / 18:18