1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</title>
6 <style>
7 #video { border: 1px solid #ccc; display:inline-block; }
8 #canvas { border: 1px solid #ccc; display:inline-block;}
9 #take_photo{background-color:orange;width:100px;height:30px;border:0px;}
10 </style>
11 </head>
12 <body>
13 <video id="video" width="480" height="320" autoplay></video>
14 <canvas id="canvas" width="480" height="320"></canvas>
15 <input id="take_photo" name="take_photo" value="拍照" type="button" />
16 </body>
17 </html>
18
19 <script type="text/javascript">
20 window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
21 window.addEventListener("DOMContentLoaded", function () {
22 var canvas = document.getElementById("canvas"), //画布容器
23 context = canvas.getContext("2d"), //创建绘画对象
24 video = document.getElementById("video"), //视频容器
25 videoobj = { "video": true },
26 errback = function (error) {
27 console.log("error", error.code);
28 };
29 if (navigator.getUserMedia) {
30 navigator.getUserMedia(videoobj, function (stream) {
31 video.src = stream;
32 }, errback);
33 } else if (navigator.webkitGetUserMedia) {//chrome
34 navigator.webkitGetUserMedia(videoobj, function (stream) {
35 video.src = window.URL.createObjectURL(stream) || stream;
36 }, errback)
37 }
38 else if (navigator.mozGetUserMedia) {//firefox
39 navigator.mozGetUserMedia(videoobj, function (stream) {
40 video.src = window.URL.createObjectURL(stream) || stream;
41 }, errback)
42 }
43 else if (navigator.msGetUserMedia) {//IE
44 navigator.msGetUserMedia(videoobj, function (stream) {
45 video.src = window.URL.createObjectURL(stream) || stream;
46 }, errback)
47 }
48 video.play();
49 document.getElementById("take_photo").addEventListener("click", function () {
50 context.drawImage(video, 0, 0, 480, 320); //视频截屏
51 });
52 }, false);
53 </script>
