Skip to content

Instantly share code, notes, and snippets.

@jsoneaday

jsoneaday/Camera bug fix

Last active Jan 16, 2020
Embed
What would you like to do?
import React, { useCallback, useEffect, useState } from "react";
import {
CameraResultType,
FilesystemDirectory,
Capacitor,
CameraSource
} from "@capacitor/core";
import { useCamera, availableFeatures } from "@ionic/react-hooks/camera";
import { useFilesystem } from "@ionic/react-hooks/filesystem";
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";
export const LOG_PREFIX = "[Camera] ";
const Camera: React.FC = () => {
const { readFile, writeFile, getUri } = useFilesystem();
const { photo, getPhoto } = useCamera();
const [lastWebPath, setLastWebPath] = useState("");
const [lastPhotoPath, setLastPhotoPath] = useState("");
const { get, set } = useStorage();
const triggerCamera = useCallback(async () => {
if (availableFeatures.getPhoto) {
await getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.Uri,
source: CameraSource.Camera
});
}
}, [getPhoto]);
useEffect(() => {
if (photo && photo.webPath !== lastWebPath) {
setLastWebPath(photo.webPath || "");
console.log(LOG_PREFIX + "photo.webPath", photo.webPath);
console.log(LOG_PREFIX + "lastWebPath", lastWebPath);
readFile({
path: photo ? photo.path || photo.webPath || "" : ""
})
.then(photoInTemp => {
let date = moment().format("MM-DD-YY-h-mm-ss");
let fileName = date + ".jpg";
// copy file into local filesystem, as temp will eventually be deleted
writeFile({
data: photoInTemp.data,
path: fileName,
directory: FilesystemDirectory.Documents
}).then(() => {
// now we try to read the file
getUri({
directory: FilesystemDirectory.Documents,
path: fileName
}).then(async finalPhotoUri => {
const filePath = finalPhotoUri.uri;
const photoUrl = Capacitor.convertFileSrc(filePath);
if (photoUrl !== lastPhotoPath) {
setLastPhotoPath(photoUrl);
}
const imagePaths = await get("imagePaths");
const imagePathsArray = imagePaths ? JSON.parse(imagePaths) : [];
imagePathsArray.push({
fileName
});
const imagePathsArrayString = JSON.stringify(imagePathsArray);
await set("imagePaths", imagePathsArrayString);
console.log(LOG_PREFIX + "imagePaths", await get("imagePaths"));
});
});
})
.catch(err => {
console.log(err);
});
}
}, [
photo,
readFile,
writeFile,
getUri,
get,
set,
lastPhotoPath,
lastWebPath
]);
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>
{lastPhotoPath && <img src={lastPhotoPath} 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