首页 > 代码库 > HTML5 PC、Mobile调用摄像头（navigator.getUserMedia）
HTML5 PC、Mobile调用摄像头（navigator.getUserMedia）
废话少说，先贴上代码
html:
1 <div id="main" class="masthead"> 2 <div id="face_scan_camera" class="container blackbg" style="height:792px; "> 3 <div style="width:1400px;margin:0 auto;"> 4 <video id="video" width="1400" height="790" autoplay="autoplay" style="margin:0 auto;position:relative;z-index:100;"></video> 5 </div> 6 <div class="camera-mask"></div> 7 <div class="camera-area" style="width:450px;height:350px;background:url(/images/lifescan/scan_kuang1.png) no-repeat;z-index:102;top:560px;left:780px;"> 8 <img src="/images/lifescan/scan_kuang1.png" /> 9 <div class="scan-area" style="height:585px;width:580px;display:none; ">10 <canvas id="canvas" width="1054" height="790" style="display:inline-block; margin:0 auto;position:relative;left:13px;top:70px;z-index:100;"></canvas> 11 </div>12 <a id="snap" ><img src="/images/lifescan/camera_btn.png" /></a>13 </div>14 </div>15 <div id="cream_loading" style="display:none;position:absolute; margin:-62px 0 0 -62px;top:50%;left:50%;height:124px;width:124px;z-index:2001;"><img src="/Images/cream_loading.gif"/></div> 16 </div>
js:
1 var sel, fr; 2 $(function () { 3 $(‘#canvas‘).hide(); 4 try { 5 sel = document.getElementById(‘fileselect‘); // get reference to file select input element 6 7 window.addEventListener("DOMContentLoaded", function () { 8 // Grab elements, create settings, etc. 9 var canvas = document.getElementById("canvas"), 10 context = canvas.getContext("2d"), 11 video = document.getElementById("video"), 12 videoObj = { "video": true }, 13 errBack = function (error) { 14 if (error.PERMISSION_DENIED) { 15 jAlert(‘用户拒绝了浏览器请求媒体的权限‘, ‘提示‘); 16 } else if (error.NOT_SUPPORTED_ERROR) { 17 jAlert(‘对不起，您的浏览器不支持拍照功能，请使用其他浏览器‘, ‘提示‘); 18 } else if (error.MANDATORY_UNSATISFIED_ERROR) { 19 jAlert(‘指定的媒体类型未接收到媒体流‘, ‘提示‘); 20 } else { 21 jAlert(‘系统未能获取到摄像头，请确保摄像头已正确安装。或尝试刷新页面，重试‘, ‘提示‘); 22 } 23 }; 24 25 26 var message = "为了获得更准确的测试结果，请尽量将面部置于红框中，然后进行拍摄、扫描。 点击“OK”后，请在屏幕上方出现的提示框选择“允许”，以开启摄像功能"; 27 // Put video listeners into place 28 if (navigator.getUserMedia) { // Standard 29 if (navigator.userAgent.indexOf(‘MQQBrowser‘) > -1) { 30 jAlert(‘对不起，您的浏览器不支持拍照功能，请使用其他浏览器‘, ‘提示‘); 31 return false; 32 } 33 jAlert(message, ‘提示‘, function () { 34 $(document).scrollTop($(window).height()); 35 }); 36 37 navigator.getUserMedia(videoObj, function (stream) { 38 video.src =http://www.mamicode.com/ stream; 39 video.play(); 40 alert(11); 41 $(‘#lifescan #main .btn_click‘).css(‘margin-top‘, ‘-550px‘); 42 video.addEventListener(‘loadeddata‘, function () { 43 $(document).scrollTop($(window).height()); 44 }, false); 45 $(‘#snap‘).click(function () { 46 //$(‘.scan-area‘).show(); 47 $(‘#cream_loading‘).toggle(); 48 context.drawImage(video, 0, 0, 640, 480); 49 convertCanvasToImage(); 50 }); 51 }, errBack); 52 } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed 53 jAlert(message, ‘提示‘, function () { 54 $(document).scrollTop($(window).height()); 55 }); 56 57 navigator.webkitGetUserMedia(videoObj, function (stream) { 58 video.src =http://www.mamicode.com/ window.webkitURL.createObjectURL(stream); 59 video.play(); 60 $(‘#lifescan #main .btn_click‘).css(‘margin-top‘, ‘-550px‘); 61 video.addEventListener(‘loadeddata‘, function () { 62 $(document).scrollTop($(window).height()); 63 }, false); 64 if (navigator.userAgent.indexOf(‘UCBrowser‘) > -1) { 65 $(‘#lifescan #main .btn_click‘).css(‘margin-top‘, ‘-10px‘); 66 } 67 $(‘#snap‘).click(function () { 68 $(‘#cream_loading‘).toggle(); 69 context.drawImage(video, 0, 0, 640, 480); 70 convertCanvasToImage(); 71 }); 72 }, errBack); 73 74 } 75 else if (navigator.mozGetUserMedia) { // Firefox-prefixed 76 jAlert(message, ‘提示‘, function () { 77 $(document).scrollTop($(window).height()); 78 }); 79 80 navigator.mozGetUserMedia(videoObj, function (stream) { 81 video.src =http://www.mamicode.com/ window.URL.createObjectURL(stream); 82 video.play(); 83 video.addEventListener(‘loadeddata‘, function () { 84 $(document).scrollTop($(window).height()); 85 }, false); 86 $(‘#lifescan #main .btn_click‘).css(‘margin-top‘, ‘-550px‘); 87 88 $(‘#snap‘).click(function () { 89 $(‘#cream_loading‘).toggle(); 90 context.drawImage(video, 0, 0, 640, 480); 91 convertCanvasToImage(); 92 }); 93 }, errBack); 94 95 } 96 else if (navigator.msGetUserMedia) { 97 jAlert(message, ‘提示‘, function () { 98 $(document).scrollTop($(window).height()); 99 });100 navigator.msGetUserMedia(videoObj, function (stream) {101 $(document).scrollTop($(window).height());102 video.src =http://www.mamicode.com/ window.URL.createObjectURL(stream);103 video.play();104 $(‘#lifescan #main .btn_click‘).css(‘margin-top‘, ‘-550px‘);105 video.addEventListener(‘loadeddata‘, function () {106 $(document).scrollTop($(window).height());107 }, false);108 $(‘#snap‘).click(function () {109 $(‘#cream_loading‘).toggle();110 context.drawImage(video, 0, 0, 640, 480);111 convertCanvasToImage();112 });113 }, errBack);114 115 }116 else {117 var userAgent = navigator.userAgent;118 if (userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Oupeng") == -1 && userAgent.indexOf("360 Aphone") == -1) {119 sel.addEventListener(‘change‘, function (e) {120 var f = sel.files[0]; // get selected file (camera capture)121 fr = new FileReader();122 fr.onload = receivedData; // add onl oad event123 124 fr.readAsDataURL(f); // get captured image as data URI125 });126 $(‘#imgtag‘).show();127 $(‘.div_video‘).hide();128 $(‘#snap‘).click(function () {129 sel.click();130 });131 } //判断是否Safari浏览器132 else {133 jAlert(‘对不起，您的浏览器不支持拍照功能，请使用其他浏览器‘, ‘提示‘);134 }135 }136 }, false);137 }138 catch (err) {139 jAlert(‘对不起，您的浏览器不支持拍照功能，请使用其他浏览器‘, ‘提示‘);140 }141 });142 // for iOS 143 // create file reader144 function receivedData() {145 // readAsDataURL is finished - add URI to IMG tag src146 var canvas = document.getElementById("canvas");147 var context = canvas.getContext("2d");148 var imgtag = document.getElementById(‘imgtag‘); // get reference to img tag149 imgtag.src =http://www.mamicode.com/ fr.result;150 $(‘#cream_loading‘).toggle();151 152 try {153 setTimeout(function () {154 context.drawImage(imgtag, 0, 0, 640, 480);155 convertCanvasToImage();156 }, 500);157 158 }159 catch (err) {160 alert(err);161 }162 }163 //帆布转换成图像并保存图片164 function convertCanvasToImage(canvas) {165 var image = new Image();166 image.src = http://www.mamicode.com/document.getElementById("canvas").toDataURL("image/png");167 //alert(image.src);168 //删除字符串前的提示信息“data:image/png;base64”169 var b64 = image.src.substring(22);170 var myDate = new Date();171 var filename = myDate.getTime();172 $.post("/Article/SavePhoto", { data: b64, name: filename }, function (result) {173 if (result.success) {174 $(‘#cream_loading‘).toggle();175 window.location.href = "http://www.mamicode.com/yourreenex?photo=" + result.photo;176 }177 });178 return image;179 }
然后说一下这个兼容性，目前支持，PC端：chrome，Firefox，360;移动端：chrome,Firefox,UC,Safair(这个的调用跟其他有点区别，后面会说道)
接着上图片：PC端的没上图片，第一张是mobile chrome，后面两张是mobile firefox
然后我们来说一下代码，html代码中其中用到的就是video 跟canvas 标签，其中canvas是隐藏的，其中的height width 不是卸载style那种。
我们还是来重点说明一下js代码吧
为了兼容不同的浏览器我们这里对navigator.getUserMedia 进行了判断，因为手机上video的width实在不好控制要满屏，所以我特意放大了，但这样就会有一个拍照按钮被撑到了下面，需要滑动页面才能找到，用户体验不好，为了解决这一问题我给video 添加了 ‘loadeddata‘事件，让页面能再及时的自动下滑到地步
再来说一下拍照，用到了context.drawImage(video, 0, 0, 640, 480);但这样并不能达到生成图片的目的，所以后面我又用到了convertCanvasToImage（）函数
我再来说一下对Safair的处理，safair似乎不支持navigator.getUserMedia，再一大牛的帮助下，处理找到了另一种处理方法：
就是调用safair自己的拍照来实现，sel.addEventListener(‘change‘, function (e){...}) 就是添加了 你选取的是拍照还是图片的事件，后面的receivedData()函数是对其的处理，其中的一定要做一个setTimeout，苹果的图片高质量，加载没有那么迅速，为了让drawImage能够取到已经加载的图片要做一个延时，否则会取不到图片
为了解决程序处理图片速度慢的问题，我还加了一个loading图片，来提高用户体验。
对了忘了说一下，safair拍出的图片是反着的，我也不知道怎么回事，大家有知道，希望指点一下！！！
HTML5 PC、Mobile调用摄像头（navigator.getUserMedia）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。