camera

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

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
xxxx
  • 在 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 上编辑此页面!