HTML5 PC and Mobile call cameras (navigator. getUserMedia) and html5 cameras

HTML5 PC and Mobile call cameras (navigator. getUserMedia) and html5 cameras

Put code first.

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: pixel PX; height: 350px; background: url (/images/lifescan/scan_kuang1.png) no-repeat; z-index: 102; top: 560px; left: 780px; "> 8 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 "> </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; "> </div> 16 </div>View Code

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 vide OObj = {"video": true}, 13 errBack = function (error) {14 if (error. PERMISSION_DENIED) {15 jAlert ('user denied the permission of the browser to request media ', 'hs'); 16} else if (error. NOT_SUPPORTED_ERROR) {17 jAlert ('Sorry, your browser does not support the photo taking function. Please use another browser ', 'hs'); 18} else if (error. MANDATORY_UNSATISFIED_ERROR) {19 jAlert, make sure that the camera is correctly installed. Or try to refresh the page, retry ', 'hs'); 22} 23}; 24 25 26 var message = "to obtain more accurate test results, place your face in a red box as much as possible, and then take and scan. After clicking "OK", select "allow" in the prompt box above the screen to enable the camera function. 27 // Put video listeners into place 28 if (navigator. getUserMedia) {// Standard 29 if (navigator. userAgent. indexOf ('mqqbrowser ')>-1) {30 jAlert ('Sorry, your browser does not support the photo taking function. Please use other browsers', 'hs'); 31 return false; 32} 33 jAlert (message, 'hprompt ', function () {34 $ (document ). scrollTop ($ (window ). height (); 35}); 36 37 navigator. getUserMedia (videoObj, function (stream) {38 vi Deo. src = stream; 39 video. play (); 40 alert (11); 41 $ ('# lifescan # main .btn_click'0000.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, 'hprompt ', 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'0000.css ('margin-top','-550px '); 61 video. addEventListe Ner ('loadeddata', function () {62 $ (document ). scrollTop ($ (window ). height (); 63}, false); 64 if (navigator. userAgent. indexOf ('ucbrowser ')>-1) {65 $ (' # lifescan # main .btn_click'0000.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 (na Vigator. required getusermedia) {// Firefox-prefixed 76 jAlert (message, 'hprompt ', function () {77 $ (document ). scrollTop ($ (window ). height (); 78}); 79 80 navigator. required getusermedia (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'0000.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, 'hup', 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'0000.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 = rec EivedData; // add onload 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} // determine If Safari 132 else {133 jAlert ('Sorry, your browser does not support the photo taking function. Please use another browser ', 'hs'); 134} 135} 136}, false); 137} 138 catch (err) {139 jAlert ('Sorry, your browser does not support the photo taking function, please use other browsers ', 'hs'); 140} 141}); 142 // for I OS 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 = fr. result; 150 $ ('# cream_loading '). toggle (); 151 152 try {153 setTimeout (function () {154 context. d RawImage (imgtag, 0, 0,640,480); 155 convertCanvasToImage (); 156}, 500); 157 158} 159 catch (err) {160 alert (err ); 161} 162} 163 // convert canvas to image and save Image 164 function convertCanvasToImage (canvas) {165 var image = new image (); 166 Image. src = document. getElementById ("canvas "). toDataURL ("image/png"); 167 // alert (image. src); 168 // the message "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 = "+ results. photo; 176} 177}); 178 return image; 179}View Code

Next, let's talk about the compatibility. currently supported: PC: chrome, Firefox, 360; Mobile: chrome, Firefox, UC, and Safair (this call is a little different from other calls, I will talk about it later)

Next piece: No piece on the PC end. The first one is mobile chrome, and the last two are mobile firefox.

Let's take a look at the Code. In the html code, the video and canvas labels are used. The canvas is hidden, and the height width is not the one used to uninstall the style. Let's focus on the js Code. In order to be compatible with different browsers, we use navigator here. getUserMedia makes a judgment, because the width of video on the mobile phone is really difficult to control to full screen, so I deliberately zoomed in, but then there will be a photo button held below, you need to slide the page to locate the problem and the user experience is poor. To solve this problem, I added the 'loadeddata' event to the video so that the page could automatically slide down to the point where I could take a picture again, context is used. drawImage (video, 0, 0,640,480); but this does not achieve the purpose of generating images, so I will use the convertCanvasToImage () function later. I will talk about Safair processing, safair does not seem to support navigator. with the help of getUserMedia, another method is found for processing: Call safair's own photo to implement, sel. addEventListener ('change', function (e ){...}) it adds the events that you choose to take photos or images. The receivedData () function is used to process the selected events. The setTimeout function must be used to ensure the high quality of Apple images, loading is not so fast. To enable drawImage to get the loaded image, make a delay. Otherwise, the image cannot be obtained.
To solve the problem of slow processing speed, I added a loading image to improve the user experience. By the way, I forgot to mention that the pictures taken by safair are reversed, and I don't know what's going on. Everyone knows. I hope you can give me some advice !!!
How does html5 call a mobile phone camera to take photos and take videos for upload?

PhoneGap is a fast development platform that uses HTML, CSS, and JavaScript to create mobile cross-platform mobile apps. It allows developers to take advantage of the core features of iPhone, Android, Palm, Symbian, WP7, Bada, and Blackberry smartphones-including location, accelerator, contact, voice, and vibration, in addition, PhoneGap has a variety of plug-ins, which can be used to expand unlimited functions. PhoneGap is free of charge, but it requires additional software provided by a specific platform, such as the iPhone SDK for iPhone and Android SDK for Android. It can also be developed with DW5.5. Using PhoneGap is only a little better than creating applications for each platform, because although the basic code is the same, you still need to compile applications for each platform separately.
 
Html5 calls the mobile phone camera to upload photos

You can take a look at this article, which may be helpful to you: www.glve.net/...e.html