---
name: "camera"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "camera - System camera"
---

## camera

> [VERSION] Base Library >= 2.10.0

### Description

Camera component for taking photos or recording videos.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `mode` | `string` | No | `"normal"` | Camera mode; only takes effect during initialization and cannot be changed dynamically |
| `resolution` | `string` | No | `"medium"` | Camera resolution (not dynamically changeable): low, medium, high |
| `device-position` | `string` | No | `"back"` | Camera facing: front, back |
| `flash` | `string` | No | `"auto"` | Flash mode: auto, on, off, torch |
| `background-color` | `string` | No | `"#ffffff"` | Background color; must be in hex |
| `border-width` | `number` | No | `0` | Border width, in px |
| `border-style` | `string` | No | `"solid"` | Border style: solid, dashed |
| `border-color` | `string` | No | `"#ffffff"` | Border color, must be in hexadecimal format |
| `border-radius` | `number` | No | `0` | Border radius, in px |
| `border-radius-top-left` | `number` | No | - | Top-left corner radius, in px |
| `border-radius-top-right` | `number` | No | - | Top-right corner radius, in px |
| `border-radius-bottom-left` | `number` | No | - | Bottom-left corner radius, in px |
| `border-radius-bottom-right` | `number` | No | - | Bottom-right corner radius, in px |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `stop` | `(event: Object) => void` | Fires when the camera stops unexpectedly, e.g., when the app goes to the background |
| `error` | `(event: CameraErrorEvent) => void` | Fires when camera access is denied by the user |
| `initdone` | `(event: CameraInitdoneEvent) => void` | Fires when the camera is initialized |

**stop callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"stop"` |  |

**CameraErrorEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"error"` |  |
| `detail` | `CameraErrorDetail` |  |

**CameraInitdoneEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"initdone"` |  |
| `detail` | `CameraInitdoneDetail` |  |

### Examples

#### Basic usage

*index.tyml*

```xml
<camera
  device-position="back"
  flash="auto"
  resolution="high"
  class="camera"
  bind:initdone="onInitDone"
  bind:error="onError"
/>
```

*index.tyss*

```css
.camera {
  width: 100%;
  height: 400px;
}
```

*index.js*

```javascript
Page({
  onInitDone(e) {
    console.log('Camera initialized, max zoom:', e.detail.maxZoom);
  },
  onError(e) {
    console.log('Camera error:', e.detail.errMsg);
  },
});
```

#### Custom borders and front camera

*index.tyml*

```xml
<camera
  device-position="front"
  flash="off"
  resolution="medium"
  border-width="{{2}}"
  border-style="dashed"
  border-color="#1890ff"
  border-radius="{{16}}"
  background-color="#000000"
  class="camera"
  bind:initdone="onInitDone"
  bind:stop="onStop"
/>
```

*index.tyss*

```css
.camera {
  width: 300px;
  height: 300px;
  margin: 20px auto;
}
```

*index.js*

```javascript
Page({
  onInitDone(e) {
    console.log('Initialization complete:', e.detail.maxZoom);
  },
  onStop() {
    console.log('Camera stopped unexpectedly');
  },
});
```


### Related Documents

- Related API: [ty.createCameraContext](/en/miniapp/develop/miniapp/api/media/camera/createCameraContext)
- This is a native component rendered based on heterolayers. Take care of the [limitations of the native component](/en/miniapp/develop/miniapp/component/native-component/native-component).

### FAQ

1. Only one `camera` component can be inserted on the same page.
2. Not supported on Tuya MiniApp IDE.
3. For more information about principles, see [Native component rendered based on heterolayers](/en/miniapp/develop/miniapp/component/native-component/native-component).
4. Take care of the [limitations of the native component](/en/miniapp/develop/miniapp/component/native-component/native-component).