H5调用安卓以及IOS前置摄像头_woshiabc111_h5调用前置摄像头

网络 02-07 5008

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>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body>  <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) { //最新的标准API navigator.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) { //旧版API navigator.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>