-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
102 lines (85 loc) · 3.34 KB
/
index.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html5调用摄像头并拍照</title>
<meta content="" name="Keywords" />
<meta content="" name="Description"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no, email=no">
<meta name="HandheldFriendly" content="true" />
</head>
<body>
<style type="text/css">
*{ padding:0; margin:0; }
body{ padding:0 10px }
h1,h3,h4{ margin:10px 0; }
#video{ background:#000; display:block; }
#snap{ width:100px; height:40px; line-height:40px; margin:10px 0; }
#photo{ width:320px; height:320px; background-repeat:no-repeat; background:#000 }
#text{ width:320px; height:200px; }
</style>
<h1>html5调用摄像头并拍照</h1>
<h3 id="support"></h3>
<video id="video" width="320" height="320"></video>
<button id="snap" >拍照</button>
<canvas id="canvas" style="display:none" width="320" height="320"></canvas>
<div id="photo"></div>
<h4>获取的base64位PNG图像</h4>
<textarea id="text"></textarea>
<script>
//判断浏览器是否支持HTML5 Canvas
window.onload = function () {
try {
//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "浏览器支持HTML5 CANVAS";
takePhotos();
}
catch (e) {
document.getElementById("support").innerHTML = "浏览器不支持HTML5 CANVAS";}
};
//拍照主函数
function takePhotos(){
//这段代 主要是获取摄像头的视频流并显示在Video 签中
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video");
function successCallback(stream) {
// Set the source of the video element with the stream from the camera
if (video.mozSrcObject !== undefined) {
video.mozSrcObject = stream;
} else {
video.srcObject = stream;
}
video.play();
}
function errorCallback(error) {
alert('错误代码: [CODE ' + error.code + ']');
// Display a friendly "sorry" message to the user
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
// Call the getUserMedia method with our callback functions
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, successCallback, errorCallback);
} else {
alert('浏览器不支持getUserMedia.');
// Display a friendly "sorry" message to the user
}
//这个是拍照按钮的事件，
document.getElementById("snap").onclick = function(){
context.drawImage(video, 0, 0, 320, 320);
//获取浏览器页面的画布对象
var canvans = document.getElementById("canvas");
//以下开始编 数据
var imgData = canvans.toDataURL();
//将图像转换为base64数据
var base64Data = imgData.substr(22);
//将获得的base64数据设置为photo的背景图
document.getElementById("photo").style.backgroundImage="url(data:image/png;base64,"+base64Data+")";
document.getElementById("text").innerHTML=base64Data;
}
}
</script>
</body>
</html>