百度智能小程序 AR相机
ar-camera AR 相机
基础库 3.15.104 开始支持,低版本需做兼容处理。ar-camera 组件目前只针对百度 APP 开放使用。
解释:AR 相机,在DuMixAR 内容开放平台提交并上线 AR 项目后(选择“百度 App-相机”渠道)获取到 AR Key、AR Type,可配置展现。ar-camera 组件还提供丰富的 api 来控制相机录像、拍照等,详见swan.createARCameraContext。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
key |
String |
是 |
AR 项目唯一标识,在 DuMixAR 内容开放平台上传生成 AR 项目后获取 AR Key |
|
type |
String |
是 |
AR 相机类型,在 DuMixAR 内容开放平台上传生成 AR 项目后获取 AR Type:
|
|
flash |
String |
off |
否 |
闪光灯,值为 auto, on, off |
binderror |
EventHandle |
否 |
用户不允许使用摄像头或扫码失败时触发 |
|
bindload |
EventHandle |
否 |
AR 加载成功时触发 |
|
bindmessage |
EventHandle |
否 |
开发者制作 AR 项目时可自定义按键,用户点击时会收到事件和数据,用户自定义事件格式参见用户自定义事件。 |
|
bindscancode |
EventHandle |
否 |
扫描识图结束后触发 |
type 有效值
值 | 说明 |
---|---|
0 |
2D 跟踪类型 |
5 |
SLAM 类型 |
8 |
IMU 类型 |
flash 有效值
值 | 说明 |
---|---|
auto |
自动闪光灯 |
on |
闪光灯开 |
off |
闪光灯关 |
示例
代码示例
<ar-camera ar-key="10298931" ar-type="5" flash="{{flashState}}" class="camera" bindload="loadCameraSuccess" bindmessage="message" binderror="error">
</ar-camera>
其它代码过长,建议直接在开发者工具中预览效果。
用户自定义事件
设计指南
如未获取相机权限致使相机无法使用,可通过模态弹窗(showModal)进行明确的提示反馈,避免相机黑屏阻断流程,影响用户体验。
正确未获取相机权限时提示用户权限未开启
错误未获取相机权限却无提示,导致用户无措
使用 AR 相机过程中如遇网络、性能等问题导致等待时间过长(超过 3 秒)或操作失败,可通过消息提示框(showToast)为用户提供明确的操作反馈。
正确
识别过程反馈
正确
操作失败反馈
Bug & Tip
- Tip:ar-camera 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。Tip:同一页面只能插入一个 ar-camera 组件。可在新页面中放置 ar-camera 组件,并使用 swan.navigate API(注意应防止用户多次连续点击,否则会导致 AR 页面多次打开出现卡顿)跳转至该页面。Tip:请勿在 scroll-view、swiper、picker-view、movable-view 中使用 ar-camera 组件。Tip:AR 相机支持 iPhone X 及以上机型显示 16:9 的比例;支持 iPhone X 以下机型显示全屏比例。Tip:相关 API:createARCameraContext。