Android 使用HTML5启用后置摄像头

我正在使用MVC ASP.Net 4 HTML5进行一个项目。默认浏览器是google chrome v29.0.1547.57。我可以使用这些工具进行交互和拍照，但只能使用前置摄像头，如何启用后置摄像头？ 平板电脑的特点：三星Galaxy Tab 2 我希望您能帮助我查看一下如何使用

MediaStreamTrack.getSources(gotSources);

然后可以选择源并将其作为可选项传递到getUserMedia

var constraints = {
  audio: {
    optional: [{sourceId: audioSource}]
  },
  video: {
    optional: [{sourceId: videoSource}]
  }
};
navigator.getUserMedia(constraints, successCallback, errorCallback);

从v30开始，它现在在稳定的Chrome和移动设备中完全可用。可以在上找到演示。这将允许访问前后摄像头

您会发现许多演示都依赖于不推荐使用的功能：

MediaStreamTrack.getSources() 

MediaDevices.enumerateDevices()

从Chrome 45和FireFox 39开始，您需要使用以下功能：

MediaStreamTrack.getSources() 

MediaDevices.enumerateDevices()

例如：

如果navigator.mediaDevices | |！navigator.mediaDevices.enumerateDevices{ console.LogEnumerate设备不受支持。； 回来 } //列出摄像机和麦克风。 navigator.mediaDevices.enumerateDevices .功能设备{ 设备{ console.logdevice.kind+：+device.label+ id=+device.deviceId； }; } 凯西先生{ console.loge.name+：+e.message；

---

}; 上次我开发代码时，这里是我使用的版本：您直接调用代码中的函数whichCamera，如果您在计算机中运行，您指定哪个摄像头用户、环境或计算机

`//----------------------------------------------------------------------
//  whichCamera(Type)
//    For smartphone or tablet :
//     Start the type={user,environment} camera.
//    For computer it's simple :
//      type = "computer".
//----------------------------------------------------------------------
var streamSrc, cameraType;
function whichCamera(type){

  var cameraFacing;
  cameraType = type;
  if( type == "user")
    cameraFacing = 0;
  else if( type == "environment")
    cameraFacing = 1;
  else if( type == "computer"){
    cameraFacing = 2;
  }
  console.log(type+" index : "+cameraFacing);

  //  Here we list all media devices, in order to choose between
  //  the front and the rear camera.
  //      videoDevices[0] : user Camera
  //      videoDevices[1] : environment Camera
  //  Then set the video resolution.
  navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    var videoDevices, videoDeviceIndex, constraints;
    //  Initialize the array wich will contain all video resources IDs.
    //  Most of devices have two video resources (Front & Rear Camera).
    videoDevices = [0,0];
    //  Simple index to browse the videa resources array (videoDevices).
    videoDeviceIndex = 0;
    //  devices.forEach(), this function will detect all media resources (Audio, Video) of the device
    //  where we run the application.
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
      // If the kind of the media resource is video,
      if (device.kind == "videoinput") {
        //  then we save it on the array videoDevices.
        videoDevices[videoDeviceIndex++] =  device.deviceId;
        console.log(device.deviceId+" = "+videoDevices[videoDeviceIndex-1]);
      }
    });
    console.log("Camera facing ="+cameraFacing+" ID = "+videoDevices[videoDeviceIndex-1]);

    // Here we specified which camera we start,
    //  videoDevices[0] : Front Camera
    //  videoDevices[1] : Back Camera
    if( cameraFacing != "computer"){
      constraints = { deviceId: { exact: videoDevices[cameraFacing]  }};
      return navigator.mediaDevices.getUserMedia({ video:
                                                          constraints,
                                                          width: { min: 1280, ideal: 1600, max: 1920 },
                                                          height: { min: 720, ideal: 1200, max: 1080 }
                                                  }
                                                );
    }else
      return navigator.mediaDevices.getUserMedia({ video: true });
    })
    //  Then we retrieve the link to the video stream.
    .then(stream => {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
        localMediaStream = stream;
        console.log(localMediaStream +" = "+ stream)
      } else if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = stream;
        console.log(video.mozSrcObject +" = "+ stream)
      } else if (video.srcObject !== undefined) {
        video.srcObject = stream;
        console.log(video.srcObject +" = "+ stream)
      } else {
        video.src = stream;
        console.log(video.src +" = "+ stream)
      }
      streamSrc = stream;
    })
    .catch(e => console.error(e));

}

---

在三星S8的Chrome中，我可以使用facingMode=environment从“后摄像头”拍摄视频。默认设置似乎是“前”摄像头

在TypeScript中：

    const video = document.getElementById("video");
    const constraints = {
        advanced: [{
            facingMode: "environment"
        }]
    };
    navigator.mediaDevices
        .getUserMedia({
            video: constraints
        })
        .then((stream) => {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });

参考：

---

Kinlan我试用了测试版google chrome，效果很好，我希望最终版本能很快更新我的浏览器，谢谢你的提示。请注意，getSources现在已经不推荐使用了@Kinlan我很难强迫Chrome使用Nexus5上测试的后置摄像头，即使我硬编码源代码。。。Firefox和Opera会自动询问用户要使用哪个摄像头。有什么想法吗？还值得一提的是，Chrome仅支持https连接上的摄像头。嗨，Lightning2050我可以获得完整的代码吗？如何切换我尝试过的源代码，但它不起作用！！提前谢谢嘿！看看这个：@Nahdiroviç你可能有什么html可以搭配吗？JS only在移动chrome上对我不起作用。@MajaJelen，你可以在哪里找到HTML代码，以适应我的JS代码。检查我的代码7月16日17日15:53.100%工作解决方案的最新版本。请参阅切换相机的解决方案对我来说非常有用，我在项目中使用了您的代码和此代码进行了一些修改