Не отображается камера на сайте
Делаю сайт, в котором в том числе будет присутствовать сканер QR.
Вылезает ошибка, что картинка якобы имеет ширину 0. Я же хочу вообще на весь экран созерцать изображение с камеры. Подскажите куда копать, пробовал на разных устройствах
// Функция для инициализации сканера
function startScanner() {
const qrReader = new Html5Qrcode("qr-reader");
const config = {
fps: 10, // Частота кадров
qrbox: {
width: 250,
height: 250
} // Размер квадрата для сканирования
};
qrReader.start({
facingMode: "environment"
}, // Камера устройства
config, (decodedText, decodedResult) => {
console.log("QR Code detected: ", decodedText);
alert(`QR Code detected: $ {
decodedText
}
`);
showScreen('screen4'); // Переход на экран 4 после сканирования
}, (errorMessage) => {
console.error("Ошибка сканирования:", errorMessage); // Обработка ошибок
}
).catch(err => {
console.error("Ошибка запуска сканера:", err);
alert("Не удалось запустить сканер. Проверьте доступ к камере.");
});
}<div id="scanner-container" style="position: relative;">
<div id="qr-reader" style="width: 100%; height: 100%;"></div>
<div class="scanner-box"></div>
<!-- Квадрат для сканирования -->
</div>