HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

浏览数：27 / 时间：2015年06月11日

 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>