HTML and CSS Reference
In-Depth Information
Example 1: Show Video
on an HTML5 page.
Firstweneeda <video> tagintheHTMLpagetoholdthevideothatwewillcapturefromthe
webcam. We set it to autoplay so that we will see it moving as soon as it becomes available:
<video id= "thevideo" autoplay></video>
Our next job is to try to figure out whether the browser supports video capture. We do this
by creating a function named userMediaSupported() that returns a Boolean based on the
availability of the getUserMedia() method in various browsers. We need to do this because
getUserMedia() support is not the universal standard yet.
function userMediaSupported () {
return !! ( navigator . getUserMedia || navigator . webkitGetUserMedia ||
navigator . mozGetUserMedia || navigator . msGetUserMedia );
If we know that getUserMedia() is supported, we call startVideo() . If not, we display an
alert box:
function eventWindowLoaded () {
iif ( userMediaSupported ()) {
startVideo ();
} else
else {
alert ( "getUserMedia() Not Supported" )
Next, we find the existing getUserMedia() method for the current browser and set the local
navigator.getUserMedia() function to its value. Again, we do this because support is not
universal, and this step will make it much easier to reference getUserMedia() in our code.
Next we call the getUserMedia() function, passing three arguments:
▪ AnobjectwithBooleanpropertiesmediathatwewanttocapture( video:true and/or au-
dio:true ) (At the time this was written, the audio property was not supported.)
▪ A success callback function.
▪ A fail callback function.
Search WWH ::

Custom Search