使用getUserMedia这个API来获取摄像头的权限并实现拍照
在线体验：https://811w1z2xwj.codesandbox.io/
下面是源码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用js调用设备摄像头并实现拍照</title>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<style type="text/css">
*{margin:0;padding:0}video{width:200px}button{width:100px;height:60px}
</style>
</head>
<body>
<div class="box">
<video src=""></video>
<button class='shot'>拍照</button>
<canvas id='canvas'></canvas>
<img src=''>
</div>
<script type="text/javascript">
// 视频大小
var constraints = {audio: true, video: {width: 200,height: 250}};
// 开启视频
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
console.log('getUserMedia:', mediaStream)
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
// 使用canvas进行拍照
var canvas = document.getElementById('canvas')
$('button').on('click', function () {
canvas.getContext('2d').drawImage(video, 0, 0, 200, 250);
$('img').css('src', canvas.toDataURL("image/png"))
})
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>
</body>
</html>
这么牛逼的功能，兼容性怎么样，亲测chrome和火狐可以，iOS嘛，看下面webkit官网截图
不知道苹果的工程师在考虑啥，隔壁都实现好几年了
文档地址：https://webkit.org/status/#feature-mediastream-recording-api
注意，如果使用chrome查看代码需要在https协议或者localhost下才能生效，建议使用火狐查看
9312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
