Home > Developer > Web Develop
Before seeing an interview question is HTML5 take a picture.
One of the APIs used here is
Navigator.getusermedia (Constraints, Successcallback, errorcallback);
Where constraints is the local media type supported by Localmediastream, you must pass in
{ video: true, audio: true }
Successcallback is the successful callback function, which is usually to upload the image to the page
function (localmediastream) { var video = document.queryselector (' video '); = window. Url.createobjecturl (Localmediastream); function (e) { // do something with the video here. };},Errorcallback is the wrong callback, nothing to say.
If you want to take a photo, save the picture with the canvas.
The Context.drawimage () method saves the picture to the canvas.
Here's an example.
<!DOCTYPE HTML> <HTML> <Head> <title>Browser Webcamera</title> <Metaname= "Generator"content= "EditPlus"> <Metaname= "Author"content= "[email protected]"> <Metaname= "Description"content= "inveted By:http://davidwalsh.name/browser-camera"> <Script> //Set event Listener, DOM content loading complete, and jquery's $.ready () effect is similar. Window.addeventlistener ("domcontentloaded", function() { //the canvas element will be used to capturevarCanvas=document.getElementById ("Canvas"), Context=Canvas.getcontext ("2d"), //video element that will be used to receive and play the camera's data streamVideo=document.getElementById ("Video"), Videoobj= { "Video": true }, //an error callback function that prints an error message in the consoleErrback= function(Error) {if("Object" === typeofwindow.console) {Console.log ("Video capture Error:", Error.code); } }; //Put Video listeners into place//for standard browsersif(Navigator.getusermedia) {// StandardNavigator.getusermedia (Videoobj,function(stream) {video.src=stream; Video.play ();}, Errback); } Else if(Navigator.webkitgetusermedia) {//webkit-prefixedNavigator.webkitgetusermedia (Videoobj,function(stream) {video.src=Window.webkitURL.createObjectURL (stream); Video.play ();}, Errback); } //event Monitoring of the photo buttondocument.getElementById ("Snap"). AddEventListener ("Click", function() { //draw on the canvascontext.drawimage (Video,0, 0, 640, 480); }); }, false); </Script> </Head> <Body> <Div> <!--Disclaimer: This div should be allowed to use webcam, after the webcam dynamically generated wide: 640 *480, of course, can be dynamically controlled! - <!--Ideally these elements aren ' t created until it ' s confirmed that the client supports Video/camera, but for the sake of Illustrating the elements involved, they is created with markup (not JavaScript) - <VideoID= "Video"width= "640"Height= "480"AutoPlay></Video> <ButtonID= "Snap">Snap Photo</Button> <CanvasID= "Canvas"width= "640"Height= "480"></Canvas> </Div> </Body> </HTML>
Finally there is a problem, this code must be running on the server, I do not know why, on the Jsbin is also possible. People who know can help, thank you.
HTML5 photo problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
