jsQR Javascript медиаустройства не определены - PullRequest
0 голосов
/ 17 января 2020

Я пытаюсь реализовать библиотеку jsQR javascript из git: 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>

1 Ответ

0 голосов
/ 17 января 2020

Решил это. Сервер разработки не защищен, и, следовательно, Safari не позволяет использовать WebRT C на незащищенных соединениях.

Чтобы разрешить использование (по крайней мере, в Safari), вам необходимо go для разработки> WebRT C> Разрешить захват мультимедиа на небезопасных сайтах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...