@deep-foundation/capacitor-camera
v1.1.15
Published
A deep package that is based on @capacitor/camera package
Downloads
39
Maintainers
Keywords
Readme
Provides links&functions based on capacitor-camera
.
Camera
The Camera
link serves as a container for link structures representing records inside deep.
You need only one container link per deep instance.
Prerequisitions
- Install this package in your deep by using npm-packager
- Provide permissions to this package
Usage
- Import the library into your TypeScript project:
import Camera, { createContainer } from "@deep-foundation/capacitor-camera";
- For mobile apps use getCameraPermissions function to request user action for setting app's camera and gallery permissions.
const CameraPermissions = await getCameraPermissions();
- Create container link of type
Camera
to store Camera data:
const containerLinkId = await createContainer(deep)
You can also create it manually inside your deepcase client. Open Insert menu, search for and then insert "Camera" type link.
- Take photos:
Capture a new photo.
const photo = await Camera.takePhoto(options?);
Upload the array of captured photos to deep database.
await Camera.uploadPhotos({ deep, containerLinkId, photos });
// To upload one photo pass it inside an array. [photo]
- Pick photos from gallery:
Pick a new photo.
const galleryPhotos = await Camera.pickGalleryPhotos(options?);
Upload the array of picked photos to deep database.
await Camera.uploadGallery({ deep, containerLinkId, galleryPhotos });
- Download images from deep database:
Download all existing images made by this camera package as an array.
const images = await downloadImages(deep);
React Usage
- Import CapacitorCamera react component or hooks:
import { WithCapacitorCamera, CapacitorCamera, useCamera, useGallery, usePermissions, useContainer } from "@deep-foundation/capacitor-camera";
- Create CapacitorCamera component instance inside your deep app and pass a DeepClient instance.
function Page() {
return <CapacitorCamera deep={useDeep()} />
}
You will see basic ui with all package functionality.
Alternatively you can use WithCapacitorCamera Component like that:
<WithCapacitorCamera deep={yourDeepInstance} containerLinkId={yourContainerLinkId}>
<CapacitorCamera />
</WithCapacitorCamera>
- Custom hooks can be used anywhere in your deep app:
useCamera() hook for taking a new photo with the camera. Automatically uploads new photos into your deep instance.
const { photos, newPhoto } = useCamera({ deep, containerLinkId });
useGallery() hook for picking photos from gallery. Automatically uploads picked photos into your deep instance.
const { galleryPhotos, pickPhotosFromGallery } = useGallery({ deep, containerLinkId });
- If there is no internet connection photos are stored locally on your device and then will upload as soon as connection reappears.
useContainer() hook to get existing or create a new container link ID.
const containerLinkId = useContainer(deep);
usePermissions() hook to manage camera and gallery permissions on mobile devices.
const { cameraPermissions, getPermissions } = usePermissions();
Contribution
Feel free to contribute. Please fork the repository and submit a pull request for any bugs, improvements, or features.