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

最新推荐文章于 2024-09-30 18:20:56 发布

woshiabc111

最新推荐文章于 2024-09-30 18:20:56 发布

阅读量6.5k

点赞数 14

分类专栏： H5

本文链接：https://blog.csdn.net/woshiabc111/article/details/119646088

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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="https://cdn.bootcss.com/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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>