Który aparat otworzy API getUserMedia w urządzeniu mobilnym? Z przodu lub z tyłu?

Question

Podczas korzystania z API getUserMedia w celu uzyskania dostępu do kamery na pulpicie otworzy się kamera internetowa. Oczywiście pomaga to w komunikacji wideo. Ale która kamera jest wywoływana, gdy jest używana w urządzeniu mobilnym. Kamera przednia lub kamera tylna? do wyboru kamery?

Answer 1

Niestety, nie można (jeszcze?) Wybrać tego za pomocą kodu.

• Mozilla Firefox beta: Gdy użytkownik akceptuje dzielić kamery, on/ona również wybrać co kamera udostępnić.

• Wersja beta przeglądarki Chrome: mogłem używać tylko twarzy. Może być konfigurowalny, ale nie wiem jak ...

EDIT: w Chrome jest to możliwe, aby wybrać tyłem aparat programowo. Zobacz następną odpowiedź od Probot w tym wątku.

Answer 2

Istnieje rozwiązanie, w którym użytkownik może wybrać jedną z kamer.

Enable rear camera with HTML5

Oceniając sourceInfo.facing z następującego kodu, można wybrać kamerę ('użytkownik' lub 'środowisko') (który działa na obecnym Chrome> = 30): 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(); 

Answer 3

Odpowiedź brzmi: tak, w przypadku Androida jako domyślnej kamery, przednia (użytkownik) caerma jest w górze.Tak więc proponuję ten skrypt wybrać między przednią i tylną kamerą

//---------------------------------------------------------------------- 
    // 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));