WebAR开发说明

一、简介

主要在移动设备(Android, iOS等)的浏览器中运行，使用Javascript开发。

iOS版微信不能打开相机，可以在运行时检测“navigator.userAgent”，如果是在微信中运行，可以提示用户使用浏览器体验，
您也可以使用小程序开发WebAR，请查看文档。

技术支持QQ群：722979533

二、实现流程

1. 初始化WebAR SDK

// 相关参数请从开发者中心获取
const endpointUrl = 'https://iss-api.wujianar.cn';
const token = '认证token';
const interval = 1000; // 识别间隔(单位为毫秒)

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

2. 打开摄像头

可使用两种方式打开摄像头，均返回promise，操作方式完全相同。

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

webAR.tryCamera().then(() => {
    // todo 打开成功

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

2.2 使用自定参数打开摄像头

// 如果打开失败，可使用自定参数方式
// 打开后置摄像参数，参数说明请查看 https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
const constraints = {
    audio: false,
    video: {
        facingMode: {
            exact: 'environment'
        }
    }
};

// 打开摄像头
webAR.openCamera(constraints).then(() => {
    // todo 打开成功
}).catch(err => {
    // todo 打开失败
});

3. 视频或3D模型展示

视频播放可以使用HTML5的video；
3D模型渲染可以使用threejs等WebGL库。

4. WebAR JSSDK及完整示例

完整代码请查看: https://gitee.com/wujianar/ardemo
WebAR电影海报示例: https://gitee.com/wujianar/cjh-ardemo

AR云识别服务

开发教程