Comment forcer un rapport 16: 9 avec getUserMedia sur tous les appareils?

Question

Je dois utiliser getUserMedia pendant que la vidéo est réglée pour enregistrer en 16: 9 résolution.

Mon code fonctionne sur la plupart des ordinateurs de bureau et sur Android 7 et au-dessus:

navigator.getUserMedia({ 
    audio: true, 
    video: { 
     mandatory: { 
      minWidth: 380, 
      minHeight: 214, 
      maxWidth: 380, 
      maxHeight: 214 
     } 
    } 
}) 

Mais sur Android et 6 ci-dessous, et sur certains postes de travail aussi (ne peut pas comprendre exactement ce qui), getUserMedia pauses et aucune image n'est disponible à partir de l'appareil photo.

Cela fonctionne sur tous les appareils et de bureau, mais avec un rapport de résolution par défaut de 4: 3, alors que je dois 16: 9:

navigator.getUserMedia({ 
    audio: true, 
    video: true 
}) 

J'ai essayé en omettant le mandatory, pas de chance.

Pour ajouter à ma confusion, les appareils iOS (11 beta) et Android nécessitent passer l'argument facingMode:

video: { facingMode: 'user' } 

Ainsi, il semble que le passage des arguments width et height casse getUserMedia sur certains ordinateurs de bureau et les appareils tels que Android 5 et 6.

Existe-t-il un moyen de forcer un rapport 16: 9 sur tous les appareils? Quelle est la méthode correcte et conventionnelle de capture d'une vidéo avec des dimensions spécifiques?

Answer 1

Vous supposez que toutes les caméras prennent en charge le format 16: 9 ou que tous les navigateurs recadreront la vidéo pour vous. Pas si. Vous utilisez également une API obsolète. Essayez the latest API (fiddle, samples):

var constraints = {video: {width: 320, height: 180, facingMode: "user"}}; 

navigator.mediaDevices.getUserMedia(constraints) 
.then(stream => video.srcObject = stream) 
.then(() => new Promise(resolve => video.onloadedmetadata = resolve)) 
.then(() => log(video.videoWidth +"x"+ video.videoHeight)) 
.catch(e => console.log(e)); 

getUserMedia à son coeur est une caméra/micro découverte API: Tous les min, max, exact, ideal mots-clés existent pour décrire vos contraintes, à savoir votre tolérance pour pas obtenir ce que vous voulez.

je suggère la contrainte aspectRatio, sauf que personne ne met en œuvre que encore, et il est juste une autre contrainte pour diminuer votre tolérance.

À l'heure actuelle, je crois que seul Chrome descend et recadre la sortie de la caméra à la taille exacte que vous voulez. Il s'avère que c'est ce que la plupart des gens veulent, mais découvre peu à propos de l'appareil photo de l'utilisateur. D'autres navigateurs peuvent suivre, car il n'y a pas eu beaucoup de demande pour autre chose, mais ils ne sont pas actuellement en baisse. Notez cependant que même Chrome ne sera pas mis à niveau, donc si vous utilisez Chrome sur Android, il est possible que vous ayez demandé une résolution plus élevée que celle de votre appareil Android 6. Vérifiez dans ce cas OverconstrainedError et réessayez avec des valeurs inférieures. En bref, vous n'obtiendrez pas toujours la taille exacte souhaitée, car cela dépend en fin de compte de l'appareil photo de l'utilisateur et de son navigateur.

Mais HTMLVideoElement downscales sur la lecture de toute façon, et vous pouvez use CSS recadrer.