IOS
通过capture='user’属性来调用前置摄像头
capture='camera’调用后置摄像头
苹果手机测试可用安卓不行（Android手机怎么弄都是后置的摄像头。。。。）
<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- 使页面适配手机屏幕 --><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title></title><!-- 引入JQuery的JS文件 --><script src="/jquery/3.2.1/jquery.min.js"></script></head><body><!-- 这里是通过点击某个Div来隐式创建一个 input 控件，然后实现直接访问相机的功能。--><div id="demoForClick"><div id="btnID">这里是直接获取iOS相机功能</div></div><!-- 换行 --><br/><br/><br/><div><!-- 直接访问相机功能进行拍照 --><label>ios照相机</label><input type="file" id='image' accept="image/*" capture='user'></div><!-- 换行 --><br/><br/><br/><script>// 隐式创建一个input控件，然后实现直接访问相册var inputUploadObj = '';$("#btnID").on("click", function() {inputUploadObj = document.createElement('input')inputUploadObj.setAttribute('id', 'input_upload_ID');inputUploadObj.setAttribute('type', 'file');// 添加这个属性，就可以唤起相机的功能inputUploadObj.setAttribute('capture', 'camera');// 这里如果不加属性 accept 是 "image/*" 或者 "video/*"，就默认打开摄像头，既可以拍照也可以录像inputUploadObj.setAttribute('accept', 'image/*');//inputUploadObj.setAttribute('accept', 'image/*');inputUploadObj.setAttribute("style", 'visibility:hidden');// 这里将创建的隐式input控件拼接到body的最后面，会增加页面的长度，所以要在适当的时候，移除掉这个隐式创建的input控件document.body.appendChild(inputUploadObj);// 这里是模拟点击了input控件inputUploadObj.click();});</script></body></html>
Android
Android使用navigator.mediaDevices来调用摄像头
属性facingMode: 'user’是前置摄像头
属性facingMode: {exact : ‘environment’}是后置摄像头
<!DOCTYPE html><html lang="en"><head><meta http-equiv="X-UA-Compatible" content="ie=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>摄像头拍照</title></head><body onload='init()'><video id="video"></video><div id='operators'><button id="capture">拍照</button> <button id="changeCamera">切换摄像头</button></div><canvas id="canvas" width="480" height="320"></canvas><script>var cameraFront="";//访问用户媒体设备的兼容方法function getUserMedia(constraints, success, error) {currentCamera=constraints;if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints,success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}let video = document.getElementById('video');let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');//视频流变量var localMediaStream;function success(stream) {//兼容webkit核心浏览器let CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源console.log(stream);//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();localMediaStream=stream;}function error(error) {alert(`访问用户媒体设备失败${error.name}, ${error.message}`);}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头 video和audio： {video : {width: 480, height: 320}} 使用前置摄像头, 代码如下: {video: {facingMode: 'user'}} 后置摄像头, 代码如下: {video: {facingMode: {exact : 'environment'}}}getUserMedia({audio: true,video: {facingMode: {exact : 'environment'}}}, success, error);} else {alert('不支持访问用户媒体');}document.getElementById('capture').addEventListener('click', function () {context.drawImage(video, 0, 0, 480, 320);})//当前摄像头var currentCamera;document.getElementById('changeCamera').addEventListener('click', function () {//关闭打开的摄像头localMediaStream.getTracks().forEach(function(track) {track.stop();});if(currentCamera.video.facingMode=='user'){getUserMedia({audio: true,video: {facingMode: {exact : 'environment'}}}, success, error);}else{getUserMedia({audio: true,video: {facingMode: 'user'}}, success, error);}})function init(){document.getElementById('operators').style.width=document.getElementById('video').style.width;document.getElementById('operators').style.textAlign="center";}</script></body></html>
