• ar-camera AR 相机
  • 属性说明
    • type 有效值
    • flash 有效值
  • 示例
    • 代码示例 1
    • 代码示例 2：用户自定义事件
  • Bug & Tip

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 对应小程序页面的降级处理。

属性说明

type 有效值

flash 有效值

示例

跳转编辑工具

在开发者工具中打开

在 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 以下机型显示全屏比例。