I read something about Cordova having created a plugin for operating the built-in camera on mobile devices. Thinking this would be really cool for inclusion into many types of apps. Would this be possible to add to Wapper or perhaps there are already plans in the works to add this functionality?
Hi,
It is not too difficult to incorporate the camera in to your application.
First add the package:
cordova plugin add cordova-plugin-camera
Create a file called camera.js and add:
document.getElementById("cameraTakePicture").addEventListener
("click", cameraTakePicture);
function cameraTakePicture() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 100,
correctOrientation: true,
saveToPhotoAlbum: true,
destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
Add a button to activate the camera and a div to display the image:
<button id="cameraTakePicture">TAKE PICTURE</button>
<img id="myImage" class="img-fluid">
Then just link to the camera.js script in your page:
<script type="text/javascript" src="scripts/camera.js"></script>
Job done!
Adding the plugin:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/
Script, Button, and Image DIV (don’t use the install camera plugin from this tutorial as it won’t work):
https://www.tutorialspoint.com/cordova/cordova_camera.htm
Should be easy enough, a few minutes is all it took.
2 Likes
Thank you this is great.
1 Like
You can now access your device camera and photos for mobile and desktop apps. Please check:
This topic was automatically closed after 43 hours. New replies are no longer allowed.