HTML and CSS Reference
In-Depth Information
function startVideo () {
navigator . getUserMedia = navigator . getUserMedia ||
navigator . webkitGetUserMedia ||
navigator . mozGetUserMedia || navigator . msGetUserMedia ;
navigator . getUserMedia ({ video : true
true , audio : true
true }, mediaSuccess , mediaFail );
The mediaFail() function simply creates an alert() box to show us an error. Most likely,
when you try this example, you will get error code 1 , which means “permission denied.” This
error will occur if you are trying to run the example locally from the file system. You need to
tryallthe getUserMedia() examplesfromawebserver,runningeitheronyourownmachine
or on the Internet.
function mediaFail ( error ) {
//error code 1 = permission Denied
alert ( "Failed To get user media:" + error . code )
The mediaSuccess() function is the heart of this application. It is passed a reference to the
video object from the webcam ( userMedia ). To utilize this, we need to create a URL that
points to the object representing the user media so that our <video> object has a source that it
can use to start showing video.
First, we set window.URL to whatever version of window.URL the browser supports. We
then retrieve a reference to the <video> in the HTML page. Next we use win-
dow.URL.createObjectURL() to retrieve a usable URL that points to media that our video
objectcandisplay.Wesetthe src propertyofourvideotothatURL.Finally,wesetacallback
for the onloadedmetadata event so that we can proceed with our application after the video
has started displaying:
function mediaSuccess ( userMedia ) {
window . URL = window . URL || window . webkitURL || window . mozURL || window . msURL ;
var video = document . getElementById ( "thevideo" );
video . src = window . URL . createObjectURL ( userMedia );
video . onloadedmetadata = doCoolStuff ;
function doCoolStuff () {
alert ( "Do Cool Stuff" );
And that's it! You can view the full code for this example in CHX6EX13.HTML in the code
Search WWH ::

Custom Search