0
179
VisualizaçõesCómo seleccionar la resolución más alta entre varias cámaras traseras en getUserMedia()
Estoy usando un teléfono Android. Cuando trato de mostrar la imagen de la cámara trasera en una página web, la imagen siempre está "ampliada". Espero que la imagen de la cámara sea la misma que veo en la cámara nativa, sin embargo, no lo es.
Recientemente, descubrí que cuando enumeré la fuente de la cámara, hay varias fuentes de la cámara trasera. Así que creo que la "imagen ampliada" de arriba es simplemente porque usé la primera cámara trasera listada por defecto.
Me pregunto cómo elegir la cámara trasera adecuada.
Un mismo caso que encontré en internet 
Perdón por la mala presentación. Si no entiende mi pregunta, puedo explicarle mejor.
'use strict'; var videoElement = document.querySelector('video'); var audioSelect = document.querySelector('select#audioSource'); var videoSelect = document.querySelector('select#videoSource'); audioSelect.onchange = getStream; videoSelect.onchange = getStream; getStream().then(getDevices).then(gotDevices); function getDevices() { return navigator.mediaDevices.enumerateDevices(); } function gotDevices(deviceInfos) { window.deviceInfos = deviceInfos; // make available to console console.log('Available input and output devices:', deviceInfos); for (const deviceInfo of deviceInfos) { const option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'audioinput') { option.text = deviceInfo.label || `Microphone ${audioSelect.length + 1}`; audioSelect.appendChild(option); } else if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`; videoSelect.appendChild(option); } } } function getStream() { if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } const audioSource = audioSelect.value; const videoSource = videoSelect.value; const constraints = { audio: {deviceId: audioSource ? {exact: audioSource} : undefined}, video: {deviceId: videoSource ? {exact: videoSource} : undefined} }; return navigator.mediaDevices.getUserMedia(constraints). then(gotStream).catch(handleError); } function gotStream(stream) { window.stream = stream; // make stream available to console audioSelect.selectedIndex = [...audioSelect.options]. findIndex(option => option.text === stream.getAudioTracks()[0].label); videoSelect.selectedIndex = [...videoSelect.options]. findIndex(option => option.text === stream.getVideoTracks()[0].label); videoElement.srcObject = stream; } function handleError(error) { console.error('Error: ', error); }1 Respostas
Responde à pergunta0
No estoy seguro si es correcto. Pero al menos en este momento, funciona con mis teléfonos Android que tenían problemas antes de esta solución. Parece que el que tiene 0 es siempre el adecuado.
var constraints = { facingMode: 'environment' }; function gotDevices(mediaDevices) { mediaDevices.forEach(mediaDevice => { if (mediaDevice.kind === 'videoinput') { if( !isIOS && mediaDevice.label.includes("0") ){ constraints = { deviceId : mediaDevice.deviceId }; return; } } }); } navigator.mediaDevices.enumerateDevices().then(gotDevices).then(function(){ navigator.mediaDevices .getUserMedia({ audio: false, video: constraints }) .then(function(stream){ window.stream = stream; video.srcObject = stream; }) .catch(handleError); });