jsQR Javascript 媒体设备未定义

Question

我正在尝试从 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>

Answer 1

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

要允许使用（至少在 safari 上），您必须转到“开发”>“WebRTC”>“允许在不安全的站点上捕获媒体”。

jsQR Javascript 媒体设备未定义

jsQR Javascript mediadevices undefined

javascript

undefined

navigator

mediadevices