页面内嵌的区域相机组件。注意这不是点击后全屏打开的相机。
平台差异说明
App |
H5 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节跳动小程序 |
QQ小程序 |
快应用 |
360小程序 |
x |
x |
√ |
x |
√ |
x |
√ |
√ |
x |
- 在 App 和 H5 端,可以使用API方式来调用全屏摄像头,而不是组件内嵌方式,
详见:uni.chooseImage 和 uni.chooseVideo *
- 如开发身份证扫描、银行卡识别等ocr识别需求,在微信小程序和百度小程序中使用本camera组件,将图片发送给服务器识别,插件市场有封装好的模板;在App端使用原生插件
- 活体检测、人脸识别另见文档生物认证
- app-nvue下支持barcode组件,可实现自定义扫码。参考
**
属性说明
属性名 |
类型 |
默认值 |
说明 |
平台差异说明 |
mode |
String |
normal |
有效值为 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 = {maxZoom} |
微信小程序2.7.0 |
@scancode |
EventHandle |
|
在扫码识别成功时触发,仅在 mode=”scanCode” 时生效 |
微信小程序 |
Tips:
- camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
- 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 camera 组件。
- 同一页面只能插入一个 camera 组件。
- 相关API:createCameraContext
代码示例
<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);
}
}
}