HTML userMedia faceMode：“环境”在Android手机上不起作用

如何解决HTML userMedia faceMode：“环境”在Android手机上不起作用

它一直使用前置摄像头而不是后置摄像头 这是我的代码：我添加了FaceingMode：{exact：“ environment”}，但是不起作用

const constraints = {
    video: true,facingMode: { exact: 'environment' }
};

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
    console.log("Let's get this party started")
}
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {video.srcObject = stream});
function displayImage()
{
    const selectedFile = document.getElementById('fileinput')
    //var image =document.getElementById('output')
    //image.src = URL.createObjectURL(selectedFile.files[0]);
    //selectedFile.files[0]
    const img = new Image()
    img.src = URL.createObjectURL(selectedFile.files[0])
    canvas.width = video.videoWidth
    canvas.height = video.videoHeight
    video.style.display="none"
    canvas.style.display ="inline"
    console.log(img)
    console.log("image uploaded")

    img.onload = function() {
        canvas.getContext('2d').drawImage(img,video.videoWidth,video.videoHeight);
        console.log('the image is drawn');
    }

}

解决方法

facingMode约束未完全实现，尤其是在移动设备中。

我发现label对象的device成员包含一个字符串back（用于面向环境的摄像头）和front（用于一个面向用户的摄像头）各种移动设备（Android和iOS）。 （有时这些字符串部分为大写。）因此您可以执行类似的操作。与facingMode相比，这有点像毛毛球，但确实可以。

/* get user's permission to muck around with video devices */
const tempStream = await navigator.mediaDevices.getUserMedia({video:true})
const devices = navigator.mediaDevices.enumerateDevices()
let frontDeviceId
let backDeviceId
if (devices.length > 0) {
  /* defaults so all this will work on a desktop */
  frontDeviceId = devices[0].deviceId;
  backDeviceId = devices[0].deviceId;
}
/* look for front and back devices */
devices.forEach (device => {
  if( device.kind === 'videoinput' ) {
    if( device.label && device.label.length > 0 ) {
      if( device.label.toLowerCase().indexOf( 'back' ) >= 0 ) 
        backDeviceId = device.deviceId
      else if( device.label.toLowerCase().indexOf( 'front' ) >= 0 )
        frontDeviceId = device.deviceId
    }
  }
}
/* close the temp stream */
const tracks = tempStream.getTracks()
if( tracks ) 
  for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
/* open the device you want */
const constraints = {
  video: true,deviceId: {exact: backDeviceId }
}
const stream = navigator.mediaDevices.getUserMedia(constraints)

 

,

您的约束设置不正确。

/../../pages/_app.js是facingMode约束的成员，因此应该是

video

Live Fiddle可以从带有后置摄像头的设备上运行。