Capacitor Plugins
Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project.
Install
To install a plugin, find the plugin you want to use and install it using your package manager, like npm:
# Install the Capacitor Plugins
$ npm install @capacitor/camera
Usage
Once installed, plugins can be imported into a component and you can call the native functionality directly from your code.
Using the Camera plugin as an example, first install it:
- JavaScript
- Angular
- Vue
- React
import{Camera,CameraResultType}from'@capacitor/camera';
consttakePicture=async()=>{
const image =awaitCamera.getPhoto({
quality:90,
allowEditing:true,
resultType:CameraResultType.Uri
});
const imageUrl = image.webPath;
imageElement.src= imageUrl;
};
import{Component}from'@angular/core';
import{Camera,CameraResultType}from'@capacitor/camera';
@Component({...})
exportclassCameraComponent{
publicimageSrc: string |undefined='';
asynctakePicture(){
const image =awaitCamera.getPhoto({
quality:90,
allowEditing:true,
resultType:CameraResultType.Uri
});
const imageUrl = image.webPath;
this.imageSrc= imageUrl;
};
}
<template>
...
</template>
<script setup lang="typescript">
import{ ref }from'vue';
import{ Camera, CameraResultType }from'@capacitor/camera';
const imageSrc =ref<string|undefined>('');
consttakePicture=async()=>{
const image =await Camera.getPhoto({
quality:90,
allowEditing:true,
resultType: CameraResultType.Uri
});
const imageUrl = image.webPath;
imageSrc.value = imageUrl;
};
</script>
import{Camera,CameraResultType}from'@capacitor/camera';
import{ useState }from'react';
exportfunctionCameraComponent(){
const[imageSrc, setImageSrc]= useState<string |undefined>('');
consttakePicture=async()=>{
const image =awaitCamera.getPhoto({
quality:90,
allowEditing:true,
resultType:CameraResultType.Uri
});
const imageUrl = image.webPath;
setImageSrc(imageUrl);
};
return(...)
}