• camera

    camera

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

    平台差异说明

    5+AppH5微信小程序支付宝小程序百度小程序头条小程序
    xx√x√x
    • 在 App 和 H5 端，可以使用API方式来调用全屏摄像头，而不是组件内嵌方式。并且App端和H5端目前无法通过cover-view覆盖摄像头，有相关需求见下方插件。
      • uni.chooseImage 和 uni.chooseVideo 可以拍照或录像，但它们会同时允许用户选择相册。
      • 使用plus.camera的API可以直接调起全屏的摄像头，详见：https://www.html5plus.org/doc/zh_cn/camera.html 调用原生摄像头进行相关操作。
    • 如开发身份证扫描、银行卡识别等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 上编辑此页面！