获取 navigator.getUserMedia() 不再适用于不安全的来源答案

【问题标题】：getting navigator.getUserMedia() no longer works in insecure origins获取 navigator.getUserMedia() 不再适用于不安全的来源
【发布时间】：2016-05-18 13:12:38
【问题描述】：

我正在使用 navigator.getUserMedia 在 html5 中捕获网络摄像头图像。直到上周它都可以正常工作。现在获取 getUserMedia() 之类的消息不再适用于不安全的来源和从网络摄像头损坏的捕获图像。我在网上搜索了 getUserMedia，发现它已被弃用，浏览器将来也不支持它。是否有适用于所有浏览器的 getUserMedia 替代功能。

我的html代码是

  <video id="video" width="640" height="480" autoplay></video>
  <button id="snap" class="sexyButton">Snap</button>
   <canvas id="canvas" width="640" height="480"></canvas>

脚本功能是

         <script>
    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); 
            };
        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) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }, false);

         </script>

【问题讨论】：

标签： javascript html

【解决方案1】：

Chrome 现在（自 47+ 起）强制实施新的安全规则，即使用 getUserMedia 的页面必须通过 HTTPS 提供。这是为了降低恶意行为者使用摄像头或麦克风设备监视用户的风险。已经公布了4个多月了。

至于您的其他评论“getUserMedia in web and find it is deprecated and browsers do not support it future” - 这是完全不正确的。

【讨论】：

【解决方案2】：

Chrome 47，getUserMedia() 不再适用于不安全的来源几天前 Chrome 47 已经发布。

一个重大变化是 WebRTC 不能在没有 HTTPS 的情况下工作。根据内部安全政策，Chrome 浏览器从版本 47 起不支持 getUserMedia() 获取不安全页面。因此，如果您的页面不是 HTTPS，您将无法使用麦克风。

http://flashphoner.com/getusermedia-no-longer-works-on-insecure-origins/

【讨论】：