camera 自定义相机

基于uniapp camera 组件进行的封装，页面内嵌的区域相机组件。

注意这不是点击后全屏打开的相机

平台差异说明

App	微信小程序	支付宝小程序	H5浏览器	快应用	百度小程序	字节跳动小程序	QQ小程序	360小程序	快手小程序
❌	✅	✅	❌	✅	✅	❌	✅	❌	✅

在 App 和 H5 端，可以使用API方式来调用全屏摄像头，而不是组件内嵌方式，详见uniapp：uni.chooseImage 和 uni.chooseVideo
如开发身份证扫描、银行卡识别等ocr识别需求，在微信小程序和百度小程序中使用本camera组件，将图片发送给服务器识别，插件市场有封装好的模板；在App端使用原生插件
活体检测、人脸识别另见文档生物认证
app-nvue下支持barcode组件，可实现自定义扫码。参考

属性说明

属性名	类型	默认值	说明	平台差异说明
mode	String	UInormal	有效值为 normal, scanCode	微信小程序、QQ小程序、快应用
resolution	String	medium	分辨率，不支持动态修改	微信小程序2.10.0
device-position	String	back	前置或后置摄像头，值为front, back
flash	String	auto	闪光灯，值为auto, on, off
frame-size	String	medium	指定期望的相机帧数据尺寸	微信小程序2.7.0、快应用
@stop	EventHandle		摄像头在非正常终止时触发，如退出后台等情况	快手小程序不支持
@error	EventHandle		用户不允许使用摄像头时触发	快手小程序不支持
@initdone	EventHandle		相机初始化完成时触发，e.detail =	微信小程序2.7.0
@scancode	EventHandle		在扫码识别成功时触发，仅在 mode="scanCode" 时生效	微信小程序

温馨提醒

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

代码示例

vue

<template>
    <view>
        <camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>
        <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 = uni.createCameraContext();
            ctx.takePhoto({
                quality: 'high',
                success: (res) => {
                    this.src = res.tempImagePath
                }
            });
        },
        error(e) {
            console.log(e.detail);
        }
    }
}

camera 自定义相机 ​

平台差异说明 ​

属性说明 ​

代码示例 ​

camera 自定义相机

平台差异说明

属性说明

代码示例