codecamp

百度智能小程序 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:
2D 跟踪类型:0;
SLAM 类型:5;
IMU 类型:8。

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


百度智能小程序 相机
百度智能小程序 图片
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }