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>