Please help me any one how to select only the video from the gallery in android and iOS in cordova
I am tried this click Here for select the video from media but it not working for me...
var pictureSource;
var destinationType;
var mediaType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
mediaType = navigator.camera.MediaType;
}
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
destinationType: destinationType.FILE_URI,
mediaType: mediaType.VIDEO,
sourceType: source
});
function onPhotoURISuccess(imageURI) {
console.log(imageURI);
}
function onFail(message) {
console.log(message);
}
i am used this same code to implement in my app but it can't come....
You can try the snippet below:
navigator.camera.getPicture(onSuccess, onFail, { quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType: Camera.MediaType.VIDEO
});
Not that the mediaType can be:
Camera.MediaType = {
PICTURE: 0, // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
VIDEO: 1, // allow selection of video only, WILL ALWAYS RETURN FILE_URI
ALLMEDIA : 2 // allow selection from all media types
For reference read this.
Related
i am new in Ionic, i am trying to get picture and want to store copy or store image into internal storage so i can get back captured image on any view.
I don't know how to store images in internal Storage.
I have read this.
this is Helpful but not solving my issue.
My Controller is here.
Help me in this.
Controller
/**** tab Camera Controller ***/
.controller('tabCameraCtrl', function($scope, $state, $cordovaCamera) {
/**********function to Open Camera *********/
$scope.openCamera = function() {
document.addEventListener("deviceready", function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
// allowEdit: true,
//encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
//popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
// correctOrientation: true
};
$cordovaCamera.getPicture(options).then(function(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
$scope.lastPhoto = imageURI;
window.localStorage.setItem('image',JSON.stringify(imageURI));
console.log('success')
console.log('Image Address');
console.log(imageURI);
}, function(err) {
// error
console.log(err)
});
}, false);
}
Help me to solve this problem.
On setting correctOrientation : true, then image rotation issue is solved and thumbnail is set - But image path is: file://storage/emulated/0/Android/data/com.examole.helloworld/modified.jpg?149028394994
Without correctOrientation: true, image path is: file:///storage/emulated/0/DCIM/Camera/1490345556009.jpg
When trying to set another image with correctOrientation: true, then the latest selected image is not set.
Following is the code for your kind reference:
navigator.camera.getPicture(captureSuccess, onFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true,
allowEdit: true
});
Thanks in Advance.
You can try this,
$(document).on('click','.capture_photo',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.PNG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
});
});
// to call the success function of capture image(onPhotoDataSuccess)
function onPhotoDataSuccess(imageData) {
sessionStorage.setItem("img_api",imageData);
$('#captureimg').attr('src','data:image/jpeg;base64,' + imageData);
App.show_toast("Profile image updated successfully!");
}
//onfail
onFail(message) { alert('Failed because: ' + message); }
I have solved this and posted my answer
navigator.camera.getPicture(captureSuccess, onFail, {quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true,
});
var captureSuccess = function(mediaFiles) {
var fD = mediaFiles;
window.resolveLocalFileSystemURI(fD, function(fileEntry) {
fileEntry.file(function(fT) {
var fname = fileEntry.nativeURL.substr(fileEntry.nativeURL.lastIndexOf('/') + 1);
fileTransferUpload(fD,fname);
}, function() {
console.log('error');
});
}, onFError);
};
the method fileTransferUpload above will just set the image path in src.
in success callback function, image path is received and without getting nativeURL from this path, i have set the path itself in src.
Here's a better solution (involved a spot of digging through some Java files, but takes about 8 seconds)
in CameraLauncher.java (in the cordova-plugin-camera/src/android folder)
//Old:
String modifiedPath = getTempDirectoryPath() + "/modified"+".jpg";
this.callbackContext.success("file://" + modifiedPath + "?" + System.currentTimeMillis());
AKA just move the timestamp up in the filename.
//New:
String modifiedPath = getTempDirectoryPath() + "/modified"+ System.currentTimeMillis() +".jpg";
this.callbackContext.success("file://" + modifiedPath);
document.addEventListener("deviceready",onDeviceReady,false);
var pictureSource; // picture source
var destinationType; // sets the format of returned value
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
sorry, you want to add this code along with the that.
I am implementing a photo upload feature in my application,
user can upload a photo in two different ways, using the camera or photo album.
Main problem is when I open the camera or photo album the app is restarted.
I used different foreground camera plugins but problem is not solved.
When the camera or album opens, the app automatically pause and resume,
I'm already using resume event in my app, when app resumes opens the home page.
I need, after finishing image upload, to go to the previous page and not open the home page.
I'm using cordova 3.6.4 version.
function captureImage() {
navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 1
});
//window.history.back();
}
function captureSuccess(mediaFiles) {
//alert("###1");
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
function uploadFile(mediaFile) {
//alert("###2");
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
//alert("image path "+path);
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
alert("image upload failed");
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
I use this code (not mine) and it works well for capture photo and it doesn't restart the app :
function capturePhoto(){
navigator.camera.getPicture(uploadPhoto,null,{sourceType:1,quality:60});
}
function onPhotoDataSuccess(imageData) {
// Get image handle
//
var smallImage = document.getElementById('cameraPic');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src =imageData;
}
// Called when a photo is successfully retrieved
//
function onPhotoFileSuccess(imageData) {
// Get image handle
console.log(JSON.stringify(imageData));
// Get image handle
//
var smallImage = document.getElementById('cameraPic');
// Unhide image elements
//
smallImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
smallImage.src = 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('cameraPic');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
}
// A button will call this function
function capturePhotoWithData() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function capturePhotoWithFile() {
navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality:50, destinationType: Camera.DestinationType.FILE_URI, correctOrientation: true });
}
// A button will call this function
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,destinationType: destinationType.FILE_URI,
correctOrientation: true });
}
// Called if something bad happens.
//
function onFail(message) {
alert('Failed because: ' + message);
}
var pictureSource; // picture source
var destinationType; // sets the format of returned value
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
$(document).on('click','.capture_photo',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
// allowEdit : true,
encodingType: Camera.EncodingType.PNG,
// targetWidth: 100,
// targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
});
});
function onPhotoDataSuccess(imageData) {
sessionStorage.setItem("img_api",imageData);
$('#captureimg').attr('src','data:image/jpeg;base64,' + imageData);
}
$(document).on('click','.select_gallery',function(){
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
encodingType: Camera.EncodingType.PNG,
destinationType: destinationType.DATA_URL,
sourceType: pictureSource.SAVEDPHOTOALBUM });
});
function onFail(message) {
alert('Failed because: ' + message);
}
Hope, it will helpful
I'm new programing in sencha touch framework, i'm working in an app(android) which has to take a picture and show it later in another view, but the picture is taken without problems, but once i take the picture, the app crash, it even doesn't call the failure event. I'm using cordova's navigator.camera.getPicture function to take the picture. Could anybody tell me, what am i missing??
I did like this way you may try
config: {
cls:'cameraimageoverlay',
items: [
{
xtype: 'button',
ui: 'confirm',
iconCls: 'confirm',
id:'devicecapturephoto',
text: 'Take Photo',
margin: '10 40',
width: '72%',
height: 36
}
],
listeners:[
{
fn: 'capturePhoto',
event: 'tap',
delegate: '#devicecapturephoto'
}
]
}
capturePhoto function
capturePhoto:function() {
// Take picture using device camera and retrieve image as base64-encoded string
try{
var pictureSource; // picture source
var destinationType; // sets the format of returned value
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
// alert('device ready');
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;
}
// 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
//
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, correctOrientation: true,
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);
}
}
catch(err){
// alert(err);
}
}
you may refer http://docs.phonegap.com/en/2.3.0/cordova_camera_camera.md.html
How can I specify the name and destination of captured photo using Phonegap? Couldn't find this info anywhere. Right now it just goes to /sdcard/pic.jpg.
Here's what I have so far:
function capturePhoto() {
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.style.display = 'block';
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
try content://media/external/images/media/n
where n is the image number you are trying to call (1,2,3, etc)