getUserMedia

Mobile WebWearable Web

Dependencies

  • Tizen 2.4 and Higher for Mobile
  • Tizen 2.3.1 and Higher for Wearable
  • Tizen 3.0 and Higher for TV

Content

Related Info

You can access multimedia streams, such as camera, on a local device. The feature can be used, for example, for real-time communication, recording, and surveillance.

The main features of the getUserMedia API include:

  • Retrieving multimedia streams

    You can use the navigator.webkitGetUserMedia() method to request user access to retrieve the multimedia streams of local devices, such as camera. The method returns the media as a JSON object.

    Note The TV applications support the navigator.webkitGetUserMedia() method for the microphone only, because a TV has no camera.
  • Capturing media

    You can capture media content and transform it to various formats.

NoteTizen supports a WebKit-based GetUserMedia() method, so always add the webkit prefix to the method name.

Accessing a Video Stream

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

  1. Create the HTML5 video element (in mobile, wearable, and TV 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>
    
  2. 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.

  3. 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:

Capturing a Media Frame

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

  1. 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>
    
  2. 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>
    
  3. 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: