Webcam Access for Custom Filters:vTypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads

Question

I am currently trying to improve my JS skills by going through WesBos's 30 Days of JavaScript. (It is really fun if!) I'm currently on Day 19, which is about using JS to access the WebCam, and then add affects using CSS.

I was successfully able to set up a local server, and here is my code so far:

 function getVideo() {
        navigator.mediaDevices.getUserMedia({video: true, audio: false})
        .then(localMediaStream => {
            console.log(localMediaStream);
            video.src = window.URL.createObjectURL(localMediaStream);
            video.play();
        })
        .catch(err => {
            console.error(`Web camera access is not enabled. To resolve, reload the page and allow 
    access.`, err);
        });
    }
    
    getVideo();

However, I am getting this error:

    TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.
    getVideo http://localhost/19-webcam-fun/scripts.js:12
    promise callback*getVideo http://localhost/19-webcam-fun/scripts.js:10
    <anonymous> http://localhost/19-webcam-fun/scripts.js:27

Idk if this helps, but the console.log(localMediaStream) results in the following:

    MediaStream { id: "{97c3d27e-404e-4d14-b1d2-2a9ebbf09137}", active: true, onaddtrack: null, 
    onremovetrack: null }
    ​
    active: true
    ​
    id: "{97c3d27e-404e-4d14-b1d2-2a9ebbf09137}"
    ​
    onaddtrack: null
    ​
    onremovetrack: null
    ​
    <prototype>: MediaStreamPrototype { getAudioTracks: getAudioTracks(), getVideoTracks: 
    getVideoTracks(), getTracks: getTracks(), … }

I would really appreciate it if someone could help me understand this a little better! Thanks!

Answer 1

Try:

video.srcObject = localMediaStream;

if you're on firefox