camera

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

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
xx√x√x
  • 在 App 和 H5 端，可以使用API方式来调用全屏摄像头，而不是组件内嵌方式。并且App端和H5端目前无法通过cover-view覆盖摄像头，有相关需求见下方插件。
  • 如开发身份证扫描、银行卡识别等ocr识别需求，在微信小程序和百度小程序中使用本camera组件，将图片发送给服务器识别，插件市场有封装好的模板；在App端使用原生插件
  • 活体检测、人脸识别另见文档生物认证属性说明
属性名类型默认值说明平台差异说明
modeStringnormal有效值为 normal, scanCode微信小程序
device-positionStringback前置或后置，值为front, back
flashStringauto闪光灯，值为auto, on, off
@stopEventHandle摄像头在非正常终止时触发，如退出后台等情况
@errorEventHandle用户不允许使用摄像头时触发
@scancodeEventHandle在扫码识别成功时触发，仅在 mode="scanCode" 时生效微信小程序

Tips：

  • camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
  • 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
  • 同一页面只能插入一个 camera 组件。
  • 相关API：reateCameraContext代码示例
  1. <template>
  2.     <view>
  3.         <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
  4.         <button type="primary" @click="takePhoto">拍照</button>
  5.         <view>预览</view>
  6.         <image mode="widthFix" :src="src"></image>
  7.     </view>
  8. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             src:""
  5.         }
  6.     },
  7.     methods: {
  8.          takePhoto() {
  9.             const ctx = uni.createCameraContext();
  10.             ctx.takePhoto({
  11.                 quality: 'high',
  12.                 success: (res) => {
  13.                     this.src = res.tempImagePath
  14.                 }
  15.             });
  16.         },
  17.         error(e) {
  18.             console.log(e.detail);
  19.         }
  20.     }
  21. }

发现错误？想参与编辑？在 GitHub 上编辑此页面！