I was desperately looking around the internet for:
How to use PhoneGap to access the device's camera and put it inside my HTML, e.g. in a frame and take a snapshot with my custom button I created in that HTML. So, not using the device's native camera interface.
Mostly they all say it isn't possible with PhoneGap.
Could someone please provide a comprehensive step-by-step tutorial on how to do it in Eclipse for Android, no matter if it is PhoneGap or some other approach.
Thank you very much
I found this custom plugin on github while searching for the same:
Cordova-CanvasCamera
To set install:
Copy CanvasCamera.h and CanvasCamera.m to Plugins directory inside your PhoneGap project.
Edit your config.xml and add CanvasCamera into your Plugins list.
Copy CanvasCamera.js into your www directory and add a script tag for it in your index.html.
If not already present, add the CoreVideo.framework library in the Build Phases tab of the project
The following is a sample code implementation:
Configuration for <img>:
<img id="camera" width="352" height="288" />
<script>
CanvasCamera.capture = function(data) {
document.getElementById('camera').src = data;
}
</script>
Configuration for <canvas>:
<canvas id="camera" width="352" height="288"></canvas>
<script>
var context = document.getElementById('camera').getContext("2d");
var camImage = new Image();
camImage.onload = function() {
context.drawImage(camImage, 0, 0);
};
CanvasCamera.capture = function(data) {
camImage.src = data;
};
</script>
Start capture:
<script>
document.addEventListener("deviceready", function() {
CanvasCamera.start();
});
</script>
Related
I am trying to edit my WordPress theme file to show one ad code if an Android device is detected, another set of code if iOS.
The code is in the format:
<script type="text/javascript" src="//xxxxxxxx.js"></script>
I have tried several previous answers, such as the following:
Detecting iOS / Android Operating system
Detect Android phone via Javascript / jQuery
What is the best way to detect a mobile device in jQuery?
All of which are slightly different and cause my page to not load (blank page).
Could someone please give me a hand and post the full simplest/fastest code to simply detect Android versus iOS and do nothing for anything else (i.e. a Windows PC). Something I can just copy and paste into the theme files where I want it.
Edit: I also tried things like the following to no avail (this was exactly what I pasted into the WordPress theme file, without the xxx and including proper reference to external .js file:
<?php var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {?>
<script type="text/javascript" src="xxxxxxx.js"></script>
<?php } ?>
and
<?php function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /Android/i ) )
{?>
<script type="text/javascript" src="//xxxxxxx.js"></script>
<?php}
} ?>
[EDIT]
Try changing your code to the below snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isIOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
if(isAndroid()) { $.getScript("//cdn.bounce.bar/xxxx.js"); }
</script>
The reason what you tried above doesn't work is because you are trying to put javascript code into a PHP function when the interpreter is looking for PHP code.
If you have direct access to the HTML page, then you could do something like the following. This code is taken almost directly from Detect if browser is running on an Android or iOS device.
<script>
function isAndroid() { return /Android/i.test(navigator.userAgent); }
function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
</script>
Remember that PHP code is generally server side and javascript code is generally client side. I would try to load the script using Javascript depending on the OS type. Something like this might work if you are using Jquery:
<script>
if(isAndroid()) {
$.getScript("//xxxxxxx.js");
}
</script>
I'm still not exactly sure what you are trying to do, but let me know if this doesn't work and provide more details, and I'll try to help out.
You could do this
if(/Android/i.test(navigator.userAgent) ) {
..............
}
else if(/iPhone/iPad/i.test(navigator.userAgent) ){}
I was working through the Ionic tutorial for using the Cordova Camera API.
http://learn.ionicframework.com/formulas/cordova-camera/
Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.
I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?
My config:
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
...
The function in my controller:
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.cameraPic = imageURI;
}, function(err) {
$scope.cameraPic = "error";
console.err(err);
});
};
My view:
<ion-view>
<ion-content>
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="getPhoto()">
Take Photo
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
{{cameraPic}}
</ion-content>
</ion-view>
This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?
EDIT
Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.
Definitely looking like a local file access issue.
As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:
NOTE: The camera API only works on a real device, and not in the
emulator.
Source: http://ngcordova.com/docs/plugins/camera/
This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.
I am trying to disable animations in Ionic Framework for Android OS. I have tried:
<body ng-app="myApp" animation="{'no-animation': ionic.Platform.is('android')}">
This doesn't work. When I change animation to ng-animation, it adds the class "no-animation" to navbar but doesn't disable the animation. Is there any way I can target specific OSes in Ionic Framework?
Check out Ionic.Platform: http://ionicframework.com/docs/api/utility/ionic.Platform/ Also, the Device plugin in general for Cordova could help.
I used some vanilla javascript to add the attribute which worked. Although I am not so sure if it is the proper way to do. Here is the code added to index.html file:
<script>
var noAnimation = ionic.Platform.is('android'),
body = document.getElementById("bd"),
navbar = document.getElementById("nb");
if(noAnimation) {
body.setAttribute('animation', 'no-animation');
navbar.setAttribute('animation', 'no-animation');
}
</script>
Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app
Thanks
You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is..
You can access Features such as:
Start a camera preview from HTML code.
Drag the preview box.
Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.
Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.
Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />
in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.
UPDATE:10th Oct 2017
It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.
I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:
HTML:
<html>
<head>
</head>
<body>
<form><input type='button' id='snapshot' value="snapshot"/></form>
<video autoplay></video>
<canvas id='canvas' width='100' height='100'></canvas>
<script type="text/javascript" src="findit.js"></script>
</body>
</html>
findit.js
var onFailSoHard = function(e)
{
console.log('failed',e);
}
window.URL = window.URL || window.webkitURL ;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('video');
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true},function(stream) {
video.src = window.URL.createObjectURL(stream);
},onFailSoHard);
}
document.getElementById('snapshot').onclick = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0);
}
Live Demo:
A personal project
More Resources, this is what I used:
Webcam Access
Update:
This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.
You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.
var getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;
Hope it helps.
There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.
Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app
Thanks
You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is..
You can access Features such as:
Start a camera preview from HTML code.
Drag the preview box.
Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.
Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.
Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />
in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.
UPDATE:10th Oct 2017
It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.
I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:
HTML:
<html>
<head>
</head>
<body>
<form><input type='button' id='snapshot' value="snapshot"/></form>
<video autoplay></video>
<canvas id='canvas' width='100' height='100'></canvas>
<script type="text/javascript" src="findit.js"></script>
</body>
</html>
findit.js
var onFailSoHard = function(e)
{
console.log('failed',e);
}
window.URL = window.URL || window.webkitURL ;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('video');
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true},function(stream) {
video.src = window.URL.createObjectURL(stream);
},onFailSoHard);
}
document.getElementById('snapshot').onclick = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0);
}
Live Demo:
A personal project
More Resources, this is what I used:
Webcam Access
Update:
This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.
You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.
var getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;
Hope it helps.
There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.