400-028-6601
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。

创新互联百度小程序教程:ar-cameraAR相机

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

    属性说明

    属性名 类型 默认值 必填 说明

    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 有效值

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

    flash 有效值

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

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1

    • SWAN
     
     
     

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

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

    • JSON
     
     
     
    1. {
    2. // 常量值,不能改变
    3. "event_name": "smart_baiduapp_event",
    4. // 自定义K-V数据,会透传给小程序
    5. "data": {
    6. // key必须是string类型,value建议也是string类型
    7. "key1": "value1"
    8. }
    9. }

    设计指南

    如未获取相机权限致使相机无法使用,可通过模态弹窗 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 以下机型显示全屏比例。

    新闻名称:创新互联百度小程序教程:ar-cameraAR相机
    URL网址:http://www.hnjierui.cn/article/ccejcsj.html

    其他资讯