Coder Social home page Coder Social logo

capacitor-camera's Introduction

npm Gitpod Discord

Provides links&functions based on capacitor-camera.

Documentation

List of links

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

  1. Import the library into your TypeScript project:
import Camera, { createContainer } from "@deep-foundation/capacitor-camera";
  1. For mobile apps use getCameraPermissions function to request user action for setting app's camera and gallery permissions.
const CameraPermissions = await getCameraPermissions();
  1. 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.

  1. 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]
  1. 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 });
  1. Download images from deep database:

Download all existing images made by this camera package as an array.

const images = await downloadImages(deep);

React Usage

  1. Import CapacitorCamera react component or hooks:
import { WithCapacitorCamera, CapacitorCamera, useCamera, useGallery, usePermissions, useContainer } from "@deep-foundation/capacitor-camera";
  1. 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>
  1. 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.

capacitor-camera's People

Contributors

freephoenix888 avatar ivansglazunov avatar romanxz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

capacitor-camera's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.