Chapter 4 of 12 ~16 min read
Camera & Filesystem
Side-by-side Cordova vs Capacitor — practical migration with working code.
Camera Plugin Migration
Cordova Camera
// Install: cordova plugin add cordova-plugin-camera
navigator.camera.getPicture(onSuccess, onFail, {
quality: 80,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
correctOrientation: true
});
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed: ' + message);
} Capacitor Camera
// Install: npm install @capacitor/camera
import {
Camera, CameraResultType, CameraSource
} from '@capacitor/camera';
async function takePicture() {
const image = await Camera.getPhoto({
quality: 80,
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
correctOrientation: true,
});
// image.webPath works directly in <img src>
const imgEl = document.getElementById('myImage');
imgEl.src = image.webPath!;
}
// Pick from gallery:
async function pickPhoto() {
const image = await Camera.getPhoto({
resultType: CameraResultType.DataUrl,
source: CameraSource.Photos,
});
}Permissions Declaration
Cordova — config.xml
<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name=
"android.permission.CAMERA" />
<uses-permission android:name=
"android.permission.READ_EXTERNAL_STORAGE"/>
</config-file>
<!-- Injected at build time — fragile --> Capacitor — direct in AndroidManifest.xml
<!-- android/app/src/main/AndroidManifest.xml -->
<uses-permission
android:name="android.permission.CAMERA" />
<uses-permission
android:name="android.permission.READ_MEDIA_IMAGES"/>
<!-- You edit this file directly — no hooks! -->
<!-- Checked into git, always visible -->Filesystem / File Plugin
Cordova File
// cordova-plugin-file — callback hell
window.resolveLocalFileSystemURL(
cordova.file.dataDirectory,
function(dirEntry) {
dirEntry.getFile('notes.txt', { create: true },
function(fileEntry) {
fileEntry.createWriter(function(writer) {
writer.onwriteend = function() {
console.log('Saved!');
};
var blob = new Blob(['Hello World'], {
type: 'text/plain'
});
writer.write(blob);
});
}
);
}
); Capacitor Filesystem
import {
Filesystem, Directory, Encoding
} from '@capacitor/filesystem';
// Write a file
await Filesystem.writeFile({
path: 'notes.txt',
data: 'Hello World',
directory: Directory.Data,
encoding: Encoding.UTF8,
});
// Read a file
const result = await Filesystem.readFile({
path: 'notes.txt',
directory: Directory.Data,
encoding: Encoding.UTF8,
});
console.log(result.data);