Подключаем библиотеку.
        
            

        
    
Стили
        

        
    
Скрипт 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);
    });