使用HTML5启用后置摄像头

我正在使用MVC ASP.Net 4 HTML5（默认浏览器为google-chrome v29.0.1547.57）开发项目，我可以使用这些工具进行交互，但只能使用前置摄像头拍照， 如何才能启用后置摄像头？ 平板电脑的特点：三星Galaxy Tab 2我希望你能帮助我

Answer 1

查看https://simpl.info/getusermedia/sources/ ，显示如何使用select源

MediaStreamTrack.getSources(gotSources); 

然后，您可以select源代码并将其作为可选项传递给getUserMedia

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

它现在完全可用在稳定的Chrome和移动（截至v30）

Answer 2

演示可以在https://webrtc.github.io/samples/src/content/devices/input-output/find。; 这将允许访问前方和后方的相机。

你会发现许多演示依赖于不推荐使用的函数：

 MediaStreamTrack.getSources() 

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

 MediaDevices.enumerateDevices() 

例：

 if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) { console.log("enumerateDevices() not supported."); return; } // List cameras and microphones. navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceId); }); }) .catch(function(err) { console.log(err.name + ": " + error.message); }); 

Answer 3

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

Answer 4

最后一次我开发了这个代码，所以这里是我使用的版本：你直接调用你的代码中的摄像头函数，如果你正在计算机中运行，你会说出相机“用户”，“环境”或“计算机”

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

Answer 5

在我的Samsung S8的Chrome上，我可以使用“facingMode”=“environment”从“后置摄像头”拍摄video。 默认似乎是“用户”（“前”摄像头）

在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(); }); 

ref： MediaTrackConstraints / facingMode