In our first example of Web RTC Media Capture, we will simply show a video from a webcam on an HTML5 page.

First we need a<video> tag in the HTML page to hold the video that we will capture from the webcam. We set it toautoplay so that we will see it moving as soon as it becomes available:

<div><videoid="thevideo"autoplay></video></div>

Our next job is to try to figure out whether the browser supports video capture. We do this by creating a function nameduserMediaSupported()that returns a Boolean based on the availability of thegetUserMedia()method in various browsers. We need to do this becausegetUserMedia()support is not the universal standard yet.

functionuserMediaSupported(){return!!(navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia);}

If we know thatgetUserMedia() is supported, we callstartVideo(). If not, we display an alert box:

functioneventWindowLoaded(){if(userMediaSupported()){startVideo();}else{alert("getUserMedia() Not Supported")}}

Next, we find the existinggetUserMedia() method for the current browser and set the localnavigator.getUserMedia() function to its value. Again, we do this because support is not universal, and this step will make it much easier to referencegetUserMedia() in our code.

Next we call thegetUserMedia() function, passing three arguments: