But your browser can do more natively these days - it can access your computer's webcam too! In fact, connecting to your webcam and streaming it out to a video tag in a html page can be done in only a few lines of HTML with some embedded JavaScript!
Take a look at the following small html page:
<html>
<head>
<title>HTML5 Video with no plugins!</title>
<script>
function setup() {
navigator.myGetMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.myGetMedia({video: true}, connect, error);
}
function connect(stream) {
var video = document.getElementById("my_video");
video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
video.play();
}
function error(e) { console.log(e); }
addEventListener("load", setup);
</script>
</head>
<body>
<header><h1>HTML5 Video with no plugins!</h1></header>
<video id="my_video"/>
</body>
</html>
When the page is loaded (on the load event) the setup() function is executed. This connects to your webcam through the navigator.getUserMedia() API. Currently there are a few different browser variants with various prefixes of this. When the WebRTC spec is finalized they will most likely all be unified to getUserMedia (without any prefix), which will take another 5 lines out of the above code. Once connected to the webcam the script obtains a URL to this connection and sets it as the source for the video tag. That's it!
Audio works similarly too so you can also create a combined audio/video stream.
Running the webpage shows what your webcam sees in on the browser page:
And, it works on my Android phone too!
You can try it yourself or you can launch the page from here.
This opens some really interesting possibilities. For example the people from html5videoguide have used this to create a video conferencing system:
http://html5videoguide.net/presentations/LCA_2013_webrtc
powered by your browser and a few lines of serverside JavaScript. You can use these APIs to record video or audio. Or turn your browser into a camera app! Combine with the new canvas APIs and you can use it to do photo editing too! All right there in your browser, all without the need for additional plugins.
The code above still contains some variations to cater for slight differences that can be found in browsers, that should all be resolves as soon as the webrtc spec goes final.
1 comment:
VERY NICE VEDIO,thank you for sharing.
html5
Post a Comment