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 et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
- To send files the person already has: a drop zone.À la place : File upload
- For a long recording with editing: record, then trim with the video trimmer.À la place : Video trimmer
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { MediaCapture } from "@krizaka/ui/media-capture";Exemples
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 | Défaut | Description |
|---|---|---|---|
onCapturerequis | (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…). |
Accessibilité
- 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.
Clavier
| Touches | Action |
|---|---|
| Enter / Space | Turn the camera on, take the photo, start or stop the recording. |
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 2.4.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur 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.