---
name: "camera"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "camera - 系统相机"
---

## camera

> [VERSION] 基础库 >= 2.10.0

### 描述

相机组件，用于拍照或录像。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `mode` | `string` | 否 | `"normal"` | 相机模式，只在初始化时有效，不能动态变更 |
| `resolution` | `string` | 否 | `"medium"` | 相机分辨率，不支持动态修改：low、medium、high |
| `device-position` | `string` | 否 | `"back"` | 摄像头朝向：front、back |
| `flash` | `string` | 否 | `"auto"` | 闪光灯模式：auto、on、off、torch |
| `background-color` | `string` | 否 | `"#ffffff"` | 背景颜色，必须为十六进制格式 |
| `border-width` | `number` | 否 | `0` | 边框宽度，单位 px |
| `border-style` | `string` | 否 | `"solid"` | 边框样式：solid、dashed |
| `border-color` | `string` | 否 | `"#ffffff"` | 边框颜色，必须为十六进制格式 |
| `border-radius` | `number` | 否 | `0` | 边框圆角，单位 px |
| `border-radius-top-left` | `number` | 否 | - | 左上角圆角，单位 px |
| `border-radius-top-right` | `number` | 否 | - | 右上角圆角，单位 px |
| `border-radius-bottom-left` | `number` | 否 | - | 左下角圆角，单位 px |
| `border-radius-bottom-right` | `number` | 否 | - | 右下角圆角，单位 px |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `stop` | `(event: Object) => void` | 相机非正常终止时触发，如退出后台 |
| `error` | `(event: CameraErrorEvent) => void` | 用户不允许使用摄像头时触发 |
| `initdone` | `(event: CameraInitdoneEvent) => void` | 相机初始化完成时触发 |

**stop 的回调参数对象**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"stop"` |  |

**CameraErrorEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"error"` |  |
| `detail` | `CameraErrorDetail` |  |

**CameraInitdoneEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"initdone"` |  |
| `detail` | `CameraInitdoneDetail` |  |

### 示例代码

#### 基础用法

*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('相机初始化完成，最大缩放:', e.detail.maxZoom);
  },
  onError(e) {
    console.log('相机错误:', e.detail.errMsg);
  },
});
```

#### 自定义边框与前置摄像头

*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('初始化完成:', e.detail.maxZoom);
  },
  onStop() {
    console.log('相机非正常终止');
  },
});
```


### 相关文档

- 相关 API：[ty.createCameraContext](/cn/miniapp/develop/miniapp/api/media/camera/createCameraContext)
- 这是基于异层渲染的原生组件，请注意 [原生组件使用限制](/cn/miniapp/develop/miniapp/component/native-component/native-component)

### 常见问题

1. 同一页面只能插入一个 `camera` 组件。
2. Tuya MiniApp IDE 上不支持。
3. 相关原理请参考 [基于异层渲染的原生组件](/cn/miniapp/develop/miniapp/component/native-component/native-component)。
4. 请注意 [原生组件使用限制](/cn/miniapp/develop/miniapp/component/native-component/native-component)。