how to make the camera work with javascript

Question

I know this question has been asked plenty of time, but I can't figure out what is wrong in my code. I have look for in google, here, and many other places where I haven't found a solution yet. My HTML code is:

<button id="camera">Show the camera</button>
<video id="video" class="hidden" preload="none" autoplay>
    <source src="video.webM" type="video/webM">
</video>  

My JavaScript code is:

$("#camera").on("click",function(){ 

        var mediaConfig =  { video: true };
        var video = $("#video")[0];

        // Normalize the various vendor prefixed versions of getUserMedia.
        navigator.getMedia = (  navigator.getUserMedia ||
                                    navigator.webkitGetUserMedia ||
                                    navigator.mozGetUserMedia || 
                                    navigator.msGetUserMedia );

        // Check that the browser supports getUserMedia.
        // If it doesn't show an alert, otherwise continue.
        if (navigator.getMedia) {
          // Request the camera.
          navigator.mediaDevices.getUserMedia(
            // Constraints
            mediaConfig,

            // Success Callback
            function(localMediaStream) {
                // Grab elements, create settings, etc.
                video.removeClass("hidden");
                video.addClass("showVideo");
                console.log("Camera is activated");
                if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = localMediaStream;
                }else {
                    var vendorURL = window.URL || window.webkitURL;
                    video.src = vendorURL.createObjectURL(localMediaStream);
                }
                // Create an object URL for the video stream and use this 
                // to set the video source.
                //video.src = window.URL.createObjectURL(localMediaStream);
                video.play();
            },

            // Error Callback
            function(err) {
              // Log the error to the console.
              console.log('The following error occurred when trying to use getUserMedia: ' + err);
                video.removeClass("showVideo");
                video.addClass("hidden");
                alert("error");
            }
          );

        } else {
                video.removeClass("showVideo");
                video.addClass("hidden");
          alert('Sorry, your browser does not support getUserMedia');
        }

In the mobile, I get that the browser ask me permissions to Access to the camera, but once I accept, nothing happens: No error, no video, no streamming, just nothing. Also, I forgot to mention, but the web is in a SSL Server, so is no that problem. Would anybody illustrate me a bit??. I don't know what else to do :( Thank you

Answer 1

You're confusing the new navigator.mediaDevices.getUserMedia() promise API with the old deprecated navigator.getUserMedia callback API.

There's also a lot of outdated vendor prefix cruft here (e.g. video.mozSrcObject is no more).

Just use:

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

If you're worried about supporting old browsers, use adapter.js.