#javascript #camera #qr-code #barcode-scanner #buildfire
Вопрос:
Я разрабатываю сканер QR-кодов с https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js на строительном огне. отлично работает над разработкой, но при развертывании на рынке enter code here
t камера не появляется. это мой код.
//const qrcode = window.qrcode;
enter code here
const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");
const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");
let scanning = false;
qrcode.callback = res => {
if (res) {
outputData.innerText = res;
scanning = false;
video.srcObject.getTracks().forEach(track => {
track.stop();
});
qrResult.hidden = false;
canvasElement.hidden = true;
btnScanQR.hidden = false;
}
};
buildfire.services.camera.barcodeScanner.scan(
{
preferFrontCamera: true,
showFlipCameraButton: true,
formats: "QR_CODE,PDF_417",
},
btnScanQR.onclick = () => {
navigator.mediaDevices
.getUserMedia({ video: { facingMode: "environment" } })
.then(function(stream) {
scanning = true;
qrResult.hidden = true;
btnScanQR.hidden = true;
canvasElement.hidden = false;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.srcObject = stream;
video.play();
tick();
scan();
});
}
);
function tick() {
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
scanning amp;amp; requestAnimationFrame(tick);
}
function scan() {
try {
qrcode.decode();
} catch (e) {
setTimeout(scan, 300);
}
}
Комментарии:
1. поставьте
.catch
для.getUserMedia
обещания — у меня была аналогичная проблема (в vue PWA), но с использованием.enumerateDevices
— примерно в 99% случаев я получал отказ или результат, в котором говорилось, что камер не было — я вводил задержку и повторял попытку после первого отказа (улова) или если камеры не были обнаружены … и тогда это работает в 100% случаев2. Происходит ли это с вами или вашими пользователями? Я не вижу, чтобы вы сначала проверяли наличие разрешений.
3. @Браво, я добавил .catch, который все еще не работает. не могли бы вы, пожалуйста, дать мне пример кода с обоими? .Перечислите устройства
4. @Daniel_Madain как проверить наличие разрешений.
5. @Bravo когда я пытаюсь использовать .enumerateDevices, я получаю эту ошибку «Не удалось преобразовать значение в «MediaStream»».