Camera

Camera

Capture photos and select images from the gallery

Tags: photo image capture gallery picture

The useCamera composable provides access to the device camera for taking photos and selecting images from the gallery. It supports quality settings, image editing, and returns both file paths and base64 data.

Import

<script>
  import { useCamera } from '@classic-homes/native/svelte';
</script>

// React
import { useCamera } from '@classic-homes/native/react';

Basic Usage

<script lang="ts">
  import { useCamera } from '@classic-homes/native/svelte';

  const camera = useCamera();
</script>

{#if camera.photo}
  <img src={camera.photo.webPath || camera.photo.dataUrl} alt="Captured" />
{/if}

<button onclick={() => camera.takePhoto({ quality: 90 })}>Take Photo</button>
<button onclick={() => camera.pickFromGallery()}>Choose from Gallery</button>

API Reference

Property	Type	Description
`photo`	`CameraPhoto \| null`	Last captured or selected photo
`isLoading`	`boolean`	Whether a camera operation is in progress
`error`	`Error \| null`	Current error if any
`permissionState`	`PermissionState \| null`	Current permission state
`takePhoto`	`(options?) => Promise<CameraPhoto>`	Open camera and take a photo
`pickFromGallery`	`(options?) => Promise<CameraPhoto>`	Pick an image from the photo gallery
`requestPermissions`	`() => Promise<PermissionState>`	Request camera permissions
`clearPhoto`	`() => void`	Clear the current photo

Accessibility

Works with screen readers and assistive technologies
Provides loading and error states for accessible status updates
Keyboard accessible controls

Geolocation - Access device GPS for current position and location tracking
Secure Storage - Encrypted key-value storage for sensitive data

On this page