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

tsx
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

ts
(props: NativeViewProps<CameraProps, CameraMethods>): KuitoElement

Parameter

NameTypErforderlichBeschreibung
propsNativeViewProps<CameraProps, CameraMethods>Ja—

Rückgabe

KuitoElement

Props: NativeViewProps<CameraProps, CameraMethods>

Props (einschließlich geerbter Props) 93

NameTypErforderlichBeschreibung
opacityAnimatable<number>Nein—
backgroundColorAnimatable<string>Nein—
borderRadiusAnimatable<number>Nein—
borderColorAnimatable<string>Nein—
widthAnimatable<SizeValue>Nein—
heightAnimatable<SizeValue>Nein—
translateXAnimatable<number>Nein—
translateYAnimatable<number>Nein—
scaleAnimatable<number>Nein—
scaleXAnimatable<number>Nein—
scaleYAnimatable<number>Nein—
rotateAnimatable<number>NeinDegrees.
shadowColorAnimatable<string>Nein—
shadowRadiusAnimatable<number>Nein—
shadowOffsetXAnimatable<number>Nein—
shadowOffsetYAnimatable<number>Nein—
hiddenProp<boolean>NeinTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>Nein—
positionProp<"relative" | "absolute">Nein—
idstringNein—
classProp<ClassNames>NeinClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNeinStyles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (opacity).
keystring | numberNein—
paddingTopProp<LengthPercentage>Nein—
paddingRightProp<LengthPercentage>Nein—
paddingBottomProp<LengthPercentage>Nein—
paddingLeftProp<LengthPercentage>Nein—
minWidthProp<SizeValue>Nein—
maxWidthProp<SizeValue>Nein—
minHeightProp<SizeValue>Nein—
maxHeightProp<SizeValue>Nein—
aspectRatioProp<number>NeinWidth divided by height; sizes the missing side from the other.
topProp<LengthPercentageAuto>Nein—
rightProp<LengthPercentageAuto>Nein—
bottomProp<LengthPercentageAuto>Nein—
leftProp<LengthPercentageAuto>Nein—
marginProp<LengthPercentageAuto>Nein—
marginTopProp<LengthPercentageAuto>Nein—
marginRightProp<LengthPercentageAuto>Nein—
marginBottomProp<LengthPercentageAuto>Nein—
marginLeftProp<LengthPercentageAuto>Nein—
flexGrowProp<number>Nein—
flexShrinkProp<number>Nein—
flexBasisProp<SizeValue | "content">Nein—
flexProp<number>NeinA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>Nein—
directionProp<"ltr" | "rtl">NeinThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">Nein—
paddingInlineStartProp<LengthPercentage>NeinPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NeinPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NeinMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NeinMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Neinleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Neinright in ltr, left in rtl.
roleProp<Role>Nein—
onAction(event: AccessibilityActionEvent) => voidNeinThe screen reader action taken, by name.
accessibleProp<boolean>NeinMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NeinWhat a screen reader says for the view.
hintProp<string>NeinWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NeinScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NeinActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NeinARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>Nein—
aria-selectedProp<boolean>Nein—
aria-checkedProp<boolean | "mixed">Nein—
aria-busyProp<boolean>Nein—
aria-expandedProp<boolean>Nein—
aria-valueminProp<number>Nein—
aria-valuemaxProp<number>Nein—
aria-valuenowProp<number>Nein—
aria-valuetextProp<string>Nein—
gesturesreadonly Composable[]NeinThe view's gestures; several race unless composed with together or orElse.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NeinHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NeinAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNeinWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NeinWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NeinHow the view moves to a new frame the layout gives it: layout={spring()}.
overflowProp<"visible" | "hidden" | "clip" | "scroll">Neinhidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>Nein—
backgroundGradient{ angle: number; colors: string[];}Nein—
colorProp<string>Nein—
sharedIdProp<string>NeinA 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).
refElementRef<NativeViewHandle<CameraMethods>>Nein—
facingBound<CameraFacing>Neinback by default.
flashBound<CameraFlash>Neinoff by default.
torchBound<boolean>NeinKeeps the light on while the preview runs.
zoomBound<number>NeinFrom 0 (none) to 1 (the most the camera can), linearly. 0 by default.
modeBound<CameraMode>Neinpicture by default. Record videos in video.
muteBound<boolean>NeinRecords videos without sound, and without asking for the microphone.
barcodesBound<BarcodeType[]>NeinScans for these codes while the preview runs.
onReady(event: CameraReadyEvent) => voidNeinThe preview is running: the camera can take pictures and record.
onError(event: CameraErrorEvent) => voidNein—
onBarcode(event: BarcodeEvent) => voidNeinEach time a code of barcodes comes into view.
onAction — Methodensignaturen

Signaturen

ts
(event: AccessibilityActionEvent): void

Parameter

NameTypErforderlichBeschreibung
eventAccessibilityActionEventJa—

Rückgabe

void

backgroundGradient — verschachtelte Felder

backgroundGradient Felder

NameTypErforderlichBeschreibung
anglenumberJa—
colorsstring[]Ja—
onReady — Methodensignaturen

Signaturen

ts
(event: CameraReadyEvent): void

Parameter

NameTypErforderlichBeschreibung
eventCameraReadyEventJa—

Rückgabe

void

onError — Methodensignaturen

Signaturen

ts
(event: CameraErrorEvent): void

Parameter

NameTypErforderlichBeschreibung
eventCameraErrorEventJa—

Rückgabe

void

onBarcode — Methodensignaturen

Signaturen

ts
(event: BarcodeEvent): void

Parameter

NameTypErforderlichBeschreibung
eventBarcodeEventJa—

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.