---
name: "Camera"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.6.9" }
title: "Camera - System camera"
---

## Camera

> [VERSION] @ray-js/ray >= 0.6.9

### Description

System camera component for previewing and capturing.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `mode` | `"normal"` | No | `"normal"` | Mode; only effective during initialization, cannot be changed dynamically |
| `resolution` | `"low" \| "medium" \| "high"` | No | `"medium"` | Resolution, cannot be changed dynamically |
| `devicePosition` | `"front" \| "back"` | No | `"back"` | Camera facing |
| `flash` | `"auto" \| "on" \| "off" \| "torch"` | No | `"auto"` | Flash mode |
| `borderWidth` | `number` | No | `0` | Border width, in px |
| `borderStyle` | `"solid" \| "dashed"` | No | `"solid"` | Border style |
| `borderColor` | `string` | No | `"#ffffff"` | Border color; must be hex format |
| `borderRadius` | `number` | No | `0` | Border radius, in px |
| `borderRadiusTopLeft` | `number` | No | - | Top-left border radius, in px |
| `borderRadiusTopRight` | `number` | No | - | Top-right border radius, in px |
| `borderRadiusBottomLeft` | `number` | No | - | Bottom-left border radius, in px |
| `borderRadiusBottomRight` | `number` | No | - | Bottom-right border radius, in px |
| `backgroundColor` | `string` | No | `"#ffffff"` | Background color; must be hex format |
| `onBindstop` | `(event: CameraStopEvent) => void` | No | - | Triggered when the camera terminates abnormally, e.g., when the app goes to the background |
| `onError` | `(event: CameraErrorEvent) => void` | No | - | Triggered when camera access is denied by the user |
| `onInitdone` | `(event: CameraInitdoneEvent) => void` | No | - | Triggered when the camera is initialized |
| `updateLayout` | `unknown` | No | - | Used for cross-layer components to notify the container layer to update styles |

### Referenced Types

##### `interface` CameraStopEvent

```typescript
export interface CameraStopEvent extends BaseEvent {
  /** 事件类型 */
  type: 'stop';
}
```

##### `interface` CameraErrorEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `CameraErrorEventDetail` | Event details |

##### `interface` CameraInitdoneEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `CameraInitdoneEventDetail` | Event details |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` CameraErrorEventDetail

| Property | Type | Description |
| --- | --- | --- |
| `errMsg` | `string` | Error message |

##### `interface` CameraInitdoneEventDetail

| Property | Type | Description |
| --- | --- | --- |
| `maxZoom` | `number` | Maximum zoom ratio |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Valid Values

##### `resolution` valid values

| Value | Description |
| --- | --- |
| `"low"` | Low resolution |
| `"medium"` | Medium resolution |
| `"high"` | High resolution |

##### `devicePosition` valid values

| Value | Description |
| --- | --- |
| `"front"` | Front camera |
| `"back"` | Rear camera |

##### `flash` valid values

| Value | Description |
| --- | --- |
| `"auto"` | Auto flash |
| `"on"` | Flash on |
| `"off"` | Flash off |
| `"torch"` | Torch mode |

##### `borderStyle` valid values

| Value | Description |
| --- | --- |
| `"solid"` | Solid border |
| `"dashed"` | Dashed border |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { Camera, View, Text } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Text style={{ marginBottom: '10px' }}>Camera preview</Text>
      <Camera
        style={{ width: '100%', height: '300px' }}
        devicePosition="back"
        flash="auto"
        resolution="high"
        onInitdone={(e) => console.log('Initialized, max zoom:', e.detail.maxZoom)}
        onError={(e) => console.log('Camera error:', e.detail.errMsg)}
        onBindstop={() => console.log('Camera terminated unexpectedly')}
      />
    </View>
  );
}
```

#### Custom border

```tsx
import React, { useState } from 'react';
import { Camera, View, Button } from '@ray-js/ray';

export default function () {
  const [position, setPosition] = useState<'back' | 'front'>('back');

  return (
    <View style={{ padding: '20px' }}>
      <Camera
        style={{ width: '100%', height: '300px' }}
        devicePosition={position}
        flash="off"
        resolution="medium"
        borderWidth={2}
        borderStyle="dashed"
        borderColor="#1890ff"
        borderRadius={16}
        backgroundColor="#000000"
        onInitdone={(e) => console.log('Initialized:', e.detail)}
      />
      <Button
        style={{ marginTop: '10px' }}
        onClick={() => setPosition(position === 'back' ? 'front' : 'back')}
      >
        Switch camera (current: {position === 'back' ? 'Rear' : 'Front'})
      </Button>
    </View>
  );
}
```


### Related Links

Related API: [createCameraContext](/en/miniapp/develop/miniapp/api/media/camera/createCameraContext). This is a native component based on off-screen rendering. Please note the [native component usage restrictions](/en/miniapp/develop/miniapp/component/native-component/native-component).

<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayCamera" 
  qrCodeUrl="/images/qrCode/rayCamera.png" 
  lang="en">
</DemoBlock>

### FAQ

1. Only one `camera` component can be inserted on the same page.
2. Not supported in the Tuya MiniApp IDE.
3. For related principles, refer to [Native components based on off-screen rendering](/en/miniapp/develop/miniapp/component/native-component/native-component).
4. Please note the [native component usage restrictions](/en/miniapp/develop/miniapp/component/native-component/native-component).