Блог

У меня есть панель администратора с 3 пользователями. У меня есть требование захватить изображение пользователя с помощью веб-камеры и сохранить его во время процесса входа в систему. Это делается для того, чтобы никто, кроме назначенного пользователя, не имел доступа к веб-сайту. Я должен проверить, предоставлено ли разрешение на камеру, и если да, то видна ли форма входа пользователя. Теперь проблема в том, что пользователь может удалить разрешение и, таким образом, выключить камеру после того, как форма входа будет видна, и, следовательно, все еще может войти в систему без захвата изображения. Таким образом, мой вопрос заключается в том, есть ли какой-либо способ обнаружить или прослушать удаление пользователем разрешения, чтобы я мог скрыть или отключить форму входа.

Блоки кодов для справки ::

1. Это проверка разрешения камеры и отображение/скрытие формы входа в систему

 navigator.mediaDevices.getUserMedia(constraints)
        .then(function(mediaStream) {
            $('#loginform').show();
        })
        .catch(function(err) { 
            $('#loginform').hide();
        });
 

2. Это проверка на наличие первоначального разрешения камеры

 if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
              alert("This browser does not support the API yet");
              $('#auth_section').show();
              
            } else {
                navigator.permissions.query({ name: "camera" }).then(res => {
                    if(res.state == "granted"){
                        $('#loginform').show();
                        var videoElement = document.querySelector('video');
                        var audioSelect = document.querySelector('select#audioSource');
                        var videoSelect = document.querySelector('select#videoSource');

                        audioSelect.onchange = getStream;
                        videoSelect.onchange = getStream;

                        getStream().then(getDevices).then(gotDevices);                      
                        function getDevices() {
                          return navigator.mediaDevices.enumerateDevices();
                        }

                        function gotDevices(deviceInfos) {
                            $('#loginform').show();
                          window.deviceInfos = deviceInfos; // make available to console
                          for (const deviceInfo of deviceInfos) {
                            const option = document.createElement('option');
                            option.value = deviceInfo.deviceId;
                            if (deviceInfo.kind === 'audioinput') {
                              option.text = deviceInfo.label || `Microphone ${audioSelect.length   1}`;
                              audioSelect.appendChild(option);
                            } else if (deviceInfo.kind === 'videoinput') {
                              option.text = deviceInfo.label || `Camera ${videoSelect.length   1}`;
                              videoSelect.appendChild(option);
                            }
                          }
                        }

                        function getStream() {
                          if (window.stream) {
                            window.stream.getTracks().forEach(track => {
                              track.stop();
                            });
                          }
                          const audioSource = audioSelect.value;
                          const videoSource = videoSelect.value;
                          const constraints = {
                            audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
                            video: {deviceId: videoSource ? {exact: videoSource} : undefined}
                          };
                          return navigator.mediaDevices.getUserMedia(constraints).
                            then(gotStream).catch(handleError);
                        }

                        function gotStream(stream) {
                            
                          window.stream = stream; // make stream available to console
                          audioSelect.selectedIndex = [...audioSelect.options].
                            findIndex(option => option.text === stream.getAudioTracks()[0].label);
                          videoSelect.selectedIndex = [...videoSelect.options].
                            findIndex(option => option.text === stream.getVideoTracks()[0].label);
                          videoElement.srcObject = stream;
                        }

                        function handleError(error) {
                          console.error('Error: ', error);
                        }
                        
                        
                      
                    } else {
                        $('#loginform').hide();
                        alert("Kindly allow permission to camera for futher authentication.");
                        var videoElement = document.querySelector('video');
                        var audioSelect = document.querySelector('select#audioSource');
                        var videoSelect = document.querySelector('select#videoSource');

                        audioSelect.onchange = getStream;
                        videoSelect.onchange = getStream;

                        getStream().then(getDevices).then(gotDevices);

                        function getDevices() {
                          // AFAICT in Safari this only gets default devices until gUM is called :/
                          return navigator.mediaDevices.enumerateDevices();
                        }

                        function gotDevices(deviceInfos) {
                            //$('#loginform').show();
                          window.deviceInfos = deviceInfos; // make available to console
                          console.log('Available input and output devices:', deviceInfos);
                          for (const deviceInfo of deviceInfos) {
                            const option = document.createElement('option');
                            option.value = deviceInfo.deviceId;
                            if (deviceInfo.kind === 'audioinput') {
                              option.text = deviceInfo.label || `Microphone ${audioSelect.length   1}`;
                              audioSelect.appendChild(option);
                            } else if (deviceInfo.kind === 'videoinput') {
                              option.text = deviceInfo.label || `Camera ${videoSelect.length   1}`;
                              videoSelect.appendChild(option);
                            }
                          }
                        }

                        function getStream() {
                          if (window.stream) {
                            window.stream.getTracks().forEach(track => {
                              track.stop();
                            });
                          }
                          const audioSource = audioSelect.value;
                          const videoSource = videoSelect.value;
                          const constraints = {
                            audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
                            video: {deviceId: videoSource ? {exact: videoSource} : undefined}
                          };
                          return navigator.mediaDevices.getUserMedia(constraints).
                            then(gotStream).catch(handleError);
                        }

                        function gotStream(stream) {
                          window.stream = stream; // make stream available to console
                          audioSelect.selectedIndex = [...audioSelect.options].
                            findIndex(option => option.text === stream.getAudioTracks()[0].label);
                          videoSelect.selectedIndex = [...videoSelect.options].
                            findIndex(option => option.text === stream.getVideoTracks()[0].label);
                          videoElement.srcObject = stream;
                        }

                        function handleError(error) {
                            $('#auth_section').hide();
                          console.error('Error: ', error);
                        }
                        
                        
                      
                    }
                });
            }