整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
切图网一个客户的webapp项目中需要用到 html5调用手机摄像头，找了很多资料，大都是 js调用api 然后怎样怎样，做了几个demo测试发现根本不行， 后来恍然大悟，用html5自带的 input file="" ，纯html5，并且不涉及到js ，就可以实现。代码如下：
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。
accept表示，直接打开系统文件目录。
其实html5的input:file标签还支持一个multiple属性，表示可以支持多选，如：
<input type="file" accept="image/*" multiple>
加上这个multiple后，capture就没啥用了，因为multiple是专门yong用来支持多选的。
切图社区（qietu.cn）原创。
两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程，今天再说一下利用html5在手机端调用摄像头以及录音的教程
在html5中可以利用type类型为file的input的标签调起手机的摄像头
例：html5调用手机摄像头进行拍照
<input type="file" accept="image/*" capture="camera">
例：html5调用手机摄像头进行录像
<input type="file" accept="video/*" capture="camera">
input 标签，不仅仅可以调用起手机的摄像头，还可以录音呢
例：
<input type="file" accept="audio/*" capture="microphone">
input accept 属性
accept属性可以限制可用文件的类型，当 input 标签的 type 属性为 file 时，可以规定服务器所接受的文件类型
例如：
accept="audio/*" 表示所有音频文件 accept="video/*" 表示视频文件 accept="image/"* 表示图片文件
当然你也可以使用文件后缀名的形式
例：
accept="image/png* 表示只接收后缀名为 png 的图片 accept="image/jpg* 表示只接收后缀名为 jpg 的图片 accept=".png, .jpg, .jpeg" 表示可以同时接收 png jpg jpeg 后缀的文件
input capture 属性
着web功能越来越强大，我们很多时候需要在web页面来获取摄像头进行操作，原生html5提供了对摄像头的支持，需要用户的同意授权，下面是一个基于 HTML5 的调用摄像头拍照并上传后台的示例代码：
html复制代码<!DOCTYPE html>
<html>
<head>
<title>拍照上传</title>
</head>
<body>
<video id="video" style="width:300px;height:200px;"></video>
<br>
<button id="btn-start">启动摄像头</button>
<button id="btn-stop">停止摄像头</button>
<button id="btn-capture">拍照上传</button>
<br>
<canvas id="canvas"></canvas>
<form id="form-upload" method="post" enctype="multipart/form-data">
<input type="file" id="input-file" name="file"/>
</form>
<script type="text/javascript">
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 启动摄像头
document.getElementById('btn-start').addEventListener('click', function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
}).then(function(stream) {
video.srcObject = stream;
}).catch(function(err) {
console.log("启动摄像头失败：" + err);
});
});
// 停止摄像头
document.getElementById('btn-stop').addEventListener('click', function() {
video.pause();
video.srcObject.getTracks()[0].stop();
video.srcObject = null;
});
// 拍照，并上传到后台
document.getElementById('btn-capture').addEventListener('click', function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
canvas.toBlob(function(blob) {
var formData = new FormData();
formData.append('file', blob, 'photo.jpg');
postRequest('/upload', formData, function(res) {
alert(res.message);
});
}, 'image/jpeg');
});
// 发送 POST 请求
function postRequest(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse(xhr.responseText);
callback(res);
}
};
xhr.send(data);
}
</script>
</body>
</html>
上述代码主要分为以下几个部分：
最后，需要注意的是，在本地调试和开发时，特别是在 Windows 操作系统下使用 Chrome 浏览器访问时，可能会遇到摄像头不能正常运行的情况。这时可以打开地址栏，在目标请求前加上 --unsafely-treat-insecure-origin-as-secure="http://localhost:8080" 参数（其中端口号需替换成实际的本地服务端口），即可获得权限，进行摄像头使用。
*请认真填写需求信息，我们会在24小时内与您取得联系。
