切记，一定要用https协议的域名才能调起摄像头
上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 用于展示摄像头视频流 -->
<video id="video" autoplay style="width: 480px;height: 320px"></video>
<div>
<button id="capture" onclick="handleClickCapture()">拍照</button>
</div>
<!-- 展示拍摄的照片：画布 -->
<canvas id="canvas" width="480" height="320"></canvas>
</body>
</html>
<script>
var video = document.getElementById('video');
var capture = document.getElementById('capture');
var ctx = document.getElementById('canvas').getContext('2d');
/**
* 调用用户媒体设备
* @param constraints 配置信息
* @param success 成功回调函数
* @param error 失败回调函数
*/
function getUserMediaToPhoto(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
navigator.getUserMedia(constraints, success, error);
}
}
/**
* 成功回调函数
* @param stream 视频流
*/
function success(stream) {
var CompatibleURL = window.URL || window.webkitURL;
try {
video.src = CompatibleURL.createObjectURL(stream);
} catch (e) {
video.srcObject = stream;
}
video.play();
}
/**
* 失败回调
* @param error 错误对象
*/
function error(error) {
console.log('无法访问媒体设备', error);
}
if (navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia) {
getUserMediaToPhoto({video: {width: 480, height: 320}}, success, error);
} else {
alert('不支持访问用户媒体设备');
}
/**
* 拍照按钮点击事件
*/
function handleClickCapture() {
//使在画布上显示
ctx.drawImage(video, 0, 0, 480, 320);
//获取图片，这里获取到的是base64格式的文件
var image = ctx.canvas.toDataURL('image/png');
//下面可以根据自己的逻辑进行判断
}
</script>
获取画布图片出处
小结
实现了基本的摄像头调用和拍照，实现思路非常简单，基本上只是在调用api，唯一恶心的地方在于api版本比较多，不得不多做一些判断。具体的api介绍、使用和参数可以查看MediaDevices.getUserMedia()。
文章作者ianzhi,原文地址：www.dnote.cn/users/ianzh…
文章版权归作者所有，转载请保留此声明。
