How to use getUserMedia on normal browser

Question

I followed this guide to utilise the getUserMedia API.

https://davidwalsh.name/browser-camera

The API works when I open it up in Brackets Live Preview mode but not when I open it in its directory.

There is a prompt to request for permissions to access my webcam in Live Preview but not when I open the file.

In the above tutorial that I followed, it mentions that I need https protocol for it to work, is that the reason why? If so, how do I go along fixing this issue?

Here is a code snippet.

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
            console.log("Video capture error: ", error.code); 
        };

    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
}, false);