<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script type= "Text/javascript" src= "Http://123.56.106.187:8010/Scripts/listjs/jquery-1.7.2.min.js" ></ Script>
<script>
Determine if the browser supports HTML5 Canvas
Window.onload = function () {
try {
Create a canvas element dynamically and get him 2Dcontext. If an exception occurs, document.createelement ("canvas") is not supported. GetContext ("2d");
document.getElementById ("Support"). InnerHTML = "browser supports HTML5 CANVAS";
}
catch (e) {
DOCUMENT.GETELEMENTBYIDX ("Support"). InnerHTML = "Browser not supported HTML5 CANVAS";
}
};
This generation is mainly to get the video stream of the camera and display it in
Window.addeventlistener ("domcontentloaded", function () {
var canvas = document.getElementById ("Canvas"),
Context = Canvas.getcontext ("2d"),
Video = document.getElementById ("video"),
Videoobj = {"Video": true},
Errback = function (Error) {
Console.log ("Video Capture Error:", Error.code);
};
$ ("#snap"). Click (function () {
Context.drawimage (video, 0, 0, 330, 250);
})
Navigator.getusermedia in opera is like a navigator.getusermedianow.
if (Navigator.getusermedia) {
Navigator.getusermedia (videoobj, function (stream) {
VIDEO.SRC = stream;
Video.play ();
}, Errback);
} else if (Navigator.webkitgetusermedia) {
Navigator.webkitgetusermedia (videoobj, function (stream) {
VIDEO.SRC = Window.webkitURL.createObjectURL (stream);
Video.play ();
}, Errback);
}
}, False);
Upload Server
function Catchcode () {
var Canvans = document.getElementById ("Canvas");
Gets the canvas object for the browser page
The following starts compiling data
var imgdata = Canvans.todataurl ();
Convert an image to Base64 data
var base64data = imgdata.substr (22);
Truncate 22-bit string as image data on the front-end
Begins asynchronously on
$.post ("Uploadimgcode.ashx", {"img": Base64data}, function (data, status) {
if (status = = "Success") {
if (data = = "OK") {
Alert ("Two-dimensional has been resolved");
}
else {
alert (data);
}
}
else {
Alert ("Failed on data");
}
}, "text");
}
</script>
<body>
<div id= "Contentholder" >
<video id= "video" width= "autoplay>" height= "
</video>
<input type= "button" id= "Snap" style= "width:100px;height:35px;" value= "Photo"/>
<canvas style= "id=" Canvas "width=" "height=" >
</canvas>
</div>
</body>
H5 calling the local camera
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
