[移动开发] H5调用安卓以及IOS前置摄像头

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> H5调用安卓以及IOS前置摄像头 -> 正文阅读

[移动开发]H5调用安卓以及IOS前置摄像头

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>

移动开发最新文章

Vue3装载axios和element-ui

android adb cmd

【xcode】Xcode常用快捷键与技巧

Android开发中的线程池使用

Java 和 Android 的 Base64

【Android Jetpack】DataStore

加:2021-08-13 12:13:24 更:2021-08-13 12:16:08

360图书馆购物三丰科技阅读网日历万年历 2025年3日历

-2025/3/4 7:33:43-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码