0

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

1 回答 1

0

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

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

于 2020-01-17T16:54:34.867 回答