HTML 和 Javascript 中的浏览器相机权限侦听器

Question

我有一个包含 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);
                        }
                        
                        
                      
                    }
                });
            }