HTML and CSS Reference
In-Depth Information
Example 1: Show Video
InourfirstexampleofWebRTCMediaCapture,wewillsimplyshowavideofromawebcam
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:
<div>
<div>
<video
<video id=
"thevideo"
autoplay></video>
></video>
</div>
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
function
userMediaSupported
() {
return
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
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.
