Webcam in HTML5
On my new project I used to run webcam. Project itself will develop through HTML5 so there is no doubt that to run webcam I have to use HTML5.
I had something good for you that you can run webcam in website.
I had something good for you that you can run webcam in website.
Mobile browser is also supporting this feature. like Firefox Mobile, Android 3.0, Opera for android, Chrome for android, iOS Safari 6.0 etc.,
Here I have given a simple basic code with explanation that is used in the complex live example.
Example code with tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Front Camera</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="author" content="Mitesh Maheta">
</head>
<body>
<div role="main">
<!--Webcam's screen is video tag screen -->
<video id="sourcevid" autoplay>Install browser's latest version.</video>
</div>
// Main API which makes webcam to communicate.
<script type="text/javascript" language="javascript">video = document.getElementById('sourcevid');
// Catch stream from the camera using getUserMedia. Syntax is different as per the borwser. for ex. webkitGetUserMedia - Chrome, mozGetUserMedia- Mozilla Firefox.
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
// Check if browser supports or not.
if (navigator.getUserMedia) {// specially used this syntax for chrome. Other browser supports {video:true,audio:true}
var options = {video: true, toString: function(){return 'video';}};
//Main method call to run webcam
navigator.getUserMedia(options, success, error);
//If Media streaming is success, This function will called.
function success(stream) {
// Replace the source of the video element with the stream from the camera
video.src = window.URL.createObjectURL(stream) || stream;video.play();
//If Media streaming is fail, This function will call.
function error(error) {
console.error('An error occurred: [CODE ' + error.code + ']');
video.play();
}
}
// When browser does not support getUserMedia.
else {
var errorMsg = '<p>Uh oh, it appears your browser doesn\'t support this feature.</p>';
document.querySelector('[role=main]').innerHTML = errorMsg;
}
</script>
</body>
</html>
This is great. I've been looking for an example like this. Will save.
ReplyDeleteGreat blog. Very informative. Really appreciated, html5 is very useful. Thanks.
ReplyDeleteDo you want to take html5 classes? Then check out Fresh Tilled Soil!
wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards, Html5 online trainingamong the Html5 in Hyderabad. Classroom Training in Hyderabad India
ReplyDelete