This tutorial shows "How to get live feed from your web camera using getUserMedia".In this post we are going to see how to user getUserMedia and Send it to the <video > element.
Html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Html 5 Web Cam Demo</title>
</head>
<body>
<p>Camera Access using HTML 5</p>
<div class="video">
<video id="stream" width="500" autoplay controls></video>
</div>
<script src="js/jquery.js"></script>
<script src="js/camera.js"></script>
</body>
</html>
Javascript Code:
$(document).ready(function () {
navigator.getUserMedia = (navigator.GetUserMedia ||
navigator.webKitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if (navigator.getUserMedia)
{
navigator.getUserMedia({ video:true },
function (streamMedia)
{
var video = document.querySelector('video');
video.srcObject = streamMedia;
},
function (err)
{
console.log("The following error occurred while accessing webcam" + err.name);
}
);
} else {
console.log("Error occured:getUserMedia Not Found");
}
});
Output:
Download Source Code
No comments :
Post a Comment