getUserMedia: Accessing Media Streams

This tutorial demonstrates how you can access media streams and use them to capture media.

Warm-up

Become familiar with the getUserMedia API basics by learning about:

Accessing a Video Stream
Access a video stream on a device.
Capturing a Media Frame
Capture a frame and display it in a video element.

Task in Mobile Applications

In the Self Camera task, we will walk through displaying a camera video stream and capturing images from it.

Accessing a Video Stream

Learning how to access a video stream is a basic user media management skill:

Create the HTML5 video element (in mobile or wearable applications) and a button used to control audio stream access:

<body>
   <video id="videoPlay" src="" autoplay controls></video><br/>
   <input type="button" value="START" onclick="getVideoStream();" id="btnStart">
</body>

Use the navigator.webkitGetUserMedia() method to derive audio streams:
```
<script>  
   function getVideoStream() 
   {
      navigator.webkitGetUserMedia({video: true}, successCallBack, errorCallBack);                     
   }
</script>
```
The first parameter is mandatory and assigns a JSON object to determine which media element (audio or video) to use.

Retrieve audio stream information and create stream URL:

<script>
   function SuccessCallback(stream) 
   {   
      var URL = window.webkitURL;
      document.getElementById("videoPlay").src =  URL.createObjectURL(stream);                     
   }    
</script>

Source Code

For the complete source code related to this use case, see the following file:

video_stream.html

Capturing a Media Frame

Learning how to capture a frame and display it in a video element is a basic user media management skill:

Create a canvas element and use the getCapture() method to capture a frame:

<body>
   <video id="videoView" src="" autoplay></video><br/>
   <img id="imgView" src="">
   <canvas id="canvasView" style="display: none;" width="300" height="225"></canvas><br>
   <input type="button" value="WebCamStart" onclick="getVideoStream();" id="btnPlay">
   <input type="button" value="Capture" onclick="getCapture();" id="btnCapture">
</body>

Enable rendering of the retrieved media stream by calling the webkitGetUserMedia() method:

<script>
   function getVideoStream() 
   {
      navigator.webkitGetUserMedia({video: true}, SuccessCallBack, ErrorCallBack);
   }
   function SuccessCallBack(stream) 
   {
      var URL = window.webkitURL;
      document.getElementById("videoView").src = URL.createObjectURL(stream);
      localStream = stream;
   }
   function ErrorCallBack(e) 
   {
      /* Error handling */
   }   
</script>

Display the captured frame in a video element using the drawImage() method:

<script>
   var localStream = "";    
   function getCapture() 
   {
      if (localStream) 
      {
         var canvas = document.getElementById("canvasView");
         var context = canvas.getContext('2d');

         context.drawImage(document.getElementById("videoView"), 0, 0, 300, 225);
         document.getElementById("imgView").src = canvas.toDataURL('image/web');
      }
   }
</script>

Source Code

For the complete source code related to this use case, see the following file:

capturing_webcam.html