Our App has a requirement to take multiple images and then display them for upload after the user has finished, Is this possible with IOS and Android camera. Not seeing any examples.
I have looked at many Cordova plugins, all seem to either support taking one image or selecting multiple from the gallery, not allowing taking multiple images with the camera.
If you have done this or know if this is possible, please help
You can use cordova-plugin-media-capture plugin.This plugin provides access to the device's audio, image, and video capture capabilities.
capture.captureImage
Start the camera application and return information about captured image files.
navigator.device.capture.captureImage(
CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]
);
Description
Starts an asynchronous operation to capture images using the device's camera application. The operation allows users to capture more than one image in a single session.
The capture operation ends either when the user closes the camera application, or the maximum number of recordings specified by CaptureImageOptions.limit is reached. If no limit value is specified, it defaults to one (1), and the capture operation terminates after the user captures a single image.
When the capture operation finishes, it invokes the CaptureCB callback with an array of MediaFile objects describing each captured image file. If the user terminates the operation before capturing an image, the CaptureErrorCB callback executes with a CaptureError object featuring a CaptureError.CAPTURE_NO_MEDIA_FILES error code.
Example
// capture callback
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// do something interesting with the file
}
};
// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};
// start image capture
navigator.device.capture.captureImage(captureSuccess, captureError, {limit:2});
Related
I'm new in flutter.
Hope my issue below will be same your issue in the past. And you can help me for this:
My situation is:
My app will capture an photo (using package camera: ^0.5.8+2). Then, this photo will be saved on gallery of user device (using package gallery_saver: ^2.0.1). Finally, I will open the gallery (using package photo_manager: ^0.5.7) to pick some photos which I captured before ==> This flow is really clear and simple, right? ^_^
But, I have already trap at this issue:
After I captured an photo, then open the gallery from my app, I can't see this photo (Althought I can see this photo on device gallery). I also print the log on console to make sure that: my recently photo was got by my app. But, I still see nothing, it's mean my app also can't read this recently photo.
So, what do I wrong? Or what am I missing? Everyone who have experience about this issue help me, pls!
Below is my source code:
This is function to take photo by using camera package (https://pub.dev/packages/camera)
/// Take an photo
_takePhoto() async {
try {
if (_numberPhotoTaken < widget.maxTaken) {
/// Path
var file = "${DateTime.now().toString()}.jpg";
var temporaryDir = (await getTemporaryDirectory()).path;
var pathSaved = join(temporaryDir, file);
/// Take photo
await _cameraController.takePicture(pathSaved);
/// save to gallery
GallerySaver.saveImage(pathSaved, albumName: galleryFolder).then((ok) {
if (ok) {
setState(() => _numberPhotoTaken++);
}
/// remove temporary file
File(pathSaved).delete();
});
} else {
AppDialog.inform(
this.context,
textLocale("Reached the maximum number of photos", this.context),
() {});
}
} on CameraException catch (e) {
} on Exception catch (ex) {
}
}
This is function to load asset from gallery by using photo manager package (https://pub.dev/packages/photo_manager)
/// fetching gallery's asset
/// return: list of asset entity in specific page
Future<List<GalleryEntity>> _fetchGalleryPaging() async {
/// load all assets in one album list
List<AssetPathEntity> albums = await PhotoManager.getAssetPathList(
onlyAll: true, type: RequestType.common);
List<AssetEntity> page = await albums[0].getAssetListPaged(_currentPage, widget.perPage);
/// return gallery entity list
return page.map<GalleryEntity>((e) => GalleryEntity(asset: e)).toList();
}
I'm currently test on my android device
When I open gallery on device, I wonder: the new photo which I have just captured not be arranged right (the newest photo must be at the end of gallery). After a few time (I'm not sure how many time), device gallery will auto refresh, and my recently photo will be arranged in the right way (it's at the end of gallery). And my app will read this photo perfectly (so strange for me)
UPDATE: one more thing, my photo will be saved into a separated folder in gallery
If you read till this line. I'm so appreciate about that. And I hope among of you have experience to solve this issue
Thanks all guys,
After a few time I made searching about my issue. I find out the main problem is the external storage was not rescan when I did an capturing photo, so my flutter app can not be display the new photo on gallery.
The solution for this issue is the package:
https://github.com/hui-z/image_gallery_saver
I'm not sure about the effective of this package, but for my scene, it's work as perfect as I wish.
Hope this help for anyone who also face same issue like me
Thanks all
Info: Ionic/Cordova application, File Transfer Plugin (ngCordova), Tested on Android.
I need user can pick multiple images from either camera or gallery. When I use images from camera, everything works perfectly. But when using more than one image from gallery, it only takes the newest picked image.
Hypothetical scenario:
I pick the first image from gallery, which gives me longpath/modified.jpg?12345678. I put this in imgArr array. Then I pick the second image from gallery, which gives me longpath/modified.jpg?99999, and put this into the next field of the array.
When looping and sending these to server, it only sends the image of longpath/modified.jpg?99999 TWICE, but with the name of both.
The array remembers these paths correctly, since I've alerted them right before the transfer.
This code is within a loop. i is a counter.
var idforitem = data;
var options = {
fileKey: "file",
fileName: imgArr[i].substr(imgArr[i].lastIndexOf('/') + 1),
chunkedMode: false,
mimeType: "image/jpeg",
params : {'id':idforitem}
};
$cordovaFileTransfer.upload("http://url/imgadd",imgArr[i], options).then(function(result) {
alert(result.response);
}, function(err) {
alert("Error");
}
);
Can anyone help me out with this one?
Thanks in advance.
Kinda solved it by adding this:
$cordovaFileTransfer.download(imageURI, cordova.file.dataDirectory + Math.floor((Math.random() * 10000) + 1) + ".jpg", {}, true).then(
function(fileEntry)
{
imgArr[0] = fileEntry.nativeURL;
img1=true;
},
function (error)
{
console.log(error);
}
);
Keeping the question open, since this doesn't seem like the best solution.
I'm doing a bit of feasability R&D on a project I've been thinking about, the problem is that I'm unfamiliar with the limitations of the Camera API or the OS itself.
I want to write a cordova app which when opened (and authorized), will take a picture every nth second and upload it to a FTP site. Consider it something like a CCTV function, where my site will continuously render the latest image to the user.
Some pseudo code:
while (true) {
var img = api.takePicture(args);
uploadImage(img);
thread.sleep(1000);
}
So my question is, can I access the camera and instruct it to take a picture without user intervention (again, after camera access is authorized)?
Examples or direction for any API call to accomplish it would be really appreciated. I saw this article, and the answer looks promising, but the OP has android and I'd to know if it behaves the same on iOS.
On a side note, how do I test my cordova application on my iPhone without buying an app store license? I only want to run it on my own device.
Solved using CameraPictureBackground plugin:
function success(imgurl) { console.log("Imgurl = " + imgurl); //here I added my function to upload the saved pictures //on my internet server using file-tranfer plugin }
function onFail(message) {
alert('Failed because: ' + message); }
function CaptureBCK() {
var options = {
name: "Image", //image suffix
dirName: "CameraPictureBackground", //foldername
orientation: "portrait", //or landscape
type: "back" //or front
};
window.plugins.CameraPictureBackground.takePicture(success, onFail, options); }
<button onclick="CaptureBCK();">Capture Photo</button> <br>
You will find your pictures under CameraPictureBackground directory in your device acrhive. I used also file-transfer plugin in order to directly upload the pictures on my server over the internet.
I'm trying to build a Vine-like app using the Ionic Framework. I've got the mediaCapture plugin working but it uses the native camera functionality. The user has to leave me app to record video using the native interface and then return to my app. How can add a button and camera controls within my app like Vine or Instagram?
You can use Camera plugin.
This plugin defines a global navigator.camera object, which provides an API for taking pictures and for choosing images from the system's image library.
If you want to get video file type of gallery, you can use mediaType, like this:
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
};
I did a PhoneGap Android app that starts the camera, a picture is taken and saved to sdcard. The app shows the picture on the initial screen. The app also allows to navigate through some additional web pages. If I navigate away (to another web page) and come back to the first screen, the picture is no longer there. I tried to get it from the sdcard and show it using the HTML tag, to be seen even before another picture is taken, but the picture is not shown (I see the "alt" text instead).
I am not sure whether my problem is clear, but I am ready to answer your questions to clarify it.
My project is in the GitHub at the address https://github.com/monicamarcus/Android_PhoneGap
Anyone can help me? Thanks!
The Javascript that shows the picture the first time:
//Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
var smallImage = document.getElementById('cameraPic');
smallImage.style.display = 'block'
smallImage.src = "data:image/jpeg;base64," + imageData;
}
Try this:
function onPhotoDataSuccess(imageData) {
localStorage.img="data:image/jpeg;base64,"+imageData;
var smallImage = document.getElementById('cameraPic');
smallImage.src= localStorage.img;
smallImage.style.display = 'block';
}
document.addEventListener('deviceready',function(){
if(typeof(localStorage.img)!='undefined'){
smallImage=document.getElementById('cameraPic');
smallImage.src=localStorage.img;
smallImage.style.display='block';
}
},false);