Using Phonegap1.9.0 Camera app for android. Followed the steps as per the phonegap documentation. But when I launch the app and click on Capture phone nothing happens.
When I look into the logcat navigator.camera.getPicture is undefined
Development version specified below.
Phonegap version:1.9.0
Eclipse: 3.7.2
Android: https://dl-ssl.google.com/android/eclipse/
AVD: 4.1
Device: Samsung GT-S5830, OS- Android 2.3.6
Can someone suggest me the steps to follow and the specific version that should be used to support the Camera.
HTML Code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen"
title="no title" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="javascript.js"></script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h1>
VS Mag PhoneGap Photo Demo</h1>
<button onclick="capturePhoto();">Capture a Photo</button>
<br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Display from Library</button><br>
<img style="display: none; width: 200px; height: 200px;" alt="" id="capturedPhoto" src="" />
<img style="display: none; width: 200px; height: 200px;" alt="" id="selectedFromPhotoLibrary"
src="" />
</body>
</html>
Below is my JAVA SCRIPT code:
var pictureSource; // Picture source
var destinationType; // Sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready to be used!
function onDeviceReady()
{
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
}
function selectPhoto(useCamera)
{
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
if (useCamera)
{ // take picture
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, destinationType: destinationType.FILE_URI });
}
else
{
// select from library
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, sourceType: pictureSource.PHOTOLIBRARY, destinationType:
destinationType.FILE_URI });
}
}
//display image on the screen
function photoLoaded(imageData)
{
var temp_image=imageData;
document.getElementById("imageControl").src=temp_image;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
var capturedPhoto = document.getElementById('capturedPhoto');
capturedPhoto.style.display = 'block';
capturedPhoto.src = imageData;
navigator.notification.alert("Picture Successfully Captured!");
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
var selectedFromPhotoLibrary = document.getElementById('selectedFromPhotoLibrary');
selectedFromPhotoLibrary.style.display = 'block';
selectedFromPhotoLibrary.src = imageURI;
navigator.notification.alert("Picture Imported Captured!");
}
function capturePhoto() {
// Take picture using device camera and retrieve image
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
// Error Handling
function onFail(message) {
alert('Failed because: ' + message);
}
Related
I'm trying to use the latest (2.2.0) Cordova Camera Plugin in an app I'm developing on Intel XDK. Here is my javascript and my HTML:
<script type="text/javascript" charset="utf-8">
function onSuccess(imageURI) {
alert(imageURI);
var image = document.getElementById('image');
image.src = imageURI;
}
function onFail(message) { alert('Failed because: ' + message); }
function capturePhoto() {
navigator.camera.getPicture(onSuccess, onFail, {
destinationType: Camera.DestinationType.FILE_URI,
mediaType: Camera.MediaType.PICTURE,
saveToPhotoAlbum: true,
sourceType: Camera.PictureSourceType.CAMERA
});
}
</script>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<center>
<img style="width:260px;height:260px;" id="image" src="" />
</center>
The camera app is opened, I take the picture, click "ok", but when I go back to the app neither onSuccess nor onFail is being fired. The pictures are being saved successfully.
I've already tried some things:
Do something with Android event pipeline
Listen to resume event
I have an Ionic application that uses Cordova and would like to load images from the album of the device. My problem is that it is not working, although I did follow the instructions on the Cordova website. Here is my code:
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic App</title>
<link href="ionic/css/ionic.css" rel="stylesheet">
<link href="css/slider-style.css" rel="stylesheet" type="text/css"/>
<link href="css/main-app.css" rel="stylesheet" type="text/css"/>
<script src="ionic/js/angular/angular.js" type="text/javascript"></script>
<script src="ionic/js/angular/angular-animate.js" type="text/javascript"></script>
<script src="ionic/js/ionic.bundle.js"></script>
<script src="ionic/js/app.js"></script>
<script src="js/myapp.js" type="text/javascript"></script>
<script src="js/LoadFromDevice.js" type="text/javascript"></script>
</head>
<body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="PopupCtrl">
<ion-nav-bar class="nav-title-slide-ios7 bar-light transparent-nav" style="background: none; border-bottom: none">
<!-- <ion-nav-back-button class="button-icon ion-chevron-left">
</ion-nav-back-button>-->
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
</html>
loadImage.html
<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="" />
<script>
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64-encoded image data
// console.log(imageData);
// Get image handle
//
var smallImage = document.getElementById('smallImage');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
// Get image handle
//
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The in-line CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
//
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.DATA_URL });
}
// A button will call this function
//
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
I am using the cordova-plugin-camera to achieve this.
Can you elaborate more on 'just not working'. Which step in the process does it stop working?
a. Not finding the folder?
b. Unable to select the Photo from the folder?
c. Able to select the Photo but the URI is unavailable?
d. Available URI does not render correctly?
We might be able to help you based on your answer to the above as well as details on which device, OS version, cordova version, and ionic version you are in.
There are lots of variations and issues you need to handle to have this work across devices. There are some commercial plugins that do this well like https://www.onymos.com/products/media
First the code:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource,
destinationType
document.addEventListener("deviceready",loaded,false);
function loaded() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function getPhoto(imageData) {
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function capturePhoto() {
navigator.camera.getPicture(getPhoto, onFail, { quality: 50 });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
</body>
</html>
I use BuildTool in combination with phonegap (build.phonegap.com). I have zipped this file as index.zip and uploaded this file in BuildTool. BuildTool then creates an app for me and store this app on phonegap.
When I click the button, nothing happens. I won´t even see the failed alert.
Does someone know what I'm doing wrong here? Do I need to include some library or something?
Note: I am trying to get this to work for Android.
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
the above two line is not complete. it should be like these
pictureSource=navigator.camera.PictureSourceType.PHOTOLIBRARY;
destinationType=navigator.camera.DestinationType.FILE_URI;
after changing still not working then try these html its working...
<!DOCTYPE html>
<html>
<head>
<title>Submit form</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function getPhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFailure, {
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function onPhotoURISuccess(imageURI) {
$("#smallImage").attr('src',imageURI);
}
function onFailure()
{
alert('failed');
}
</script>
</head>
<body>
<br><br><br>
<button onclick="getPhoto();">Select Photo:</button><br>
<img style="width:200px;height:200px;" id="smallImage" />
</body>
</html>
Try adding the deviceready listener to a function that is called after the body loads, like this:
<body onload="onLoad()">
function onLoad() {
document.addEventListener("deviceready",loaded,false);
}
Phonegap: 2.9.0
Android: 4.4.2
Device: Nexus 5
I moved the "assets\www" files to my host, and "super.loadUrl("http://mydomain.com");", Because it's easy to maintain, lucky, Phonegap works!
But it can not uploads files, why? Here is my codes:
MainActivity.java
import android.os.Bundle;
import org.apache.cordova.*;
public class MainActivity extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("http://mydomain.com");
}
}
index.php (on host)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady()
{
console.log("device ready");
// Do cool things here...
}
function getImage()
{
// Retrieve image file location from specified source
navigator.camera.getPicture
(
uploadPhoto,
function(message)
{
alert('get picture failed');
},
{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI)
{
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "upload.php", win, fail, options);
}
function win(r)
{
console.log("Code = " + r.responseCode.toString()+"\n");
console.log("Response = " + r.response.toString()+"\n");
console.log("Sent = " + r.bytesSent.toString()+"\n");
alert("Code Slayer!!!");
}
function fail(error)
{
alert("An error has occurred: Code = " + error.code);
}
</script>
</head>
<body>
<button onclick="location.replace(location.href);">Refresh</button>
<button onclick="getImage();">Upload a Photo</button>
</body>
</html>
</html>
upload.php (on host)
<?php
print_r($_FILES);
?>
I click the button and select a photo, it alerts "An error has occurred.Code = 2", how to solve this problem?
Thanks for help!
You will want to specify a full path to the upload.php file, example:
ft.upload(imageURI, "http://www.mydomain.com/upload.php", win, fail, options);
I am trying to develop an android application which can play audio files, through Phonegap framework.
Below is the code for that, which is not the index.html, but another HTML page in the project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>A New App Try</title>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
-->
<script src="/android_asset/www/js/corodova.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/MyownTry.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="/android_asset/www/js/jquery-1.10.2.js"></script>
<script src="/android_asset/www/js/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/jquery.mobile.structure-1.3.2.css" />
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
/*
function onDeviceReady() {
playAudio("../assets/files/Roja_Flute.mp3");
}
*/
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
if (!playing) {
my_media.play();
document.getElementById('play').src = "/android_asset/www/img/pause_icon.jpg";
playing = true;
} else {
my_media.pause();
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";
playing = false;
}
}
// Pause audio
//
/* function pauseAudio() {
if (my_media) {
my_media.pause();
}
}*/
// Stop audio
//
function stopAudio() {
my_media.stop();
playing = false;
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<style>
img{
width=30%;
}
</style> </head>
<body>
<br/><br/>
<img id="play" src="/android_asset/www/img/Playicon.png"/>
<!-- <img id="pause"src="/android_asset/www/img/pause_icon.jpg" width="20%"/> -->
<img id="stop" src="/android_asset/www/img/stop_icon.jpg" />
<!-- <p id="audio_position"></p>-->
<br/><br/>
Go back to Home Page
<div data-role="footer">
<p>Copyright 2013 | Mani C | newtolearn.android</p>
</div>
</div>
</body>
</html>
I am expecting icons to be smaller ones, as I have defined in the style element, for 30% of image size. And, I am expecting when I click on the Play icon, the audio file to be played.
Unfortunately both the expected behaviors are not occuring. I am seeing a larger 'Play icon', smaller 'Stop icon' and getting, 'Uncaught Reference Exception: variable playAudio is undefined in index.html'(when in fact, the above HTML code has nothing to do with index.html).
Can somebody, please help and can possibly provide a workaround code..?
Thanks in advance!
Mani