Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=no "/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "apple-mobile-web-app-status-bar-style" content= "black"/>
<meta content= "telephone=no" name= "format-detection"/>
<title> Testing </title>
<body>
<video id= "video" width= "height=" autoplay></video>
<button id= "snap" > Shooting </button>
<canvas id= "canvas" width= "height=" ></canvas>
<script>
Window.addeventlistener ("domcontentloaded", function () {
var canvas = document.getElementById ("canvas"),//call Canvas interface
context = Canvas.getcontext ("2d"),
Video = document.getElementById ("video"),
Videoobj = {"video": true},
Errback = function (error) {//error handling
Console.log ("Video capture error:", error.code);
};
If (navigator.getusermedia) {//call HTML5 shooting interface
Navigator.getusermedia (videoobj, function (stream) {
VIDEO.SRC = Stream;//camera belongs to the video stream, so of course output to HTML5
Video.play ();//start Playback
}, errback);
} else if (navigator.webkitgetusermedia) {//webkit kernel calls HTML5 shooting interface
Navigator.webkitgetusermedia (videoobj, function (stream) {
VIDEO.SRC = Window.webkitURL.createObjectURL (stream);//ibid.
Video.play ();//ibid.
}, errback);
}
else if (navigator.mozgetusermedia) {//moz kernel calls HTML5 shooting interface
Navigator.mozgetusermedia (videoobj, function (stream) {
VIDEO.SRC = Window. Url.createobjecturl (stream);//ibid.
Video.play ();//ibid.
}, errback);
}
}, false);
document.getElementById ("snap")
. AddEventListener ("click", function () {//get photo button bind event
var Canvans = document.getElementById ("canvas"),//call Canvas interface
context = Canvas.getcontext ("2d");
Context.drawimage (video, 0, 0, 640, 480);//calling The DrawImage method of the canvas interface to draw a static picture in the current video tag is actually
var imgdata = Canvans.todataurl ();//get The data in the base64 format of the picture
We can write the server code Here.
});
</script>
</body>Pc-side H5 for photo and upload
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
