web-dev-qa-db-ja.com

最初の拒否後、getUserMedia（）を使用してアクセス許可を再入力する

一度拒否された後、getUserMedia（）でカメラ/マイクへのアクセスをリクエストするにはどうすればよいですか？

GetUserMediaを使用して、ユーザーのカメラにアクセスし、データをキャンバスにパイプします。そのビットはすべて正常に動作します。

テストでは、一度拒否されました。 ChromeおよびFirefoxのこの時点で、getUserMedia（）を使用した後続のリクエストはすべてデフォルトで拒否状態になります。

拒否された後、ページを読み込むたびにカメラ/マイクのアクセス許可を要求することで、ユーザーを困らせたくないのは明らかです。それはすでに位置情報APIで十分に迷惑です。

ただし、再度要求する方法が必要です。ユーザーが一度拒否を押したからといって、ウェブカメラへのアクセスをずっと拒否したいわけではありません。

私は仕様について読んで、しばらくの間グーグルで探していましたが、この問題について明確に何も見つけていません。

編集：さらなる調査では、Chromeで拒否をクリックすると、現在のサイトがブロックリストに追加されます。これはchrome：// settings/contentから手動でアクセスできます。メディアにスクロールします。 、ブロックされたサイトを削除します。

Chrome：// settings/contentへのリンクは機能しません（アクセス許可を再度有効にするために役立つリンクを追加したい場合）。

GetUserMediaの周りのパーミッションを扱うためのUX全体が悪臭を放ちます。 =（

javascriptwebrtcgetusermedia
54
Geuis

HTTPSを使用します。ユーザーが一度許可を与えると、それは記憶され、Chromeはそのページの許可を再度要求せず、メディアにすぐにアクセスできます。これは許可バーを強制する方法を提供しませんもう一度ユーザーに通知しますが、少なくともユーザーが許可を一度与えれば、それを尋ね続ける必要がないことを少なくとも確認します。

アプリがSSL（https：//）から実行されている場合、この許可は永続的です。つまり、ユーザーは毎回アクセスを許可/拒否する必要はありません。

参照： http://www.html5rocks.com/en/tutorials/getusermedia/intro/

16
jeffreyveon

jeffreyveonの答えは、ユーザーが1回だけ選択する必要があるため、ユーザーが拒否を選択する可能性を減らすのに役立ちます。

彼女が拒否をクリックした場合は、許可が必要な理由と選択を更新する方法を説明するメッセージを提供できます。例えば：

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
    }
   }
);
14
jrullmann

Chromeは_Permissions API_で _navigator.permissions_ を実装します。これはcameraとmicrophoneの両方のアクセス許可にも適用されます。

したがって、今のところ、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_はdenied、granted、またはPromptを返します。

役に立つSFの質問/回答 こちら

クロスブラウザソリューションの場合、単純なアプローチの1つは、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);
});
_

この 中記事 で詳細がわかります。

お役に立てれば！

4
Philippe Sultan

以下の点に注意してください。

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.

2
user6254696

これに対する更新された答えは、Chrome（現在73でテスト中））がリクエストがHTTPを介しているときにカメラアクセスのプロンプトを継続的に表示しないことです。

ただし、Firefoxはサポートします。

1
Adrian Lynch