EasyAR WebAR 快速入门

一、开发前准备

  1. EasyAR WebAR 云识别图库

    访问 EasyAR 官网购买获取，需要 Token，CRS AppId与Client-end URL。

    您可以通过API Key， API Secret获取动态Token。接口文档见 POST /token/。

  2. Web服务器

    存储HTML等静态网页内容。

  3. 支持HTTPS的域名

    在浏览器上使用摄像头，需要HTTPS协议支持。

二、开发步骤

因不同浏览器对摄像头处理的方式不尽相同，本文档示例使用 webrtc/adapter 类库，简化兼容问题处理。

本文档示例，以最简化方式说明开发WebAR的步骤，未详尽考虑Android、iOS等平台的兼容。

  1. 打开摄像头

// 更多参数请查看 https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints
const constraints = {
    audio: false,
    video: {facingMode: {exact: 'environment'}}
    //video: {facingMode: {exact: 'user'}}
    //video: true
};

navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
            // videoElement为video元素，将摄像头视频流绑定到video上实时预览
            videoElement.srcObject = stream;
            videoElement.style.display = 'block';
            videoElement.play();
            resolve(true);
        })
        .catch((err) => {
            reject(err);
        });

  1. 截取摄像头图像

// canvasElement为canvas元素
// canvasContext为canvas的context 2d对象
// videoSetting为video元素的宽、高
canvasContext.drawImage(videoElement, 0, 0, videoSetting.width, videoSetting.height);
const image = canvasElement.toDataURL('image/jpeg', 0.5).split('base64,')[1];

  1. 将图像发送到服务器识别

请在EasyAR官网获取Token，如下图所示：

_images/token.png

Token会过期，支持动态刷新，获取刷新token接口文档见 POST /token/。

Token是写在JavaScript文件中的，适用于安全要求较低的环境中使用，建议调用接口动态获取Token。

// 云图库的Client-end URL
const clientendUrl = '您云图库的Client-end URL/search';
// 云图库的Cloud Token
const token = '这里是云图库的Cloud Token';
// 云图库的CRS AppId
const appId = '这里是云图库的CRS AppId';

// 可以使用 jQuery 或 axios 等发送网络请求
const http = new XMLHttpRequest();
http.onload = () => {
    try {
        const msg = JSON.parse(http.responseText);
        if (http.status === 200) {
            if (msg.statusCode === 0) {
                resolve(msg.result);
            } else {
                reject(msg);
            }
        } else {
            reject(msg);
        }
    } catch (err) {
        reject(err);
    }
};
http.onerror = (err) => {
    reject(err);
};

// 发送到云图库服务器
http.open('POST', clientendUrl);
http.setRequestHeader('Content-Type', 'application/json;Charset=UTF-8');

// 将Cloud Token写在请求头中
http.setRequestHeader('Authorization', token);

// image为截取的摄像头图片数据，如：{image: '/9j/4AAQSkZJRgA...', appId: appId}
http.send(JSON.stringify(image));

  1. 检测识别结果

    如果未识别到内容，则继续识别，否则停止识别，可将识别的结果，如targetId, meta等信息取出处理。

    https://您云图库的Client-end URL/search 在未识到目标时，HTTP状态码为404。

  2. 完整示例