标签：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>摄像头调用</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" charset="utf-8" /> 6 <style type="text/css"> 7 video,canvas{ 8 margin-top: 10px; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /> 14 <input type="button" title="关闭摄像头" value="关闭摄像头" onclick="shutdown()"><br/> 15 <video height="200px" autoplay="autoplay" poster="cover.png" ></video><hr/> //poster是video的封面图片，可以自己加一个，也可以直接去掉 16 17 <input type="button" title="拍照" value="拍照" onclick="getPhoto();"/><br/> 18 <canvas id="canvas1" height="200px" ></canvas> 19 20 <script type="text/javascript"> 21 var video = document.querySelector(‘video‘); 22 23 var canvas1 = document.getElementById(‘canvas1‘); 24 var context1 = canvas1.getContext(‘2d‘); 25 26 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 27 window.URL = window.URL || window.webkitURL || window.mozURL || window.msUR; 28 29 var exArray = []; //存储设备源ID 30 MediaStreamTrack.getSources(function (sourceInfos) { 31 for (var i = 0; i != sourceInfos.length; ++i) { 32 var sourceInfo = sourceInfos[i]; 33 //这里会遍历audio,video，所以要加以区分 34 if (sourceInfo.kind === ‘video‘) { 35 exArray.push(sourceInfo.id); 36 } 37 } 38 }); 39 40 function getMedia() { 41 if (navigator.getUserMedia) { 42 navigator.getUserMedia({ 43 ‘video‘: { 44 ‘optional‘: [{ 45 ‘sourceId‘: exArray[1] //0为前置摄像头，1为后置 46 }] 47 }, 48 ‘audio‘:false //关闭声音 49 }, successFunc, errorFunc); //success是获取成功的回调函数 50 } 51 else { 52 alert(‘Native device media streaming (getUserMedia) not supported in this browser.‘); 53 } 54 } 55 function shutdown() { 56 successFunc(null); 57 } 58 function successFunc(stream) { 59 //alert(‘Succeed to get media!‘); 60 if (video.mozSrcObject !== undefined) { 61 //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持 62 video.mozSrcObject = stream; 63 } 64 else { 65 video.src = window.URL && window.URL.createObjectURL(stream) || stream; 66 } 67 } 68 function errorFunc(e) { 69 alert(‘Error！‘+e); 70 } 71 //拍照 72 function getPhoto() { 73 context1.drawImage(video, 0, 0,270,200); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。 74 } 75 </script> 76 </body> 77 </html>
标签：
原文地址：http://www.cnblogs.com/zxjwlh/p/4523200.html
