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.
Related
I need to hit an API endpoint, which returns a pdf file (not a url to a pdf, but the actual data), then somehow display this pdf in my ionic application. Ideally, I'd like to just give it to some other application like the phone's mobile web browser but I'd be open to trying to embed it within my app as well. On iOS, I just use $window.open(url) and mobile safari knows to download and display the pdf that is returned. However, Android tries to download the file then tells me that it can't be opened when I try to open it.
I've also tried embedding it in the app with <embed> but nothing gets embedded. However, a similar method works with images in <img ng-src="url">.
I've also tried messing around with cordova FileOpener2 but am having a lot of trouble getting anything to work in that. If that's the right way to do this, I'd be open to re-visiting that method.
The closest I've gotten is definitely just sending it to the devices mobile browser as that works perfectly on iOS.
I solved it using filetransfer and fileopener2. My code is below. The main issues I ran into was not having <access origin="cdvfile://*" /> in my config.xml file and not having ngCordova installed correctly.
if (ionic.Platform.isIOS())
$window.open(APIUrl, '_blank', 'location=no');
else if (ionic.Platform.isAndroid()) {
var fileExtension = filename.substr(filename.lastIndexOf('.')+1);
//I have a dictionary with this somewhere else
var MIMEType = extToMime[fileExtension];
var uri = encodeURI(APIurl);
var fileURL = "cdvfile://localhost/persistent/file."+fileExtension;
$cordovaFileTransfer.download(uri, fileURL, {}, true)
.then(function(result) {
$cordovaFileOpener2.open(
fileURL,
MIMEType
).then(function() {
console.log("SUCCESS");
}, function(e) {
console.log("ERROR");
console.log(JSON.stringify(e));
});
}, function(e) {
console.log("Error: " + JSON.stringify(e));
});
}
I am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.
For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
window.open(urlData, "_blank", "location=no,enableviewportscale=yes");
I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.
Alternative: just store that whole data string in your database. Then when you render your tag you can simply dump it into the src
attribute:>" />
After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.
Thanks
First, window.open probably isn't working because all URLs have to be granted access specifically, for security. You can try to bypass it with this in your config.xml -- I don't know if it will work for data: URLs.
<access origin="*" subdomains="true"/>
<preference name="WebSecurity" value="disable"/>
If this doesn't work, how to show an image in a pop-up comes down to the design of your app. If you're using something like Ionic Framework, Bootstrap, jQueryUI, or Ratchet, they each have components for Modals or Dialogs you could potentially use. If you're not using a UI framework, you'll have to design your own pop-up div to contain the image tag, that is hidden again when you tap or dismiss it. Finding information on Google about how to do this is not very hard.
Good luck!
I am able to solve this issue in BlackBerry using below steps.
1)Remove webWorks.js from index.html
2)Replace below script inside index.html
<script src="worklight/cordova.js"></script> to <script src="../../cordova.js"></script>
3) Add below code inside js file. Need to pass urlData as Base64 string and filename.
requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function (fs) {
var ft = new FileTransfer(),
localPath = fs.root.toURL() + fileName;
ft.download(urlData, localPath, function (entry) {
entry.file(function (file) { console.log(file.size); });
window.open(localPath, "_blank", "location=yes,closebuttoncaption=Close,enableViewportScale=yes");
}, function (e) { console.log('download error'); console.log(e); });
});
How do you include a picture in Titanium's Facebook Module dialog? In Titanium's example, the picture property in the dialog is a link of a picture from a website:
var data =
{
link : "http://www.appcelerator.com",
name : "Appcelerator Titanium Mobile",
message : "Checkout this cool open source project for creating mobile apps",
caption : "Appcelerator Titanium Mobile",
picture : "http://developer.appcelerator.com/assets/img/DEV_titmobile_image.png",
description : "You've got the ideas, now you've got the power. Titanium translates " +
"your hard won web skills into native applications..."
};
fb.dialog("feed", data, function(e)
{
if(e.success && e.result)
{
alert("Success! New Post ID: " + e.result);
}
else
{
if(e.error)
{
alert(e.error);
}
else
{
alert("User canceled dialog.");
}
}
});
But what if you want to use a picture that's local and NOT via a link of a website like this?
var data =
{
link: "http://play.google.com/",
name: "Android app's name",
picture: "file:///data/data/com.appid/app_appdata/directory/name-of-image.jpg"
};
I get the picture property formatting error if I use the code above. See this image for visual reference: http://postimg.org/image/wjefdlalb/
I've tried using the FileSystem like this:
function getFile()
{
var imageFileToPost;
var imageFile = Ti.Filesystem.getFile("file:///data/data/com.appid/app_appdata/directory/name-of-image.jpg");
if (imageFile.exists())
{
console.log("exists");
imageFileToPost = imageFile.read();
}
return imageFileToPost;
}
var data =
{
link: "http://play.google.com/",
name: "Android app's name",
picture: getFile()
};
And the post is successful, there are no errors BUT the picture was NOT published on Facebook.
Note: I would use the graph but I need to use permissions like 'publish_actions' which means I have to to have Facebook review the app but they don't like prefill messages even when the user can edit message anyways. So is this really just a formatting issue with Facebook Module's dialog or it only takes URLs of a picture? If it's a formatting issue, can anyone tell me how to format this correctly because I really need to use the picture that's local and not from a website?
The answer is maybe a bit late, but I had the same issue recently.
It does not seem to be possible with the current version of the Facebook module to create a dialog to share local images.
Because I also needed this functionality for one of my apps, I forked the module (https://github.com/dthulke/ti.facebook) and added a method presentPhotoShareDialog which takes an image blob as argument. Unfortunately it only works if the native Facebook app is installed.
Example:
if (fb.getCanPresentShareDialog()) {
fb.presentPhotoShareDialog({
imageBlob : view.toImage()
});
}
I have a Phonegap app that needs to let the user both take photos using the phone's camera and let the user select from photo's already on the device.
I need to capture the date/time the photo was taken as part of the metadata, but I'm having a hard time figuring out how to do this with Phonegap / Cordova.
Initially I thought I could use the File API's FileEntry.getMetadata() call but this doesn't return a valid date for the modificationTime attribute. I think that phonegap also transforms the file on the device so that the you recieve back from the camera plugin is not the original file on the device, so even if the getMetadata() call worked, the date wouldn't be the correct one.
Is there any other way around this, short of writing my own version of the camera plugin for each platform I need?
Seems crazy that this would be the only way around it.
So, I've managed to figure this out.
The date/time stamp along with a bunch of other information can be retrieved from the EXIF data tags inside the JPEG file. This can be done using this helpful JS library - https://github.com/jseidelin/exif-js
Unfortunately the Cordova camera plugin for Android doesn't copy EXIF tags when transforming an image selected from the gallery, only when taking an image using the camera, so this is a problem, but I will fix this by forking the plugin. The iOS version of the plugin seems to do this right thing.
Code for anyone interested -
var source = fromCamera
? Camera.PictureSourceType.CAMERA
: Camera.PictureSourceType.PHOTOLIBRARY;
var opts = {
encodingType: Camera.EncodingType.JPEG,
sourceType: source,
destinationType: Camera.DestinationType.NATIVE_URI
};
navigator.camera.getPicture(
function(imageURI) {
window.resolveLocalFileSystemURL(imageURI,
function(entry) {
entry.file(function(file) {
EXIF.getData(file, function() {
var datetime = EXIF.getTag(this, "DateTimeOriginal");
alert(datetime);
});
// do something useful....
}, standardErrorHandler);
},
function(e) {
alert('Unexpected error obtaining image file.');
standardErrorHandler(e);
});
},
function() {
// nada - cancelled
},
opts);
Like everyone else I dislike answers that start with "do this a completely different way" but I had the same problems as the original poster and using the alternate camera plugin cordova-plugin-camera-with-exif was the best solution I found.
I have a Phonegap app that needs to let the user both take photos using the phone's camera and let the user select from photo's already on the device.
I need to capture the date/time the photo was taken as part of the metadata, but I'm having a hard time figuring out how to do this with Phonegap / Cordova.
Initially I thought I could use the File API's FileEntry.getMetadata() call but this doesn't return a valid date for the modificationTime attribute. I think that phonegap also transforms the file on the device so that the you recieve back from the camera plugin is not the original file on the device, so even if the getMetadata() call worked, the date wouldn't be the correct one.
Is there any other way around this, short of writing my own version of the camera plugin for each platform I need?
Seems crazy that this would be the only way around it.
So, I've managed to figure this out.
The date/time stamp along with a bunch of other information can be retrieved from the EXIF data tags inside the JPEG file. This can be done using this helpful JS library - https://github.com/jseidelin/exif-js
Unfortunately the Cordova camera plugin for Android doesn't copy EXIF tags when transforming an image selected from the gallery, only when taking an image using the camera, so this is a problem, but I will fix this by forking the plugin. The iOS version of the plugin seems to do this right thing.
Code for anyone interested -
var source = fromCamera
? Camera.PictureSourceType.CAMERA
: Camera.PictureSourceType.PHOTOLIBRARY;
var opts = {
encodingType: Camera.EncodingType.JPEG,
sourceType: source,
destinationType: Camera.DestinationType.NATIVE_URI
};
navigator.camera.getPicture(
function(imageURI) {
window.resolveLocalFileSystemURL(imageURI,
function(entry) {
entry.file(function(file) {
EXIF.getData(file, function() {
var datetime = EXIF.getTag(this, "DateTimeOriginal");
alert(datetime);
});
// do something useful....
}, standardErrorHandler);
},
function(e) {
alert('Unexpected error obtaining image file.');
standardErrorHandler(e);
});
},
function() {
// nada - cancelled
},
opts);
Like everyone else I dislike answers that start with "do this a completely different way" but I had the same problems as the original poster and using the alternate camera plugin cordova-plugin-camera-with-exif was the best solution I found.