web-dev-qa-db-fra.com

Navigator.mediaDevices.getUserMedia ne fonctionne pas sur iOS 12 Safari

Depuis iOS 12, navigator.mediaDevices.getUserMedia() renvoie une erreur dans Safari.

Pour recréer cela, ouvrez iPhone Web Inspector , puis exécutez cet extrait de code dans la console:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
  .then(function() {
    console.log('getUserMedia completed successfully.');
  })
  .catch(function(error) {
    console.log(error.name + ": " + error.message);
  });

Vous verrez que cela fonctionne correctement dans les navigateurs de bureau et dans iOS 11 Safari, mais échoue dans iOS 12 Safari.

NotAllowedError: la demande n'est pas autorisée par l'agent utilisateur ou la plate-forme dans le contexte actuel, peut-être parce que l'utilisateur a refusé l'autorisation.

Une idée pourquoi?

note: cela se produit avant que l'utilisateur ne soit invité à indiquer si sa caméra est accessible, ce qui exclut la possibilité que cela soit dû au fait que l'utilisateur a refusé l'autorisation.

iosiphonewebrtcgetusermediaios12
4
Severisth

Pour l'instant NotAllowedError immédiat, il existe deux raisons possibles:

1. Requêtes getUserMedia https

Safari semble nécessiter https pour l'accès à la caméra et au micro, à la fois sous iOS et OSX.

Avec un lien https , iOS Safari 12 fonctionne pour moi; même lien dans http obtient NotAllowedError.

Chrome a la même exigence. Ceci est cohérent avec la direction de la spécification, qui récemment a restreint getUserMedia à des contextes sécurisés. Les navigateurs qui n'ont pas encore mis à jour exposent toujours navigator.mediaDevices dans http, mais getUserMedia refuse toujours avec NotAllowedError. 

À l'avenir, attendez des navigateurs qu'ils suppriment mediaDevices entièrement dans http afin de se conformer à la spécification. 

2. getUserMedia requiert une politique de fonctionnalité dans les iframes cross-Origin.

Cela semble nouveau avec Safari 12. Dans les iframes, la stratégie de fonctionnalité de getUserMedia est désactivée par défaut pour le contenu d'origine multiple.

Cela fonctionne pour moi:

<iframe
  allow="camera;microphone"
  src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

Cela ne fonctionne pas :

<iframe src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

... et en plus d’échouer avec NotAllowedError, Safari signale dans la console Web:

The top-level frame has prevented a document with a different security Origin to
call getUserMedia.

Ceci est également une mise à jour récente de the spec .

3
jib

La définition de ces trois attributs avant d'appeler getUserMedia a résolu le problème pour moi:

    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

Pour une raison quelconque, video.setAttribute() fonctionne, mais le fait d'essayer d'attribuer la valeur directement à l'objet vidéo, par exemple video.muted = '', ne fonctionne pas.

De plus, il semble qu'il n'est pas nécessaire d'appeler video.play(). 

Définir simplement le video.srcObject au flux renvoyé par getUserMedia a fonctionné pour moi.

Cet article medium contient un lien vers une démo et un code source opérationnels.

0
braitsch