Camera
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen
Embed a live camera preview and capture photos or video. Use it for a scanner or a custom capture screen.
Capture a photo and preview the result
import { Button, Camera, Image, VStack, cameraRef, signal } from 'kuito';
export default function Snap() {
const camera = cameraRef();
const photo = signal<string | null>(null);
async function take() {
try {
const picture = await camera.current?.takePicture({ quality: 0.8 });
photo.value = picture?.uri ?? null;
} catch (error) {
console.log('No picture:', error);
}
}
return (
<VStack flex={1}>
<Camera
ref={camera}
flex={1}
facing="back"
onError={(event) => console.log(event.code, event.message)}
/>
<Button disabled={!camera.ready.value} onPress={() => void take()}>
Take picture
</Button>
{photo.value ? <Image src={photo.value} width={96} height={96} /> : null}
</VStack>
);
}Behavior
Declare camera permission in config; recording with audio also needs microphone permission. Wait for camera.ready before calling methods. Captures return cache files, so copy a result to documents when it must persist. Test capture on a physical device.
Continue
Read Permissions for a complete workflow. See the complete prop reference for types and documented defaults.
Referenz
Signaturen
(props: NativeViewProps<CameraProps, CameraMethods>): KuitoElementParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
props | NativeViewProps<CameraProps, CameraMethods> | Ja | — |
Rückgabe
Props: NativeViewProps<CameraProps, CameraMethods>
Props (einschließlich geerbter Props) 93
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
opacity | Animatable<number> | Nein | — |
backgroundColor | Animatable<string> | Nein | — |
borderRadius | Animatable<number> | Nein | — |
borderColor | Animatable<string> | Nein | — |
width | Animatable<SizeValue> | Nein | — |
height | Animatable<SizeValue> | Nein | — |
translateX | Animatable<number> | Nein | — |
translateY | Animatable<number> | Nein | — |
scale | Animatable<number> | Nein | — |
scaleX | Animatable<number> | Nein | — |
scaleY | Animatable<number> | Nein | — |
rotate | Animatable<number> | Nein | Degrees. |
shadowColor | Animatable<string> | Nein | — |
shadowRadius | Animatable<number> | Nein | — |
shadowOffsetX | Animatable<number> | Nein | — |
shadowOffsetY | Animatable<number> | Nein | — |
padding | Prop<LengthPercentage> | Nein | — |
position | Prop<"relative" | "absolute"> | Nein | — |
id | string | Nein | — |
class | Prop<ClassNames> | Nein | Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads. |
style | StyleDeclarations | Nein | Styles of this view alone, compiled at build time: CSS properties in
camelCase. A value that changes must set a native prop (opacity). |
key | string | number | Nein | — |
paddingTop | Prop<LengthPercentage> | Nein | — |
paddingRight | Prop<LengthPercentage> | Nein | — |
paddingBottom | Prop<LengthPercentage> | Nein | — |
paddingLeft | Prop<LengthPercentage> | Nein | — |
minWidth | Prop<SizeValue> | Nein | — |
maxWidth | Prop<SizeValue> | Nein | — |
minHeight | Prop<SizeValue> | Nein | — |
maxHeight | Prop<SizeValue> | Nein | — |
aspectRatio | Prop<number> | Nein | Width divided by height; sizes the missing side from the other. |
top | Prop<LengthPercentageAuto> | Nein | — |
right | Prop<LengthPercentageAuto> | Nein | — |
bottom | Prop<LengthPercentageAuto> | Nein | — |
left | Prop<LengthPercentageAuto> | Nein | — |
margin | Prop<LengthPercentageAuto> | Nein | — |
marginTop | Prop<LengthPercentageAuto> | Nein | — |
marginRight | Prop<LengthPercentageAuto> | Nein | — |
marginBottom | Prop<LengthPercentageAuto> | Nein | — |
marginLeft | Prop<LengthPercentageAuto> | Nein | — |
flexGrow | Prop<number> | Nein | — |
flexShrink | Prop<number> | Nein | — |
flexBasis | Prop<SizeValue | "content"> | Nein | — |
flex | Prop<number> | Nein | A grow factor from a zero basis, as CSS flex: n; 0 is inflexible. |
alignSelf | Prop<"auto" | SelfAlignment> | Nein | — |
direction | Prop<"ltr" | "rtl"> | Nein | The way lines run; unset, the parent's, and the app's first language's at the root. |
boxSizing | Prop<"border-box" | "content-box"> | Nein | — |
paddingInlineStart | Prop<LengthPercentage> | Nein | Padding on the side lines start from: the left in ltr, the right in rtl. |
paddingInlineEnd | Prop<LengthPercentage> | Nein | Padding on the side lines end at: the right in ltr, the left in rtl. |
marginInlineStart | Prop<LengthPercentageAuto> | Nein | Margin on the side lines start from: the left in ltr, the right in rtl. |
marginInlineEnd | Prop<LengthPercentageAuto> | Nein | Margin on the side lines end at: the right in ltr, the left in rtl. |
insetInlineStart | Prop<LengthPercentageAuto> | Nein | left in ltr, right in rtl. |
insetInlineEnd | Prop<LengthPercentageAuto> | Nein | right in ltr, left in rtl. |
role | Prop<Role> | Nein | — |
onAction | (event: AccessibilityActionEvent) => void | Nein | The screen reader action taken, by name. |
accessible | Prop<boolean> | Nein | Makes the view one screen reader element, read as its label or its children's text. |
label | Prop<string> | Nein | What a screen reader says for the view. |
hint | Prop<string> | Nein | What happens when the view is activated, read after the label. |
actions | Prop<readonly AccessibilityAction[]> | Nein | Actions a screen reader offers; onAction receives the one taken. |
live | Prop<"off" | "polite" | "assertive"> | Nein | ARIA's aria-live: announces changes to the view's content, on iOS too. |
aria-disabled | Prop<boolean> | Nein | — |
aria-selected | Prop<boolean> | Nein | — |
aria-checked | Prop<boolean | "mixed"> | Nein | — |
aria-busy | Prop<boolean> | Nein | — |
aria-expanded | Prop<boolean> | Nein | — |
aria-valuemin | Prop<number> | Nein | — |
aria-valuemax | Prop<number> | Nein | — |
aria-valuenow | Prop<number> | Nein | — |
aria-valuetext | Prop<string> | Nein | — |
gestures | readonly Composable[] | Nein | The view's gestures; several race unless composed with together or orElse. |
transition | Partial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>> | Nein | How the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it. |
animate | Partial<Record<AnimatableProps, string | number>> | Nein | Animatable props whose every change moves as transition says; the first value applies at once. |
enter | Effect | Nein | Where the view enters from: fade.and(slide.up(12)). |
exit | Prop<Effect> | Nein | Where the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited. |
layout | Animation<number> | Nein | How the view moves to a new frame the layout gives it: layout={spring()}. |
overflow | Prop<"visible" | "hidden" | "clip" | "scroll"> | Nein | hidden and scroll clip; as in CSS, either lets a flex item shrink below its content. |
borderWidth | Prop<number> | Nein | — |
backgroundGradient | { angle: number; colors: string[];} | Nein | — |
color | Prop<string> | Nein | — |
sharedId | Prop<string> | Nein | A view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements). |
ref | ElementRef<NativeViewHandle<CameraMethods>> | Nein | — |
facing | Bound<CameraFacing> | Nein | back by default. |
flash | Bound<CameraFlash> | Nein | off by default. |
torch | Bound<boolean> | Nein | Keeps the light on while the preview runs. |
zoom | Bound<number> | Nein | From 0 (none) to 1 (the most the camera can), linearly. 0 by default. |
mode | Bound<CameraMode> | Nein | picture by default. Record videos in video. |
mute | Bound<boolean> | Nein | Records videos without sound, and without asking for the microphone. |
barcodes | Bound<BarcodeType[]> | Nein | Scans for these codes while the preview runs. |
onReady | (event: CameraReadyEvent) => void | Nein | The preview is running: the camera can take pictures and record. |
onError | (event: CameraErrorEvent) => void | Nein | — |
onBarcode | (event: BarcodeEvent) => void | Nein | Each time a code of barcodes comes into view. |
onAction — Methodensignaturen
Signaturen
(event: AccessibilityActionEvent): voidParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
event | AccessibilityActionEvent | Ja | — |
Rückgabe
void
backgroundGradient — verschachtelte Felder
backgroundGradient Felder
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
angle | number | Ja | — |
colors | string[] | Ja | — |
onReady — Methodensignaturen
Signaturen
(event: CameraReadyEvent): voidParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
event | CameraReadyEvent | Ja | — |
Rückgabe
void
onError — Methodensignaturen
Signaturen
(event: CameraErrorEvent): voidParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
event | CameraErrorEvent | Ja | — |
Rückgabe
void
onBarcode — Methodensignaturen
Signaturen
(event: BarcodeEvent): voidParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
event | BarcodeEvent | Ja | — |
Rückgabe
void
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.