Media capture
The camera in the page: a photo or a clip, front or back, the permission asked only on a gesture, and a way out every time the camera cannot start.
Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.
When to use
- To take a profile picture or a selfie for a verification without leaving the page.
- To record a short clip (a story, a reply, a proof) with a maximum length.
When not to use
- To send files the person already has: a drop zone.Use instead: File upload
- For a long recording with editing: record, then trim with the video trimmer.Use instead: Video trimmer
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { MediaCapture } from "@krizaka/ui/media-capture";Examples
Profile photo
The front camera, a photo: the prompt explains before the browser asks.
Take a profile picture with your camera.
Photo or clip
mode="both": a switch above the preview, clips up to 60 seconds.
Film a story of up to 60 seconds, or take a photo.
Props
The camera in the page: photo or clip, front or back, with a file-picker way out when the camera cannot start.
| Prop | Type | Default | Description |
|---|---|---|---|
onCapturerequired | (result: CaptureResult) => void | — | Called with a photo taken or a clip recorded (or a file picked in the fallback). |
aspectRatio | string | 3 / 4 | The width / height ratio of the preview. Default "3 / 4". |
audio | boolean | true | Records the microphone with a clip. Default true. |
autoStart | boolean | — | Starts the camera at mount (only when the permission is already granted — never a prompt on load). |
className | string | — | Classes merged on the root. |
facing | "user" | "environment" | user | The camera at first: user (front, mirrored, default) or environment (back). |
labels | Partial<MediaCaptureLabels> | — | The words, passed translated; English by default. |
maxDuration | number | — | The longest clip, in seconds: recording stops by itself. |
mode | "video" | "both" | "photo" | photo | What it captures: photo (default), video, or both (a switch above the preview). |
onError | ((error: unknown) => void) | — | Called when the camera cannot start (NotAllowedError, NotFoundError…). |
Accessibility
- A
regionnamed bylabels.region; the preview is decorative, the shutter is a button named by its action. - A refusal or a missing camera is announced (
role="alert") with the file picker as the way out. - The recording time is a
timer; under reduced motion the recording dot does not pulse.
Keyboard
| Keys | Action |
|---|---|
| Enter / Space | Turn the camera on, take the photo, start or stop the recording. |
Best practices
- Say why the camera is needed in
labels.promptbefore asking: the browser's prompt then makes sense. - Never ask on load:
autoStartstarts only when the permission is already granted. - Set
maxDurationfor clips and show the limit; send the blob with the file upload's queue. - In React Native, import it from
@krizaka/ui/native/media-capture(expo-camera, an optional peer).
Related components
Generated from the code of @krizaka/ui 2.4.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Image cropper
A fixed frame — square, round, 9:16, a banner — over a picture or a video the person drags and zooms; a focus point and a zoom out, cropRect for the pixels.
Video player
A video with accessible controls — HLS through an hls.js loaded only when needed, signed sources resolved at the last moment, subtitles, speed, full screen, a pause when it leaves the screen.