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

Question

I have a web app with a webcam photo capture feature. This feature has always behaved very well in Chrome and Mozilla Firefox, but since yesterday the following error appears below in the Mozilla console when I click on "Allow access to Webcam" and the image of the camera is simply not displayed.

Javascript code for camera activation and photo capture is as follows:

var video = 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);
}

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

Note.2: Everything works perfectly in Chrome

Answer 1

I found the solution to the problem in a discussion about the depreciation of createObjectURL in the Firefox forum.

Just replace the section video.src = vendorUrl.createObjectURL(stream);

for video.srcObject = stream;

Source