QinJs 官网 | QinJs 官网

camera

页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。

平台差异说明

H5	微信小程序	小红书小程序	抖音小程序	快手小程序
x	√	√	√	√

在 H5 端，可以使用API方式来调用全屏摄像头，而不是组件内嵌方式，详见： qin.chooseImage 和 qin.chooseVideo
如开发身份证扫描、银行卡识别等 ocr 识别需求，在微信小程序中使用本 camera 组件，将图片发送给服务器识别，插件市场有封装好的模板；

属性说明

属性名	类型	默认值	说明	平台差异说明
mode	String	normal	应用模式，有效值为 normal (相机模式), scanCode (扫码模式)，不支持动态修改
resolution	string	medium	分辨率，有效值为 low , medium , high ，不支持动态修改	微信小程序2.10.0、抖音小程序
device-position	String	back	前置或后置摄像头，值为 front, back
flash	String	auto	闪光灯，值为 auto , on , off , torch
frame-size	string	medium	指定期望的相机帧数据尺寸，值为 small , medium , large	微信小程序2.7.0、抖音小程序
output-dimension	String	720P	相机拍照，录制的分辨率。有效值为 360P 、 540P 、 720P 、 1080P 、 max 。	支付宝小程序1.23.0
@stop	EventHandle		摄像头在非正常终止时触发，如退出后台等情况
@error	EventHandle		用户不允许使用摄像头时触发
@initdone	eventhandle		相机初始化完成时触发， `e.detail = {maxZoom}`	微信小程序2.7.0、抖音小程序1.78.0、快手小程序
@ready	EventHandle		相机初始化成功时触发。 `event.detail = {maxZoom}`	支付宝小程序1.24.3
@scancode	EventHandle		在扫码识别成功时触发，仅在 `mode="scanCode"` 时生效	微信小程序、支付宝小程序、抖音小程序、快手小程序

Tips：

camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
同一页面只能插入一个 camera 组件。
相关API： createCameraContext

代码示例

VueScript

vue

<template>
  <view>
    <camera
      device-position="back"
      flash="off"
      @error="error"
      style="width: 100%; height: 300px;"
    />
    <button type="primary" @click="takePhoto">拍照</button>
    <view>预览</view>
    <image mode="widthFix" :src="src"></image>
  </view>
</template>

<template>
  <view>
    <camera
      device-position="back"
      flash="off"
      @error="error"
      style="width: 100%; height: 300px;"
    />
    <button type="primary" @click="takePhoto">拍照</button>
    <view>预览</view>
    <image mode="widthFix" :src="src"></image>
  </view>
</template>

export default {
  data() {
    return {
      src: '',
    };
  },
  methods: {
    takePhoto() {
      const ctx = qin.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.src = res.tempImagePath;
        },
      });
    },
    error(e) {
      console.log(e.detail);
    },
  },
};

export default {
  data() {
    return {
      src: '',
    };
  },
  methods: {
    takePhoto() {
      const ctx = qin.createCameraContext();
      ctx.takePhoto({
        quality: 'high',
        success: (res) => {
          this.src = res.tempImagePath;
        },
      });
    },
    error(e) {
      console.log(e.detail);
    },
  },
};

camera ​

camera