检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
准备工作 开发技能要求 具备TypeScript/JavaScript开发基础。 熟悉Web移动端开发。 熟悉Three.js、LayaAir等渲染库，可实现基于WebGL的3D渲染。 下载SDK 请下载WebARSDK软件包和软件包的完整性校验文件，并解压软件包、核对文件目录。 图1 SDK包目录结构
代码示例 开启AR会话功能的代码样例，具体见WebARSDK包中hwar目录下的demo.html。 WebARSDK包的目录请参考图1。 父主题： WebARSDK使用手册
开发概述 WebARSDK简介 WebARSDK是一款轻量化JS-SDK，支持租户通过SDK快速集成和使用KooMap AR地图运行服务，开放能力的内存增加不大于3MB，运行时不依赖于Native App，可通过主流Web浏览器平台、主流终端设备的App内嵌WebView，实现WebAR体验。
WebARSDK使用手册 开发概述 总体开发思路 准备工作 快速开始 开启AR会话 实现AR导航 API列表 代码示例 常用调试方法
总体开发思路 使用WebARSDK开发移动端应用的工作流程如图1所示。 图1 工作流程 准备工作。 下载WebARSDK、收集AK/SK信息、开通关联服务。 创建H5移动端工程。 使用原生或者流行框架（如Vue、React）创建H5移动端工程。 引入WebARSDK文件。 下载、
以工程Project为例，通过引入SDK脚本、传入AK/SK、调用API，验证工程中SDK是否引入正常，为后续功能开发做准备。 操作步骤 创建工程（Project），并将WebARSDK包解压后放入工程目录。 Project ├── index.html ├── src │ ├── index.js ├── hwar
开启AR会话 概述 开发指导 注意事项 父主题： WebARSDK使用手册
常用调试方法 调试工具 调试方法 父主题： WebARSDK使用手册
实现AR导航 概述 开发指导 注意事项 父主题： WebARSDK使用手册
API列表 WebARSDK封装类名为“hwar”，所有API均直接通过类“hwar”来调用，无需实例化。 本章节所指的GPS坐标系为WGS84坐标系。 utmCode指UTM（UNIVERSAL TRANSVERSE MERCARTOR GRID SYSTEM，通用横墨卡托格网系统）投影带号。
单”。 苹果手机开启调试模式。 苹果手机连接Mac电脑，打开手机Safari浏览器并运行Web页面。 在Mac电脑的Safari浏览器“开发”菜单下选择已连接的苹果手机，单击手机打开的Web页面进行调试。 父主题： 常用调试方法
如果您无法获取视频流，建议您排查以下问题： 检查是否存在浏览器多个标签页同时申请获取视频流的情况，建议您关闭其他标签页。 检查浏览器是否支持WebRTC，如不支持，建议您更换浏览器。 检查应用相机权限是否打开。 检查移动设备后置摄像头是否能正常拍摄画面。 无法进行视觉定位原因排查 如
概述 您可开启AR会话获取设备的图像、GPS坐标及传感器数据，启动SLAM从而进行视觉定位。 传感器包括陀螺仪、加速度计、磁力计。 父主题： 开启AR会话
概述 AR导航功能依赖视觉定位，提供空间位置追踪能力。 您可以依赖图像数据、相机矩阵及路径点信息进行3D导航路径渲染。 父主题： 实现AR导航
导航 导航需要使用到的接口如表1所示。 表1 导航接口列表 接口 描述 参数名 参数类型 参数说明 返回值 searchPoi POI智能搜索。 searchData { floor?: string; address?: string; title?: string; tag?:
t”获取相机矩阵和视频流图像。当3定位成功后输出相机矩阵，包含当前虚拟相机的位姿信息。视频流图像可通过Three.js、LayaAir等WebGL渲染引擎渲染成背景画面。 您可以根据相机矩阵、视频流图像及路径点，自定义渲染导航路径、虚拟数字内容。 自定义渲染导航路径时，建议您分段
事件管理 事件管理使用到的接口如表1所示。 表1 事件管理接口列表 接口 描述 参数名 参数类型 参数说明 返回值 dispatchEvent 事件派发。 strId string 侦听事件id。 void data { [key: string]: DataType } 携带的数据。
开发指导 开发流程 图1 开启AR会话开发流程 开发过程 获取Token。 成功获取Token后才能进行定位请求。 // 向服务器请求签名 hwar.getToken().then((res) => { // 获取成功 }).catch((err) => { //
视觉定位 接口列表 视觉定位需要使用的接口如表1所示。 表1 视觉定位接口列表 接口 描述 参数名 参数类型 参数说明 返回值 getToken 向服务器请求签名。 - - - Promise<any> setAKSK 验证租户身份信息。 requestParams { AK: string;
调试工具 常用的调试工具包括： 基于Chromium内核的浏览器（例如Edge、Chrome）的开发者工具（DevTools） Safari浏览器 父主题： 常用调试方法
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
