CODEWITHSUNDEEP
javascriptcordovacamera
user3816185
user3816185

Reputation: 43

Capture photo using Phonegap

I am new in Phonegap. I want to capture photo using Phonegap. I tried the following code from docs but camera is not starting. Please tell me what I made wrong? My code is

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/phonegap.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
var pictureSource; // picture source
var destinationType; // sets the format of returned value 
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    alert("OnDeviceReady...");
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
}

function onPhotoDataSuccess(imageData) {
    var smallImage = document.getElementById('smallImage');

    smallImage.style.display = 'block';

    smallImage.src = "data:image/jpeg;base64," + imageData;
}

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('largeImage');

    largeImage.style.display = 'block';

    largeImage.src = imageURI;
}

function capturePhoto() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality : 50,
        destinationType : destinationType.DATA_URL
    });
}

function capturePhotoEdit() {
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality : 20,
        allowEdit : true,
        destinationType : destinationType.DATA_URL
    });
}

function getPhoto(source) {
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality : 50,
        destinationType : destinationType.FILE_URI,
        sourceType : source
    });
}

function onFail(message) {
    alert('Failed because: ' + message);
}
window.onload = onDeviceReady;
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button>
<br>
<button onclick="capturePhotoEdit();">Capture Editable Photo</button>
<br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From
Photo Library</button> 
<br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From
Photo Album</button>
<br>
<img style="display: none; width: 60px; height: 60px;" id="smallImage"
src="" />
<img style="display: none;" id="largeImage" src="" />
</body>
</html>

Please tell me where I made mistake.

this is my camera plugin

<plugins>
    <plugin
        name="Storage"
        value="org.apache.cordova.Storage" />
    <plugin
        name="Camera"
        value="com.foregroundcameraplugin.ForegroundCameraLauncher" />
</plugins>

Thank you in advance.

Upvotes: 0

Views: 3507

Answers (1)

Emre
Emre

Reputation: 159

Try using Phonegap's own camera plugin instead of a custom one.

You can see the documentation here: Phonegap Camera API

Plus, while refering to phonegap.js, you don't have to put js/phonegap.js. You can refer it like src="phonegap.js"

If you are using Phonegap Build, this is the right way to insert your plugin : 

<gap:plugin name="org.apache.cordova.camera"/>

Upvotes: 1

Related Questions