H5如何调用手机摄像头？

最新推荐文章于 2024-08-03 22:32:10 发布

草巾冒小子

最新推荐文章于 2024-08-03 22:32:10 发布

阅读量5.9k

点赞数 5

分类专栏： CSS 3 文章标签： css

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80924337

版权

CSS 3 专栏收录该内容

60 篇文章 3 订阅

订阅专栏

H5如何调用手机摄像头？

本文仅简单叙述一下，调用的方式。
请看代码： <input type="file" accept="image/*" capture="camera">

下面是开发时遇到的问题和疑问：

如何调用前置摄像头？
如何只能选择video视频？
如何只能选择图片？
如何允许进行选择一张图？
如何允许进行多图选择？

下面我们通过一个简单的例子说明一下：

简单案例，全部代码，示下：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>H5调用手机摄像头</title>
	<style>  
	</style>  
</head>  
<body>  
<h3>HTML5调用手机摄像头，进行拍照，实时上传</h3>
<div>  
	<h3>image图片</h3>
	<input type="file" accept="image/*" capture="camera">  
	<h3>image图片 – 多选</h3>
	<input type="file" accept="image/*"  multiple> 
	<hr />
	<h3>image图片 - 前置摄像头调用</h3>
	<p>重点来了，iOS 10.3以后可以通过给 input[type='file'] 的标签里指定 capture="user" 来调用手机前置摄像头了。</p>
	<p><b>注意：</b>如果手机不支持这个特性还是使用的是后置摄像头。</p>
	<input type="file" accept="image/*"  capture="user"> 
	<p>经过实际测试，Android和IOS两种系统的手机调用的还是后置摄像头！！</p>
	<hr />
	
	<h3>video视频</h3>
    <input type="file" accept="video/*" capture="camcorder"> 
	<hr />
	
	<h3>audio音频</h3>
    <input type="file" accept="audio/*" capture="microphone">  
</div>  
</body>  
</html>