Подключаем библиотеку.
Стили
Скрипт JS.
Переменная inputElement имеет элемент, в котором появится кнопка "СКАНИРОВАТЬ".
Но не сканировать а иконка сканировать.
document.addEventListener('DOMContentLoaded', function() {
const codeReader = new ZXing.BrowserMultiFormatReader();
const inputElement = document.getElementById('wahtmlcontrol_fields_field_16_2-1');
// Динамически создаем кнопку
const scanButton = document.createElement('button');
scanButton.id = 'scan-button';
scanButton.className = 'scan-button';
scanButton.innerHTML = '';
// Добавляем кнопку над input
inputElement.parentNode.style.position = 'relative';
inputElement.parentNode.appendChild(scanButton);
function createModal() {
// Создаем модальное окно
const modal = document.createElement('div');
modal.id = 'modal';
modal.className = 'modal';
modal.innerHTML = `
`;
document.body.appendChild(modal);
const videoElement = modal.querySelector('#video');
let isScanning = true;
function closeModal() {
stopVideoStream();
modal.remove();
}
function startVideoStream() {
isScanning = true;
navigator.mediaDevices.getUserMedia({
video: { facingMode: { exact: 'environment' } }
}).then((stream) => {
videoElement.srcObject = stream;
videoElement.setAttribute('playsinline', true);
videoElement.play();
codeReader.decodeFromVideoElementContinuously(videoElement, (result, err) => {
if (result && isScanning) {
inputElement.value = result.text;
closeModal();
isScanning = false;
}
});
}).catch((err) => {
console.error(`Ошибка при доступе к видео устройствам: ${err}`);
});
}
function stopVideoStream() {
if (videoElement.srcObject) {
const stream = videoElement.srcObject;
const tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
videoElement.srcObject = null;
}
}
window.addEventListener('click', function(event) {
if (event.target == modal) {
closeModal();
}
});
modal.style.display = 'block';
startVideoStream();
}
scanButton.addEventListener('click', createModal);
});