npminstall @capacitor/camera
npx cap sync

<!-- Trigger Google Play services to install the backported photo picker module. -->
<!--suppress AndroidDomInspection -->
<serviceandroid:name="com.google.android.gms.metadata.ModuleDependencies"
android:enabled="false"
android:exported="false"
tools:ignore="MissingClass">
<intent-filter>
<actionandroid:name="com.google.android.gms.metadata.MODULE_DEPENDENCIES"/>
</intent-filter>
<meta-dataandroid:name="photopicker_activity:0:required"android:value=""/>
</service>

<uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permissionandroid:name="android.permission.READ_EXTERNAL_STORAGE"android:maxSdkVersion="32"/>
<uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"android:maxSdkVersion="29"/>

classMyCameraModalextendsHTMLElement{
 facingMode ='environment';

componentOnReady(){
returnPromise.resolve();
}

present(){
// Show your custom camera UI, then dispatch exactly one 'onPhoto' event when done:
// - Blob: user took a photo
// - null: user cancelled
// - Error: something went wrong
// Example:
this.dispatchEvent(newCustomEvent('onPhoto',{ detail: photoBlob }));
}

dismiss(){
// Hide your custom camera UI (called by the plugin after receiving 'onPhoto')
}
}

customElements.define('pwa-camera-modal', MyCameraModal);

import{ Camera }from'@capacitor/camera';

consttakePicture=async()=>{
try{
const result =await Camera.takePhoto({
 quality:90,
 includeMetadata:true,
});

// result.webPath can be set directly as the src of an image element
 imageElement.src = result.webPath;

// On native: pass result.uri to the Filesystem API to get the full-resolution base64,
// or use result.thumbnail for a lower-resolution base64 preview.
// On Web: result.thumbnail contains the full image base64 encoded.

console.log('Format:', result.metadata?.format);
console.log('Resolution:', result.metadata?.resolution);
}catch(e){
const error = e asany;
// error.code contains the structured error code (e.g. 'OS-PLUG-CAMR-0003')
// when thrown by the native layer. See the Errors section for all codes.
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('takePhoto failed:', message);
}
};

import{ Camera, MediaTypeSelection }from'@capacitor/camera';

constpickMedia=async()=>{
try{
const{ results }=await Camera.chooseFromGallery({
 mediaType: MediaTypeSelection.All,// photos, videos, or both
 allowMultipleSelection:true,
 limit:5,
 includeMetadata:true,
});

for(const item of results){
console.log('Type:', item.type);// MediaType.Photo or MediaType.Video
console.log('webPath:', item.webPath);
console.log('Format:', item.metadata?.format);
console.log('Size:', item.metadata?.size);
}
}catch(e){
const error = e asany;
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('chooseFromGallery failed:', message);
}
};

import{ Camera }from'@capacitor/camera';

constrecordAndPlay=async()=>{
let videoUri:string|undefined;

try{
const result =await Camera.recordVideo({
 saveToGallery:false,
 isPersistent:true,// keep the file available across app launches
 includeMetadata:true,
});

 videoUri = result.uri;
console.log('Duration:', result.metadata?.duration);
console.log('Saved to gallery:', result.saved);
}catch(e){
const error = e asany;
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('recordVideo failed:', message);
return;
}

if(videoUri){
try{
await Camera.playVideo({ uri: videoUri });
}catch(e){
const error = e asany;
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('playVideo failed:', message);
}
}
};

import{ Camera }from'@capacitor/camera';

consteditFromBase64=async(base64Image:string)=>{
try{
const{ outputImage }=await Camera.editPhoto({
 inputImage: base64Image,// raw base64, no data URL prefix
});

// outputImage is the edited image, base64 encoded
 imageElement.src =`data:image/jpeg;base64,${outputImage}`;
}catch(e){
const error = e asany;
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('editPhoto failed:', message);
}
};

import{ Camera }from'@capacitor/camera';

consteditFromURI=async(uri:string)=>{
try{
const result =await Camera.editURIPhoto({
 uri,
 saveToGallery:false,
 includeMetadata:true,
});

// result.webPath can be used directly as an image src
 imageElement.src = result.webPath;

console.log('Format:', result.metadata?.format);
console.log('Size:', result.metadata?.size);
console.log('Saved to gallery:', result.saved);
}catch(e){
const error = e asany;
const message = error.code ?`[${error.code}] ${error.message}`: error.message;
console.error('editURIPhoto failed:', message);
}
};

// Before
const photo =await Camera.getPhoto({
 source: CameraSource.Camera,
 quality:90,
 allowEditing:true,
 resultType: CameraResultType.Uri,
 direction: CameraDirection.Rear,
 width:1280,
 height:720,
});
const imageUrl = photo.webPath;

// After
const result =await Camera.takePhoto({
 quality:90,
 editable:'in-app',// replaces allowEditing: true
 cameraDirection: CameraDirection.Rear,// replaces direction
 targetWidth:1280,// replaces width (1)
 targetHeight:720,// replaces height (1)
});
const imageUrl = result.webPath;

// Before
const photo =await Camera.getPhoto({
 source: CameraSource.Photos,
 quality:90,
 resultType: CameraResultType.Uri,
});
const imageUrl = photo.webPath;

// After
const{ results }=await Camera.chooseFromGallery({
 quality:90,
});
const imageUrl = results[0].webPath;

// Before
const photo =await Camera.getPhoto({
// source defaults to CameraSource.Prompt
 quality:90,
 resultType: CameraResultType.Uri,
});

// After: show your own UI to determine the source, then call the appropriate method
const result =await Camera.takePhoto({ quality:90});
// or
const{ results }=await Camera.chooseFromGallery({ quality:90});

const dataUrl =`data:image/${result.metadata.format};base64,${result.thumbnail}`;

import{ Filesystem }from'@capacitor/filesystem';

const{ data }=await Filesystem.readFile({ path: result.uri });
const dataUrl =`data:image/${result.metadata.format};base64,${data}`;

// Before
const{ photos }=await Camera.pickImages({
 quality:90,
 limit:5,
 width:1280,
 height:720,
});
for(const photo of photos){
console.log(photo.webPath);
}

// After
const{ results }=await Camera.chooseFromGallery({
 allowMultipleSelection:true,
 quality:90,
 limit:5,
 targetWidth:1280,// replaces width (1)
 targetHeight:720,// replaces height (1)
});
for(const result of results){
console.log(result.webPath);
}