Page Example

Mirror Sample Overview

The Mirror sample application demonstrates how you can use the front camera in your application.

The following figure illustrates the main screen of the Mirror.

Figure: Mirror screen

Mirror screen

The application opens with a main screen that shows an image from the front camera.

Prerequisites

To ensure proper application execution, the following privilege must be set:

  • http://tizen.org/privilege/mediacapture

Source Files

You can create and view the sample application project including the source files in the IDE.

File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/style.css This file contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/main.js This file contains the code for handling the main functionality of the application.

Implementation

To use the camera:

  1. Initialize the camera with getUserMedia:

    if (navigator.getUserMedia) 
    {
       navigator.getUserMedia({video: true}, streamCb,
                              function(err) {console.log(err);});
    } 
    else 
    {
       return false;
    }
    
  2. Link the camera stream to a video element and start to play:

    var URL = window.URL || window.webkitURL,
        objVideo = document.querySelector("#videoMirror");
    
    objVideo.src = URL.createObjectURL(stream);
    objVideo.play();