HTML5 PC、Mobile调用摄像头(navigator.getUserMedia)

2014-09-27 18:05

废话少说,先贴上代码

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 = 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 = 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 = 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 = 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 onload event
123 
124                         fr.readAsDataURL(f); // get captured image as data URI
125                     });
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 reader
144 function receivedData() {
145     // readAsDataURL is finished - add URI to IMG tag src
146     var canvas = document.getElementById("canvas");
147     var context = canvas.getContext("2d");
148     var imgtag = document.getElementById('imgtag'); // get reference to img tag
149     imgtag.src = 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 = 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 = "/yourreenex?photo=" + result.photo;
176         }
177     });
178     return image;
179 }

 然后说一下这个兼容性,目前支持,PC端:chrome,Firefox,360;移动端:chrome,Firefox,UC,Safair(这个的调用跟其他有点区别,后面会说道)

接着上图片:PC端的没上图片,第一张是mobile chrome,后面两张是mobile firefox

navigator.getusermedia,调用,摄像头,html5,pc0 navigator.getusermedia,调用,摄像头,html5,pc1 navigator.getusermedia,调用,摄像头,html5,pc2
 
 
 然后我们来说一下代码,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拍出的图片是反着的,我也不知道怎么回事,大家有知道,希望指点一下!!!