<!DOCTYPE><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" ><Scripttype= "Text/javascript"src= "/js/jquery1.8.3.js"></Script><title>Take photos online</title></Head><Body><VideoID= "Camvideo"width= "The "Height= "328"AutoPlay></Video> <BR/><ButtonID= "Snap">Grab map</Button> <BR/><Table><TR> <TD><CanvasID= "Canvas"width= "The "Height= "328" /></TD><TD><inputname= "Imgdata"ID= "Imgdata"style= "width:600px"/></TD></TR></Table><Script> $(function(){ //get element, create configuration varCanvas=document.getElementById ("Canvas"); varContext=Canvas.getcontext ("2d"); varVideo=document.getElementById ("Camvideo"); varVideoobj= { "Video": true }; varErrback= function(Error) {Console.log ("Video capture Error:", Error.code); }; //add a video listener if(Navigator.getusermedia) {//the standard APINavigator.getusermedia (Videoobj,function(stream) {video.src=stream; Video.play (); }, Errback); } Else if(Navigator.webkitgetusermedia) {//WebKit Core APINavigator.webkitgetusermedia (Videoobj,function(stream) {video.src=Window.webkitURL.createObjectURL (stream); Video.play (); }, Errback); } Else if(Navigator.mozgetusermedia) {//webkit-prefixedNavigator.mozgetusermedia (Videoobj,function(stream) {video.src=window. Url.createobjecturl (stream); Video.play (); }, Errback); } document.getElementById ("Snap"). AddEventListener ("Click", function() {context.drawimage (video,0, 0, -, 328); varDataurl=Context.canvas.toDataURL ("Image/png"); $( "#imgData"). Val (Dataurl); });});</Script></Body></HTML>
HTML5 for online capture