您的浏览器不支持 navigator.getUserMedia 接口 请帮助我支持我的浏览器的 getUsermedia

Question

使用navigator.getusermedia处理相机输入时，我会遇到错误。我该怎么办？ 这是代码：

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.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);


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

    // Request the camera.
    navigator.getMedia(
        {
            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);
        }
    );

}

看来我的浏览器不支持navigator.getusermedia，但是我已经在所有浏览器中尝试过这样的浏览器，例如Opera，Chrome，Chrome，Brave，Mozilla和Edge，但结果始终是相同。

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


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

    // Request the camera.
    navigator.getMedia(
        {
            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);
        }
    );

}

Answer 1

It's possible you are using http, rather than https, to serve your web page and Javascript. getUserMedia() doesn't work except from localhost, 127.0.0.1, ::1, or any https server.

浏览器通过隐藏.getUsermedia（）函数来实现此限制。

为什么？因为网络牢固。浏览器开发人员安全人员（Chromium，Firefox，Safari）插入了安全孔，使坏人无需我们的允许，可以在机器上使用摄像头和麦克风。限制getusermedia（）对https-仅页面的操作使坏人更难使用so-called “中间的人”攻击欺骗人们侵犯自己的隐私。

It makes for a pain in the axx neck for developers: to deploy media apps we need https servers. But Heroku and Glitch provide simple-to-use platforms for testing code beyond localhost.

Answer 2

这是我通常使用的

const getUserMedia =
  navigator.mediaDevices.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;