Camera — Kuito Documentação

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.

Referência

Assinaturas

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

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`props`	`NativeViewProps<CameraProps, CameraMethods>`	Sim	—

Devolve

KuitoElement

Props: NativeViewProps<CameraProps, CameraMethods>

Props (incluindo props herdadas) 93

Nome	Tipo	Obrigatório	Descrição
`opacity`	`Animatable<number>`	Não	—
`backgroundColor`	`Animatable<string>`	Não	—
`borderRadius`	`Animatable<number>`	Não	—
`borderColor`	`Animatable<string>`	Não	—
`width`	`Animatable<SizeValue>`	Não	—
`height`	`Animatable<SizeValue>`	Não	—
`translateX`	`Animatable<number>`	Não	—
`translateY`	`Animatable<number>`	Não	—
`scale`	`Animatable<number>`	Não	—
`scaleX`	`Animatable<number>`	Não	—
`scaleY`	`Animatable<number>`	Não	—
`rotate`	`Animatable<number>`	Não	Degrees.
`shadowColor`	`Animatable<string>`	Não	—
`shadowRadius`	`Animatable<number>`	Não	—
`shadowOffsetX`	`Animatable<number>`	Não	—
`shadowOffsetY`	`Animatable<number>`	Não	—
`hidden`	`Prop<boolean>`	Não	Takes the view out of layout and off screen, as CSS `display: none`.
`padding`	`Prop<LengthPercentage>`	Não	—
`position`	`Prop<"relative" \| "absolute">`	Não	—
`id`	`string`	Não	—
`class`	`Prop<ClassNames>`	Não	Class names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
`style`	`StyleDeclarations`	Não	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`	Não	—
`paddingTop`	`Prop<LengthPercentage>`	Não	—
`paddingRight`	`Prop<LengthPercentage>`	Não	—
`paddingBottom`	`Prop<LengthPercentage>`	Não	—
`paddingLeft`	`Prop<LengthPercentage>`	Não	—
`minWidth`	`Prop<SizeValue>`	Não	—
`maxWidth`	`Prop<SizeValue>`	Não	—
`minHeight`	`Prop<SizeValue>`	Não	—
`maxHeight`	`Prop<SizeValue>`	Não	—
`aspectRatio`	`Prop<number>`	Não	Width divided by height; sizes the missing side from the other.
`top`	`Prop<LengthPercentageAuto>`	Não	—
`right`	`Prop<LengthPercentageAuto>`	Não	—
`bottom`	`Prop<LengthPercentageAuto>`	Não	—
`left`	`Prop<LengthPercentageAuto>`	Não	—
`margin`	`Prop<LengthPercentageAuto>`	Não	—
`marginTop`	`Prop<LengthPercentageAuto>`	Não	—
`marginRight`	`Prop<LengthPercentageAuto>`	Não	—
`marginBottom`	`Prop<LengthPercentageAuto>`	Não	—
`marginLeft`	`Prop<LengthPercentageAuto>`	Não	—
`flexGrow`	`Prop<number>`	Não	—
`flexShrink`	`Prop<number>`	Não	—
`flexBasis`	`Prop<SizeValue \| "content">`	Não	—
`flex`	`Prop<number>`	Não	A grow factor from a zero basis, as CSS `flex: n`; 0 is inflexible.
`alignSelf`	`Prop<"auto" \| SelfAlignment>`	Não	—
`direction`	`Prop<"ltr" \| "rtl">`	Não	The way lines run; unset, the parent's, and the app's first language's at the root.
`boxSizing`	`Prop<"border-box" \| "content-box">`	Não	—
`paddingInlineStart`	`Prop<LengthPercentage>`	Não	Padding on the side lines start from: the left in `ltr`, the right in `rtl`.
`paddingInlineEnd`	`Prop<LengthPercentage>`	Não	Padding on the side lines end at: the right in `ltr`, the left in `rtl`.
`marginInlineStart`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines start from: the left in `ltr`, the right in `rtl`.
`marginInlineEnd`	`Prop<LengthPercentageAuto>`	Não	Margin on the side lines end at: the right in `ltr`, the left in `rtl`.
`insetInlineStart`	`Prop<LengthPercentageAuto>`	Não	`left` in `ltr`, `right` in `rtl`.
`insetInlineEnd`	`Prop<LengthPercentageAuto>`	Não	`right` in `ltr`, `left` in `rtl`.
`role`	`Prop<Role>`	Não	—
`onAction`	`(event: AccessibilityActionEvent) => void`	Não	The screen reader action taken, by `name`.
`accessible`	`Prop<boolean>`	Não	Makes the view one screen reader element, read as its label or its children's text.
`label`	`Prop<string>`	Não	What a screen reader says for the view.
`hint`	`Prop<string>`	Não	What happens when the view is activated, read after the label.
`aria-hidden`	`Prop<boolean>`	Não	Screen readers skip the view and its subtree.
`actions`	`Prop<readonly AccessibilityAction[]>`	Não	Actions a screen reader offers; `onAction` receives the one taken.
`live`	`Prop<"off" \| "polite" \| "assertive">`	Não	ARIA's `aria-live`: announces changes to the view's content, on iOS too.
`aria-disabled`	`Prop<boolean>`	Não	—
`aria-selected`	`Prop<boolean>`	Não	—
`aria-checked`	`Prop<boolean \| "mixed">`	Não	—
`aria-busy`	`Prop<boolean>`	Não	—
`aria-expanded`	`Prop<boolean>`	Não	—
`aria-valuemin`	`Prop<number>`	Não	—
`aria-valuemax`	`Prop<number>`	Não	—
`aria-valuenow`	`Prop<number>`	Não	—
`aria-valuetext`	`Prop<string>`	Não	—
`gestures`	`readonly Composable[]`	Não	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>>`	Não	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>>`	Não	Animatable props whose every change moves as `transition` says; the first value applies at once.
`enter`	`Effect`	Não	Where the view enters from: `fade.and(slide.up(12))`.
`exit`	`Prop<Effect>`	Não	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>`	Não	How the view moves to a new frame the layout gives it: `layout={spring()}`.
`overflow`	`Prop<"visible" \| "hidden" \| "clip" \| "scroll">`	Não	hidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
`borderWidth`	`Prop<number>`	Não	—
`backgroundGradient`	`{ angle: number; colors: string[];}`	Não	—
`color`	`Prop<string>`	Não	—
`sharedId`	`Prop<string>`	Não	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>>`	Não	—
`facing`	`Bound<CameraFacing>`	Não	`back` by default.
`flash`	`Bound<CameraFlash>`	Não	`off` by default.
`torch`	`Bound<boolean>`	Não	Keeps the light on while the preview runs.
`zoom`	`Bound<number>`	Não	From 0 (none) to 1 (the most the camera can), linearly. 0 by default.
`mode`	`Bound<CameraMode>`	Não	`picture` by default. Record videos in `video`.
`mute`	`Bound<boolean>`	Não	Records videos without sound, and without asking for the microphone.
`barcodes`	`Bound<BarcodeType[]>`	Não	Scans for these codes while the preview runs.
`onReady`	`(event: CameraReadyEvent) => void`	Não	The preview is running: the camera can take pictures and record.
`onError`	`(event: CameraErrorEvent) => void`	Não	—
`onBarcode`	`(event: BarcodeEvent) => void`	Não	Each time a code of `barcodes` comes into view.

onAction — assinaturas de método

Assinaturas

(event: AccessibilityActionEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`AccessibilityActionEvent`	Sim	—

Devolve

void

backgroundGradient — campos aninhados

backgroundGradient campos

Nome	Tipo	Obrigatório	Descrição
`angle`	`number`	Sim	—
`colors`	`string[]`	Sim	—

onReady — assinaturas de método

Assinaturas

(event: CameraReadyEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`CameraReadyEvent`	Sim	—

Devolve

void

onError — assinaturas de método

Assinaturas

(event: CameraErrorEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`CameraErrorEvent`	Sim	—

Devolve

void

onBarcode — assinaturas de método

Assinaturas

(event: BarcodeEvent): void

Parâmetros

Nome	Tipo	Obrigatório	Descrição
`event`	`BarcodeEvent`	Sim	—

Devolve

void

Gerado a partir das declarações TypeScript públicas: assinaturas, props e predefinições vêm da fonte verificada, as descrições da sua JSDoc. Nenhuma predefinição é inventada.

#Capture a photo and preview the result

#Behavior

#Continue

Referência

Assinaturas

Parâmetros

Devolve

Props (incluindo props herdadas) 93

Assinaturas

Parâmetros

Devolve

backgroundGradient campos

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Assinaturas

Parâmetros

Devolve

Capture a photo and preview the result

Behavior

Continue