HTML5 allows us to capture the video and the audio stream coming from the device camera and microphone. The following code sample shows how simple it is to do it.
<!DOCTYPE html>
<html>
<head>
<title>sample for video capturing using html5</title>
</head>
<body>
<video autoplay width="480" height="360"></video>
<input type="button" id="stopbt" value="stop"/>
<script type="text/javascript">
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.querySelector('video');
var cameraStream = '';
if (navigator.getUserMedia)
{
navigator.getUserMedia(
{audio: true, video: true},
function(stream)
{
cameraStream = stream;
video.src = window.URL.createObjectURL(stream);
},
function()
{
document.writeln("problem with accessing the hardware!")
}
);
}
else
{
document.writeln("video capture is not supported!");
}
document.querySelector('#stopbt').addEventListener(
'click',
function(e)
{
video.src='';
cameraStream.stop();
});
</script>
</body>
</html>
The following video clip overviews this code sample, shows its execution and explains it.
You can find more video clips, code samples and training material for learning HTML5 in my Introduction to HTML5 free course at http://abelski.lifemichael.com.
