jsQR Javascript 媒体设备未定义答案

【问题标题】：jsQR Javascript mediadevices undefinedjsQR Javascript 媒体设备未定义
【发布时间】：2020-01-17 12:31:24
【问题描述】：

我正在尝试从 git 实现 jsQR javascript 库：jsQR

我在 Safari 13.0.4 上进行测试，当我运行在他们的网页上找到的演示时，它运行没有问题。

现在，当我从演示的检查器到我的页面实现相同的确切代码（复制和粘贴）时，我收到消息 TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')，在某些控制台打印后实际未定义的对象是 navigator.mediaDevices 这很奇怪，因为他们的演示正在运行不要认为这是浏览器的问题。

此外，我在 Firefox 上运行我的页面，它运行良好。

可能是什么问题？

这是我的代码（无论如何它与演示完全相同）：

Javascript：

var video = document.createElement("video");
var canvasElement = document.getElementById("canvas");
var canvas = canvasElement.getContext("2d");
var loadingMessage = document.getElementById("loadingMessage");
var outputContainer = document.getElementById("output");
var outputMessage = document.getElementById("outputMessage");
var outputData = document.getElementById("outputData");

function drawLine(begin, end, color) {
    canvas.beginPath();
    canvas.moveTo(begin.x, begin.y);
    canvas.lineTo(end.x, end.y);
    canvas.lineWidth = 4;
    canvas.strokeStyle = color;
    canvas.stroke();
}

$(document).ready(function () {
    console.log(navigator.mediaDevices);
})

// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
    video.srcObject = stream;
    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
    video.play();
    requestAnimationFrame(tick);
});

function tick() {
    loadingMessage.innerText = "⌛ Loading video..."
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
        loadingMessage.hidden = true;
        canvasElement.hidden = false;
        outputContainer.hidden = false;

        canvasElement.height = video.videoHeight;
        canvasElement.width = video.videoWidth;
        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert",
        });
        if (code) {
            drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
            drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
            drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
            drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
            outputMessage.hidden = true;
            outputData.parentElement.hidden = false;
            outputData.innerText = code.data;
        } else {
            outputMessage.hidden = false;
            outputData.parentElement.hidden = true;
        }
    }
    requestAnimationFrame(tick);
}

HTML：

 <div id="loadingMessage">???? Unable to access video stream (please make sure you have a webcam enabled)</div>
    <canvas id="canvas" hidden></canvas>
    <div id="output" hidden>
        <div id="outputMessage">No QR code detected.</div>
        <div hidden><b>Data:</b> <span id="outputData"></span></div>
    </div>

【问题讨论】：

标签： javascript undefined navigator mediadevices

【解决方案1】：

解决了。开发服务器不安全，因此 Safari 不允许在不安全的连接上使用 WebRTC。

要允许使用（至少在 safari 上），您必须转到 Develop>WebRTC>Allow media capture on insecure sites。

【讨论】：