Your browser doesn't have support for the navigator.getUserMedia interface

Question

I tried changing the deprecated navigator.getUserMedia() to navigator.mediaDevices.getUserMedia() but nothing seems to work. The interface says my browser doesn't support navigator.getUserMedia() The idea of this is to let my browser prompt my webcam but it doesn't seem to work. Any help?

var video = document.querySelector('#camera-stream'),
    image = document.querySelector('#snap'),
    start_camera = document.querySelector('#start-camera'),
    controls = document.querySelector('.controls'),
    take_photo_btn = document.querySelector('#take-photo'),
    delete_photo_btn = document.querySelector('#delete-photo'),
    download_photo_btn = document.querySelector('#download-photo'),
    error_message = document.querySelector('#error-message');


// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);


if(!navigator.getUserMedia){
    displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{

    // Request the camera.
    navigator.mediaDevices.getUserMedia(
        {
            video: true
        },
        // Success Callback
        function(stream){

            // Create an object URL for the video stream and
            // set it as src of our HTLM video element.
            video.src = window.URL.createObjectURL(stream);

            // Play the video element to start the stream.
            video.play();
            video.onplay = function() {
                showVideo();
            };
     
        },
        // Error Callback
        function(err){
            displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
        }
    );

}

[This is the output][1] [1]: https://i.stack.imgur.com/s2QMx.png