초기 거부 후 getUserMedia ()로 권한을 다시 요청합니다.

초기 거부 후 getUserMedia ()로 권한을 다시 요청합니다.

---

한 번 거부 된 후 getUserMedia ()로 카메라 / 마이크 액세스를 요청하는 방법은 무엇입니까?

저는 getUserMedia를 사용하여 사용자의 카메라에 액세스하고 데이터를 캔버스로 파이프하고 있습니다. 그 비트는 모두 잘 작동합니다.

테스트에서 나는 거부를 한 번 쳤다. 이 시점에서 Chrome 및 Firefox에서 getUserMedia ()를 사용한 모든 후속 요청은 기본적으로 거부 됨 상태로 설정됩니다.

거부 된 후 페이지가로드 될 때마다 카메라 / 마이크에 대한 권한을 요청하여 사용자를 괴롭 히고 싶지는 않습니다. 그것은 이미 지리적 위치 API로 충분히 성가신 일입니다.

그러나 다시 요청할 수있는 방법이 있어야합니다. 사용자가 거부를 한 번만 쳤다고해서 항상 웹캠 액세스를 거부하려는 것은 아닙니다.

나는 사양에 대해 읽고 잠시 동안 인터넷 검색을 해 왔지만이 문제에 대해 명시 적으로 아무것도 찾지 못했습니다.

편집 : 추가 조사에 따르면 Chrome에서 거부를 누르면 현재 사이트가 차단 목록에 추가됩니다. chrome : // settings / content를 통해 수동으로 액세스 할 수 있습니다. 미디어로 스크롤합니다. 예외를 관리하고 차단 된 사이트를 제거합니다.

chrome : // settings / content 연결이 작동하지 않습니다 (사용자가 권한을 다시 활성화 할 수 있도록 유용한 링크를 추가하려는 경우).

getUserMedia에 대한 권한을 처리하기위한 전체 UX는 악취가납니다. = (

---

HTTPS를 사용하십시오. 사용자가 한 번 권한을 부여하면 기억되고 Chrome은 해당 페이지에 대한 권한을 다시 요청하지 않으며 즉시 미디어에 액세스 할 수 있습니다. 이것은 사용자에게 권한 표시 줄을 다시 강제하는 방법을 제공하지 않지만, 최소한 사용자가 권한을 한 번 부여하면 계속 요청할 필요가 없도록합니다.

앱이 SSL (https : //)에서 실행중인 경우이 권한은 영구적입니다. 즉, 사용자는 매번 액세스 권한을 부여 / 거부 할 필요가 없습니다.

참조 : http://www.html5rocks.com/en/tutorials/getusermedia/intro/

---

jeffreyveon의 대답은 사용자가 거부를 선택할 가능성을 줄이는 데 도움이됩니다. 한 번만 선택하면되기 때문입니다.

그녀가 거부를 클릭 한 경우 권한이 필요한 이유와 선택 사항을 업데이트하는 방법을 설명하는 메시지를 제공 할 수 있습니다. 예를 들면 :

navigator.getUserMedia (
   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },

   // errorCallback
   function(err) {
    if(err === PERMISSION_DENIED) {
      // Explain why you need permission and how to update the permission setting
    }
   }
);

---

Chrome은 Permissions APIin을 구현하며 및 권한에도 navigator.permissions적용됩니다 .cameramicrophone

따라서 지금은를 호출하기 전에이 getUserMedia()API를 사용하여 카메라 및 마이크의 권한 상태를 쿼리 할 수 ​​있습니다.

 navigator.permissions.query({name: 'microphone'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

 navigator.permissions.query({name: 'camera'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

성공하면 , 또는을 permissionObj.state반환 합니다.deniedgrantedprompt

여기에 유용한 SF 질문 / 답변

크로스 브라우저 솔루션의 경우 다음과 같이 getUserMedia()Promise가 호출 된 시점과 거부되거나 해결 되는 시점 간의 시간 차이를 모니터링하는 간단한 방법이 있습니다 .

// In the Promise handlers, if Date.now() - now < 500 then we can assume this is a persisted user setting
var now = Date.now();
navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(function(stream) {
  console.log('Got stream, time diff :', Date.now() - now);
})
.catch(function(err) {
  console.log('GUM failed with error, time diff: ', Date.now() - now);
});

이 Medium 기사 는 더 자세한 내용을 제공합니다.

도움이 되었기를 바랍니다!

---

아래 사항에 유의하십시오.

1. Localhost: In Localhost Chrome Browser asking permission only one time and Firefox every pageload.

2. HTTPS: Both Browsers Chrome and Firefox asking permission only one time.

---

The updated answer to this is that Chrome (currently testing on 73) no longer continuously prompts for camera access when the request is over HTTP.

Firefox however, does.

ReferenceURL : https://stackoverflow.com/questions/15993581/reprompt-for-permissions-with-getusermedia-after-initial-denial