如何在普通浏览器上使用getUserMedia

Question

我按照本指南使用了getUserMedia API。

https://davidwalsh.name/browser-camera

当我在Brackets实时预览模式下打开它时，API会起作用，但是当我在其目录中打开它时，API无效。

提示您在实时预览中请求访问我的网络摄像头的权限，但在我打开文件时却没有。

在我所遵循的上述tutorial中，它提到我需要https协议才能正常工作，这是为什么？如果是这样，我该如何解决这个问题？

以下是代码段。

// 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);