Home > Developer > Web Develop
How to use the camera in the Web page, HTML5 more and more use to the actual work, then how he calls the camera video chat, video surveillance and other activities, today for everyone to teach you how to realize how to achieve the use of HTML5 camera video monitoring function. Not much nonsense to say, access to the topic:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<TITLE>HTML5 using video for camera </title>
<style>
Nav. Search {
Display:none;
}
. demoframe header,
. demoframe. Footer,
. Demoframe H1,
. demoframe. P {
Display:none!important;
}
H1 {
Font-size:2.6em;
}
H2, H3 {
Font-size:1.7em;
}
. Left {
width:920px!important;
padding-bottom:40px;
}
DIV.P {
Font-size:. 8em;
font-family:arial;
Margin-top: -20px;
Font-style:italic;
padding:10px 0;
}
. footer {
padding:20px;
margin:20px 0 0 0;
Background: #f8f8f8;
Font-weight:bold;
font-family:arial;
border-top:1px solid #ccc;
}
. Left > P:first-of-type {
Background: #ffd987;
Font-style:italic;
padding:5px 10px;
margin-bottom:40px;
}
#promoNode {
margin:20px 0;
}
Video {border:1px solid #ccc; display:block; margin:0 0 20px 0;}
#canvas {margin-top:20px; border:1px solid #ccc; display:block;}
</style>
<body>
<!--Add the HTML header--
<div id= "Page" >
<!--holds content, would be frequently changed--
<div id= "Contentholder" >
<!--start the left section if not the homepage--
<section class= "Left" >
<H1>HTML5 using the video control to achieve camera video capture effect <div class= "P" >read <a href= "Http://davidwalsh.name/browser-camera" target= "_top" >camera and Video Control with html5</a></div>
<div id= "Promonode" ></div>
<p> please use the opera or Chrome browser to grab a picture on this page!</p>
<!--
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)
-
<video id= "video" width= "640" height= "480" autoplay></video>
<button id= "Snap" class= "Sexybutton" >snap photo</button>
<canvas id= "Canvas" width= "640" height= "480" ></canvas>
<script>
Put event listeners into place
Window.addeventlistener ("domcontentloaded", function () {
Grab elements, create settings, etc.
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);
};
Put video listeners into place
if (Navigator.getusermedia) {//Standard
Navigator.getusermedia (videoobj, function (stream) {
VIDEO.SRC = stream;
Video.play ();
}, Errback);
} else if (Navigator.webkitgetusermedia) {//Webkit-prefixed
Navigator.webkitgetusermedia (videoobj, function (stream) {
VIDEO.SRC = Window.webkitURL.createObjectURL (stream);
Video.play ();
}, Errback);
}
Trigger photo Take
document.getElementById ("Snap"). AddEventListener ("click", Function () {
Context.drawimage (video, 0, 0, 640, 480);
});
}, False);
</script>
</section>
</div>
</body>
The above is the HTML5 implementation of the camera's website code, and can run, the main use is the video control, and then use the browser to obtain the media getusermedia, and then get the video stream to the media, using the SRC attribute of video to output, and then play, We hope to help you.
This article originates from: http://www.18sucai.com/article/550.htm
HTML5 How to use the webcam feature in Web pages
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
