Javascript Girl
  1. Javascript Girl
  3. Quelle caméra ouvrira-t-elle GetUserMedia API dans un appareil mobile? Avant ou arrière?
Intereting Posts
Pourquoi est-ce que je vois un comportement de logique JavaScript inconséquent en boucle avec une alerte () vs sans elle? Empêche le défilement horizontal sur jQuery Mobile Comment arrêter / remplacer une fonction JQuery TimeOut? Inverser les données de la grille HTML Existe-t-il une approche purement promise pour la cartographie / concaténation des collections? Générateurs de documentation ECMAScript 6 Comment faire pour que SVG fonctionne avec IE? Est-ce que supprimer un objet DOM (en Javascript) entraînera une fuite de la mémoire si un événement est attaché? Comment désactiver l'utilisation de certaines fonctions ES2015 avec ESLint 2? Tâche simple (SVG vs. Toile) Sélectionnez toutes les classes avec getElementsByClassName et cliquez sur Les requêtes d'origine croisée ne sont prises en charge que pour HTTP mais ce n'est pas un domaine interdisciplinaire Window.onerror ne lance pas dans Firefox Définir le titre dans la fenêtre popup Obtenir le contenu du fichier dans un script java

Quelle caméra ouvrira-t-elle GetUserMedia API dans un appareil mobile? Avant ou arrière?

Tout en utilisant getUserMedia API pour accéder à la caméra dans le bureau, il ouvrira la caméra web. Bien sûr, il est utile pour la communication vidéo. Mais quelle caméra est-elle appelée lorsqu'elle est utilisée dans un appareil mobile. La caméra avant ou la caméra arrière?. Il y a-t-il un code pour la sélection caméra?

Malheureusement, vous ne pouvez pas (encore?) Sélectionner ceci via le code.

  • Mozilla Firefox beta: Lorsque l'utilisateur accepte de partager une caméra, il sélectionne également la caméra à partager.

  • Chrome beta: j'ai seulement pu utiliser la caméra visage. Peut être configurable, mais je ne sais pas comment …

EDIT: En chrome, il est possible de sélectionner la caméra en arrière-plan par programme. Voyez la prochaine réponse de Probot dans ce sujet.

Il existe une solution où l'utilisateur peut sélectionner l'une des caméras.

Activer la caméra arrière avec HTML5

En évaluant sourceInfo.facing partir du code suivant, vous pouvez sélectionner une caméra ('utilisateur' ou 'environnement') (qui fonctionne sur chrome> = 30 actuel): https://simpl.info/getusermedia/sources/ 

 'use strict'; var videoElement = document.querySelector('video'); var audioSelect = document.querySelector('select#audioSource'); var videoSelect = document.querySelector('select#videoSource'); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; function gotSources(sourceInfos) { for (var i = 0; i !== sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; var option = document.createElement('option'); option.value = sourceInfo.id; if (sourceInfo.kind === 'audio') { option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1); audioSelect.appendChild(option); } else if (sourceInfo.kind === 'video') { option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1); videoSelect.appendChild(option); } else { console.log('Some other kind of source: ', sourceInfo); } } } if (typeof MediaStreamTrack === 'undefined'){ alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.'); } else { MediaStreamTrack.getSources(gotSources); } function successCallback(stream) { window.stream = stream; // make stream available to console videoElement.src = window.URL.createObjectURL(stream); videoElement.play(); } function errorCallback(error){ console.log('navigator.getUserMedia error: ', error); } function start(){ if (!!window.stream) { videoElement.src = null; window.stream.stop(); } var audioSource = audioSelect.value; var videoSource = videoSelect.value; var constraints = { audio: { optional: [{sourceId: audioSource}] }, video: { optional: [{sourceId: videoSource}] } }; navigator.getUserMedia(constraints, successCallback, errorCallback); } audioSelect.onchange = start; videoSelect.onchange = start; start();

La réponse est oui, pour Android comme caméra par défaut, le caerma avant (utilisateur) est en haut. Donc, je propose ce script pour choisir entre le caméra avant et arrière 

  //---------------------------------------------------------------------- // Here we list all media devices, in order to choose between // the front and the back camera. // videoDevices[0] : Front Camera // videoDevices[1] : Back Camera // I used an array to save the devices ID // which i get using devices.forEach() // Then set the video resolution. //---------------------------------------------------------------------- navigator.mediaDevices.enumerateDevices() .then(devices => { var videoDevices = [0,0]; var videoDeviceIndex = 0; devices.forEach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceId); if (device.kind == "videoinput") { videoDevices[videoDeviceIndex++] = device.deviceId; } }); var constraints = {width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 }, deviceId: { exact: videoDevices[1] } }; return navigator.mediaDevices.getUserMedia({ video: constraints }); }) .then(stream => { if (window.webkitURL) { video.src = window.webkitURL.createObjectURL(stream); localMediaStream = stream; } else if (video.mozSrcObject !== undefined) { video.mozSrcObject = stream; } else if (video.srcObject !== undefined) { video.srcObject = stream; } else { video.src = stream; }}) .catch(e => console.error(e));