Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { useCallback, useEffect } from "react";
import {
CameraResultType,
FilesystemDirectory,
Plugins,
Capacitor
} from "@capacitor/core";
import { useCamera, availableFeatures } from "@ionic/react-hooks/camera";
import { useStorage } from "@ionic/react-hooks/storage";
import moment from "moment";
import {
IonButton,
IonContent,
IonHeader,
IonToolbar,
IonTitle,
IonPage,
IonText,
IonCard,
IonCardHeader,
IonCardContent,
IonCardTitle,
IonItemDivider
} from "@ionic/react";
const Camera: React.FC = () => {
const { Filesystem } = Plugins;
const { photo, getPhoto } = useCamera();
const { get, set } = useStorage();
const triggerCamera = useCallback(async () => {
if (availableFeatures.getPhoto) {
await getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.Uri
});
}
}, [getPhoto]);
useEffect(() => {
if (photo) {
console.log("photo", photo);
Filesystem.readFile({
path: photo ? photo.path || photo.webPath || "" : ""
})
.then(photoInTemp => {
let date = moment().format("MM-DD-YY-h-mm-ss");
let fileName = date + ".jpg";
console.log("fileName", fileName);
// copy file into local filesystem, as temp will eventually be deleted
Filesystem.writeFile({
data: photoInTemp.data,
path: fileName,
directory: FilesystemDirectory.Data
}).then(() => {
// now we try to read the file
Filesystem.getUri({
directory: FilesystemDirectory.Data,
path: fileName
}).then(async finalPhotoUri => {
console.log("file uri", finalPhotoUri.uri);
const photoUrl = Capacitor.convertFileSrc(finalPhotoUri.uri);
console.log("final photo url", photoUrl);
const existingImageNames = await get("imageNames");
let imageNames = existingImageNames || "";
imageNames = imageNames + "," + fileName;
await set("imageNames", imageNames);
console.log("test image name saved", await get("imageNames"));
const imagePaths = await get("imagePaths");
const imagePathsArray = imagePaths ? JSON.parse(imagePaths) : [];
imagePathsArray.push({
fileName,
photoUrl
});
const imagePathsArrayString = JSON.stringify(imagePathsArray);
await set("imagePaths", imagePathsArrayString);
console.log("test image paths saved", await get("imagePaths"));
});
});
})
.catch(err => {
console.log(err);
});
}
}, [photo, Filesystem]);
const onClick = () => {
triggerCamera();
};
if (availableFeatures.getPhoto) {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Camera</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonCard>
<IonItemDivider>
<IonCardHeader>
<IonCardTitle>My Photo</IonCardTitle>
</IonCardHeader>
</IonItemDivider>
<IonCardContent>
{photo && <img src={photo.webPath} alt="my pic" />}
<IonButton style={{ marginTop: ".75em" }} onClick={onClick}>
camera
</IonButton>
</IonCardContent>
</IonCard>
</IonContent>
</IonPage>
);
}
return (
<IonPage>
<IonContent>
<IonText>No Camera Available</IonText>
</IonContent>
</IonPage>
);
};
export default Camera;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment