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

javascript getusermedia
trumanblack1025 picture trumanblack1025 · Oct 6, 2018 · Viewed 15.2k times · Source

I've been using getUserMedia to access camera from the browser. I tried it on several browsers and it works except on firefox. It works on chrome,avast,opera mini. This is my code:

<button type="button" onclick="turnOn()">turn on cam</button>
function turnOn() {
     document.getElementsByTagName('video')[0].play();

     var video = document.querySelector('video')
      , canvas;

    /**
     *  generates a still frame image from the stream in the <video>
     *  appends the image to the <body>
     */

    // use MediaDevices API
    // docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
    if (navigator.mediaDevices) {
      // access the web cam
       navigator.mediaDevices.getUserMedia({video: true})
      // permission granted:
        .then(function(stream) {
          video.src = window.URL.createObjectURL(stream);
          /* video.addEventListener('click', takeSnapshot); */
        })
        // permission denied:
        .catch(function(error) {
          document.body.textContent = 'Could not access the camera. Error: ' + error.name + " " + error.message;
        });
    }
}

Hope you could help me. Thank you!

Answer

Dietrich Ayala picture Dietrich Ayala · Dec 28, 2019

Replace:

video.src = window.URL.createObjectURL(stream);

with:

video.srcObject = stream

Source: https://www.chromestatus.com/features/5618491470118912

Related questions

Stop/Close webcam stream which is opened by navigator.mediaDevices.getUserMedia

I opened a webcam by using the following JavaScript code: const stream = await navigator.mediaDevices.getUserMedia({ /* ... */ }); Is there any JavaScript code to stop or close the webcam? Thanks everyone.

Read More
reprompt for permissions with getUserMedia() after initial denial

How do we go about requesting camera/microphone access with getUserMedia() after being denied once? I'm working with getUserMedia to access the user's camera and pipe the data to a canvas. That bit all works fine. In testing, I hit …

Read More
How can I capture an image via the user's webcam using getUserMedia?

I want to make a program on the web which will capture an image via the user's webcam. I am using the getUserMedia Web API. Here is my code, but it does not work. How can I change it to …

Read More