HTML5 PC、Mobile调用摄像头（navigator.getUserMedia）

 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>

  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 }