Languages

Menu
Sites
Language
Simple Example using camera for pictures on Gear2

Hi,

does anyone have a simple example of how to use the camera for taking pictures (no video functionality required) on the gear2? The example just has to start the camera in a container (about half the height of the screen and the full with), take pictures "onTouch", save them and publish the path.

I'm struggling with the complexity of the camera example of the SDK itself.

Cheers

Sebastian

List

Responses

4 Replies
Prajith Premanandan

Index.html : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>capture test</title>
    <meta name="viewport" content="width=device-width, user-scalable=0" />
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/main.js"></script>
   
</head>
<body bgcolor="black" onload="getVideoStream()">
<img id="top" src="images/shutter.png" usemap="#mobilemap"></img>
<map name="mobilemap">
<area shape="circle" coords="149,389,30" onclick="getCapture()" alt="mob">
</map>
<video id="videoView" src="" autoplay ></video>
<br />
<img id="imgView" src="" style="display:none;">
<canvas id="canvasView" style="display:none;"></canvas>
</div>
</body>
</html>

 

JS:

var localStream = "";
var FileName, data, testFile, documentsDir;

function getTimestamp() {
    var d = new Date();
    return d.getUTCFullYear() +
        '-' + d.getUTCMonth() +
        '-' + d.getUTCDay() +
        '-' + d.getUTCHours() +
        '-' + d.getUTCMinutes() +
        '-' + d.getUTCSeconds() +
        '-' + d.getUTCMilliseconds();
}

function onsuccess( files ) {
    var i = 0, testFile;
    for (i = 0; i < files.length; i++) {
        if ( files[i].name === FileName ) { return; }
    }
    testFile = documentsDir.createFile(FileName);
    
    if ( testFile !== null ) {
        testFile.openStream("w", function( fileStream ) {
            fileStream.writeBase64(data);
            fileStream.close();
            fileStream.close();
        }, function( e ) {
            console.log("Error " + e.message);
        }, "UTF-8");
    }
}
function onerror( error ) {
    console.log("The error " + error.message + " occurred when listing the files in the selected folder");
}

function SuccessCallBack( stream ) {
    var URL = window.webkitURL;
    document.getElementById("videoView").src = URL.createObjectURL(stream);
    localStream = stream;
}

function ErrorCallBack( e ) {
    console.log(e);
}
function getCapture() {
    console.log("capture");
    if ( localStream ) {
        tizen.power.turnScreenOff();
        tizen.power.turnScreenOn();
        var canvas = document.getElementById("canvasView"), context = canvas.getContext('2d');
        context.drawImage(document.getElementById("videoView"), 0, 0, 300, 225);
        document.getElementById("imgView").src = canvas.toDataURL('image/webp');
        
        try {
            data = canvas.toDataURL().replace('data:image/png;base64,', '');
            FileName = "Spy" +getTimestamp()+".png";
            tizen.filesystem.resolve('images/', function( dir ) {
                documentsDir = dir;
                dir.listFiles(onsuccess, onerror);
            }, function( e ) {
                console.log("Error" + e.message);
            }, "rw");
        } catch (e) {
            console.log("failed" + e);
        }
    }
}

var getVideoStream=function() {
    document.addEventListener('tizenhwkey', function( e ) {
        var el;
        if ( e.keyName === "back" ) {
            try {
                el = document.getElementById("popup1");
                if ( el.style.visibility === "hidden" ) {
                    tizen.application.getCurrentApplication().exit();
                } else if ( el.style.visibility === "visible" ) {
                    document.getElementById("popup1").style.visibility = "hidden";
                }
                
            } catch (error) {
                console.error("getCurrentApplication(): " + error.message);
            }
        }
        if ( e.keyName === "menu" ) {
            el = document.getElementById("popup1");
            el.style.visibility = (el.style.visibility === "visible") ? "hidden" : "visible";
            
        }
    });
    navigator.webkitGetUserMedia({
        video : true,
        audio : false,
        facingMode: "environment"
    }, SuccessCallBack, ErrorCallBack);
};
window.onload=getVideoStream;

 

 

start with this this js u can use rest its up to u

it will be determined on ur design skills :)

Seoghyun Kang

Hello,

 

There is the camera sample application in the Tizen SDK.

I think it will be helpful to you.

 

This sample shows how to use the camera in the web application.

The key is the "GetUserMedia" in W3C API.

 

Please refer it.

Thanks.

Seoghyun Kang

Please refer the following document.

http://dev.w3.org/2011/webrtc/editor/archives/20121212/getusermedia.html

Alex Dem

Hi,
also fyi: https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/supplementary-features/camera-api-tizen-extension
Alexey.