HTML5 Online Camera Application

Recently in a test system, the system requires a random camera function, and the camera can receive JS control. Online camera, just the two ways to do it: Cab or Flash.

For the moment I have never learned the flash (in fact, I have made a flash call camera demo, although the call was successful, but for the photo part I am really powerless, moreover, JS control flash part of the code is a headache. ）。

Originally I have developed a camera cab, but ActiveX, can only be used for IE, compatibility and stability is not very good. So now we're going to start researching HTML5-based online cameras.

First look at the effect

HTML5 everybody also gradually not so unfamiliar, at least also must know only a few browsers can be very good compatibility HTML5 bar. So the test environment is chrome 18 or above, and you should open the browser's mediastream before testing: enter about:flags in the Address bar, enable MediaStream.

Then you can start knocking on the code.

It is worth noting, however, that the HTML5 test can no longer directly open the HTML page locally, but will need to access the HTML page on HTTP. Build Iis,apache directly or view the HTML5 page directly with vs.

1. Video streaming

Add a video tag and call Getusermedia to get the user's webcam stream.

<video id= "video" autoplay= "" width= "320px" height= "240px" ></video> <script type= "Text/javas Cript ">varVideo = document.getElementById ("video"); Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia;if(Navigator.getusermedia) {if(Navigator.webkiturl) {Navigator.getusermedia ("video",function(stream)                    {video.src = Window.webkitURL.createObjectURL (stream); },function(Error)                {alert (error);}); }Else{Navigator.getusermedia ("video",function(stream)                    {video.src = Window.webkitURL.createObjectURL (stream); },function(Error)                {alert (error);}); }            }Else{Alert ("Navigator.getusermedia Error"); } </script>

This way, you can call the camera directly in the Web page after you run it. Will prompt after running

2. Taking pictures

Capturing the contents of the video tag with a canvas and displaying it, the result is a photo.

Also first add a canvas label and a button

<canvas id= "CANVAS1" width= "height=" ></canvas>

button Click after the call JS, the video tag to display the current image in the canvas, the effect will not be a demonstration

            function Scamera () {                var videoelement = document.getElementById (' video ');                var canvasobj = document.getElementById (' canvas1 ');                var context1 = Canvasobj.getcontext (' 2d ');                Context1.fillstyle = "#ffffff";                Context1.fillrect (0, 0, +/-);                Context1.drawimage (videoelement, 0, 0, +);                // alert ("paizhaosuccess");            }

3. Uploading to the server

Upload to the server or use the old-fashioned, the picture to Base64, through Ajax, nothing new saved to the server. (Note that the Todataurl method in the HTML5 is converted to the PNG format, sent to the server will be very big: 320*240 photos to 190kb, so you need to convert to a format of JPG, 10kb. See Demo for details)

functionUploadphoto ()//upload pictures of photos{Showimgcode (); Request = Createrequest ();if(Request = =NULL{Alert ("Unable to create request"); }Else{//alert ("Request. OK ");                    varBase64data = document.getElementById (' textB64 '). Value.replace (/\+/g, "%2b");//encode the + number in the parameter to prevent loss                    varurl = "Ajax/uploadpic.aspx"; Request.open ("POST", URL,true);                    Request.setrequestheader ("Content-type", "application/x-www-form-urlencoded");                    Request.onreadystatechange = responses; Request.send ("&img=" + base64data);//alert ("Send. OK ");}            }functionResponses () {if(Request.readystate = = 4)//end of server processing{if(Request.status = = 200)//everything's fine .{if(Request.responsetext = = "OK") {Alert ("Upload succeeded!                        "); }Else{Alert ("Upload failed!                            ");                        alert (Request.responsetext); }                    }                }            }

In fact, some of the other methods of HTML5 can even make the function of the online PS, but these are not in my needs, and now do not go into the deep research.

HTML5 Online Camera Application