# camera

> 基础库 1.6.0 开始支持，低版本需做[兼容处理](1003706)。

> __微信 Mac 版__：支持
> 
> __微信 鸿蒙 OS 版__：支持

> 相关文档: [wx.createCameraContext](/miniprogram/dev/api/media/camera/wx.createCameraContext.md)

渲染框架支持情况：Skyline （使用最新 [Nightly](/miniprogram/dev/devtools/nightly.html) 工具调试）、WebView

## 功能描述

系统相机。扫码二维码功能，需升级微信客户端至6.7.3。需要[用户授权](/miniprogram/dev/framework/open-ability/authorize.md) `scope.camera`。
[2.10.0](1003706)起 initdone 事件返回 maxZoom，最大变焦范围，相关接口 [CameraContext.setZoom](https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.setZoom.html)。

## 通用属性


```json
[
  {
    "属性": "mode",
    "类型": "string",
    "默认值": "normal",
    "必填": "否",
    "说明": "应用模式，只在初始化时有效，不能动态变更",
    "最低版本": "[2.1.0](1003706)",
    "子项": [
      {
        "合法值": "normal",
        "说明": "相机模式"
      },
      {
        "合法值": "scanCode",
        "说明": "扫码模式"
      }
    ]
  },
  {
    "属性": "resolution",
    "类型": "string",
    "默认值": "medium",
    "必填": "否",
    "说明": "分辨率，不支持动态修改",
    "最低版本": "[2.10.0](1003706)",
    "子项": [
      {
        "合法值": "low",
        "说明": "低"
      },
      {
        "合法值": "medium",
        "说明": "中"
      },
      {
        "合法值": "high",
        "说明": "高"
      }
    ]
  },
  {
    "属性": "device-position",
    "类型": "string",
    "默认值": "back",
    "必填": "否",
    "说明": "摄像头朝向",
    "最低版本": "[1.0.0](1003706)",
    "子项": [
      {
        "合法值": "front",
        "说明": "前置"
      },
      {
        "合法值": "back",
        "说明": "后置"
      }
    ]
  },
  {
    "属性": "flash",
    "类型": "string",
    "默认值": "auto",
    "必填": "否",
    "说明": "闪光灯，值为auto, on, off",
    "最低版本": "[1.0.0](1003706)",
    "子项": [
      {
        "合法值": "auto",
        "说明": "自动",
        "最低版本": ""
      },
      {
        "合法值": "on",
        "说明": "打开",
        "最低版本": ""
      },
      {
        "合法值": "off",
        "说明": "关闭",
        "最低版本": ""
      },
      {
        "合法值": "torch",
        "说明": "常亮",
        "最低版本": "[2.8.0](1003706)"
      }
    ]
  },
  {
    "属性": "frame-size",
    "类型": "string",
    "默认值": "medium",
    "必填": "否",
    "说明": "指定期望的相机帧数据尺寸",
    "最低版本": "[2.7.0](1003706)",
    "子项": [
      {
        "合法值": "small",
        "说明": "小尺寸帧数据"
      },
      {
        "合法值": "medium",
        "说明": "中尺寸帧数据"
      },
      {
        "合法值": "large",
        "说明": "大尺寸帧数据"
      }
    ]
  },
  {
    "属性": "bind:stop",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "摄像头在非正常终止时触发，如退出后台等情况",
    "最低版本": "[1.0.0](1003706)"
  },
  {
    "属性": "bind:error",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "用户不允许使用摄像头时触发",
    "最低版本": "[1.0.0](1003706)"
  },
  {
    "属性": "bind:initdone",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "相机初始化完成时触发，\u0000INLINECODE_1\u0000",
    "最低版本": "[2.7.0](1003706)"
  },
  {
    "属性": "bind:scancode",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "在扫码识别成功时触发，仅在 mode=\"scanCode\" 时生效",
    "最低版本": "[2.1.0](1003706)"
  }
]
```

## Bug & Tip

1. `tip`: 同一页面只能插入一个 `camera` 组件
1. `tip`:请注意[原生组件使用限制](../native-component/native-component#原生组件的使用限制)
1. `tip`:onCameraFrame 接口根据 frame-size 返回不同尺寸的原始帧数据，与 Camera 组件展示的图像不同，其实际像素值由系统决定

## 示例代码

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/VBZ3Jim26zYu)

```html
<!-- camera.wxml -->
<camera device-position="back" flash="off" bind:error="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bind:tap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
```

```javascript
// camera.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})
```