一、开始
最近各种笔试都会要求开启摄像头，我觉得很神奇，就看了一下文档，原来是调用navigator.getUserMedia这个 API，然后是利用 canvas 的 drawImage 方法来实现拍照
二、模拟
话不多说，直接上代码，很奇怪的是为什么画图的时候宽高比是 2：1，注意 https 协议才能使用这个接口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
<body>
<video id="video"></video>
<button id="camera">点击拍照</button>
<canvas id="pic" style="height:300px;width: 300px"></canvas>
<script>
var video = document.getElementById('video');
// 成功会返回流，调用window.URL.createObjectURL来读取数据
var success = function(stream) {
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
video.play();
};
}
var fail = function(err) {
console.log("发生错误: " + err.name);
}
navigator.getUserMedia({video: {height: 300, width:300}},success, fail);
var ctx = document.getElementById('pic').getContext('2d');
document.getElementById("camera").addEventListener("click",function(){
ctx.drawImage(video,0, 0, 300, 150);
});
</script>
</body>
</html>
|