ar-camera AR 相机

ar-camera AR 相机

基础库 3.15.104 开始支持，低版本需做兼容处理。ar-camera 组件目前只针对百度 App 开放使用。

解释：AR 相机，在 DuMixAR 内容开放平台提交并上线 AR 项目后（选择“百度 App -> 相机”渠道）获取到 AR Key、AR Type ，可配置展现。ar-camera 组件还提供丰富的 API 来控制相机录像、拍照等，详见 swan.createARCameraContext 。
Web 态说明：Web 态暂不支持 ar-camera 组件。在 Web 态会做打开百度 App 对应小程序页面的降级处理。

属性说明

属性名	类型	默认值	必填	说明
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 项目时可自定义按键，用户点击时会收到事件和数据，用户自定义事件格式参见代码示例 2：用户自定义事件
bindscancode	EventHandle		否	扫描识图结束后触发

type 有效值

值	说明
0	2D 跟踪类型
5	SLAM 类型
8	IMU 类型

flash 有效值

值	说明
auto	自动闪光灯
on	闪光灯开
off	闪光灯关

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

SWAN

<ar-camera ar-key="10298931" ar-type="5" flash="{{flashState}}" class="camera" bindload="loadCameraSuccess" bindmessage="message" binderror="error">
</ar-camera>

其它代码过长，建议直接在开发者工具中预览效果。

代码示例 2：用户自定义事件

JSON

{
    // 常量值，不能改变
    "event_name": "smart_baiduapp_event", 
    // 自定义K-V数据，会透传给小程序
    "data": {  
        // key必须是string类型，value建议也是string类型
        "key1": "value1" 
    }
}

设计指南

如未获取相机权限致使相机无法使用，可通过模态弹窗 showModal 进行明确的提示反馈，避免相机黑屏阻断流程，影响用户体验。

正确

未获取相机权限时提示用户权限未开启

错误

未获取相机权限却无提示，导致用户无措

使用 AR 相机过程中如遇网络、性能等问题导致等待时间过长（超过 3 秒）或操作失败，可通过消息提示框 showToast 为用户提供明确的操作反馈。

正确

识别过程反馈

正确

操作失败反馈

Bug & Tip

Tip：ar-camera 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。可使用 cover-view cover-image 覆盖在上面。
Tip：同一页面只能插入一个 ar-camera 组件。可在新页面中放置 ar-camera 组件，并使用 API swan.navigateTo（注意应防止用户多次连续点击，否则会导致 AR 页面多次打开出现卡顿）跳转至该页面。
Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 ar-camera 组件。
Tip：AR 相机支持 iPhone X 及以上机型显示 16：9 的比例；支持 iPhone X 以下机型显示全屏比例。