HTML5 WebAR开发

1. 官网demo配置

从github下载demo, https://github.com/wujianar/ardemo,或 https://gitee.com/wujianar/ardemo,有3d,video,src等几个目录,
src目录是WebAR的SDK文件,TypeScript编写的,有已经编译后的JS文件,可以使用使用。
3d与video目录分别是模型与视频的例子。

打开摄像头需要web服务器的环境,生产环境的域名需要配置HTTPS证书,在本地开发用127.0.0.1访问不需要。

使用nginx配置web服务器环境或使用无间AR提供的软件,下载地址:https://github.com/wujianar/simple-server,与ardemo放在同一个目录中。

在ubuntu系统下运行: ./http-server_linux,启动成功后在chrome或firefox中访问 http://127.0.0.1:3001 即可。

windows系统下直接双击运行。

支持视频播放3D动画模型渲染 

开发说明

无间AR使用的是云识别,不是本地识别。

在官网注册登录(https://www.wujianar.cn),可以申请一个免费的图片,
替换demo中app.js文件的token与endpointUrl就行。

WebAR SDK说明

1. 初始化WebAR SDK

// 相关参数请从开发者中心获取
const endpointUrl = '识别API地址';
const token = '认证token';
const interval = 1000; // 识别间隔(单位为毫秒)

// 初始化
const webAR = new WebAR(endpointUrl, token, interval);

2. 使用预定义参数打开摄像头

webAR.tryCamera().then(() => {
    // todo 打开成功,这里可以处理业务逻辑

    // 开始识别,识别成功后会自动关闭识别功能,不再请求识别API
    webAR.startSearch((msg) => {
        // todo 播放视频或展示3D模型
    });
}).catch(err => {
    // todo 打开失败
});

也可以使用自定义参数打开摄像头。

webAR.openCamera(constraints)