html5在手机端调用摄像头

qq614756883

于 2021-11-16 16:01:48 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript js 文章标签： html5 html 前端

原文链接：https://blog.csdn.net/playboyanta123/article/details/72520618

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input file capture</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui, shrink-to-fit=no">
<style>
body {font-family: Arial, Roboto, 'Droid Sans', 'Hiragino Sans GB', 'Microsoft YaHei', 'Simsun', STXihei, 'sans-serif';font-size: 14px;}
dl:not(:last-child) {overflow: hidden;padding: 10px;margin-bottom: 10px;border-bottom: 1px dashed #dedede;}
dt {padding-bottom: 10px;font-weight: bold;color: #f32600;}
dd {margin: 0;padding:5px 0 0 20px;border-left: 2px solid #cddc39;}
</style>
</head>
<body>
<dl>
	<dt>普通没有 <code>capture</code> 属性</dt>
	<dd><input type="file"></dd>
	<dd><p>没有 <code>capture</code> 捕获属性时，仅为选择上传文件。</p></dd>
	<dt><code>capture=""</code> 为空的时候</dt>
	<dd><input type="file" capture=""></dd>
	<dd><p>当 <code>capture</code> 捕获属性为空时，基于 <code>capture</code> 的值为布尔值类型，所以这个时候可以看到启用了摄像头，<strong>后置摄像头</strong>开启拍照或者录像功能。</p></dd>
	<dt><code>capture="user"</code> 前置摄像头</dt>
	<dd><input type="file" capture="user"></dd>
	<dd><p>当 <code>capture</code> 捕获属性为 <code>user</code> 时，开启前置摄像头的拍照或者录像功能。</p></dd>
</dl>
<dl>
	<dt>类型：视频 多个文件</dt>
	<dd><input type="file" accept="video/*" multiple=""></dd>
	<dd>
		<p>选择多个<strong>视频</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
	</dd>
	<dt>类型：图片 多个文件</dt>
	<dd><input type="file" accept="image/*" multiple=""></dd>
	<dd>
		<p>选择多个<strong>图片</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
	</dd>
	<dt>无类型要求 多个文件</dt>
	<dd><input type="file" multiple=""></dd><dd>
		<p>选择多个<strong>视频</strong>或者<strong>图片</strong>类型文件，未使用 <code>capture</code> 属性时。</p>
	</dd>
</dl>
<dl>
	<dt><code>capture="user"</code> 前置摄像头 视频</dt>
	<dd><input type="file" capture="user" accept="video/*" multiple=""></dd>
	<dd>
		<p>使用 <code>capture="user"</code> 开启前置摄像头时，设定为<strong>视频</strong>类型文件，手机中不会显示<em>照片</em>，同时 <code>multiple</code> 多文件上传无效。</p>
	</dd>
	<dt><code>capture="user"</code> 前置摄像头 图片</dt>
	<dd><input type="file" capture="user" accept="image/*" multiple=""></dd>
	<dd>
		<p>使用 <code>capture="user"</code> 开启前置摄像头时，设定为<strong>图片</strong>类型文件，手机中不会显示<em>视频</em>，同时 <code>multiple</code> 多文件上传无效。</p>
	</dd>
</dl>

</body>
</html>

<input type="file" capture="camera" accept="image/*" multiple>，这句html大家应该都知道是用来在手机端或者pc端上传多张图片的情况下使用的，现在我们着重来分析下

每个属性，以及新出的新特性的特点，后面会附上不同属性的demo测试。

在上面的HTML 的属性中，capture 的主要作用是捕获，对于移动端中就是开启摄像头了。如果没有这个属性就将会变成一个简单的上传文件按钮。

capture 开启摄像头来获取视频（音频？）或者照片（图片），值有camera和新出来的user；
accept 允许通过 input[type="file"] 上传的文件类型：
accept="audio/*" 上传音频（iOS中没测试成功，就放弃了）；
accept="video/*" 上传视频；
accept="image/*" 上传图片；
multiple 允许上传多个文件；

重点来了，iOS 10.3以后可以通过给 input[type='file'] 的标签里指定 capture="user" 来调用手机前置摄像头了（这件事千万不要跟产品能说，千万不要，不要...），如果手机不支持这个特性还是使用的是后置摄像头。

最后自己做了一个简单的 demo ，结合了 accept 和 multiple 属性，针对 input[type="file"] 这个上传按钮做了更多一点的测试。

大家可以用手机扫下面的二维码进行不同功能的测试，之所以说让你不要跟产品说，是因为兼容性非常不好，少给自己挖坑！！！

qq614756883

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5在手机端调用摄像头

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>input file capture</title><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.
复制链接

扫一扫