EasyAR WebAR 微信小程序 快速入门

一、开发前准备

  1. 登录小程序后台,在【设置-开发设置-开发者ID】中,获取AppID,如下图:

    获取小程序AppID

    创建小程序

  2. 登录 EasyAR 官网购买WebAR云识别图库,并获取Cloud Key和Token:

    在“云识别管理”进入云识别图库的管理页面,获取Cloud Key

    获取CloudKey

    在“API KEY”进入API KEY的管理页面,获取Token。如有有效期需求选择有效期后生成Token

    获取token

二、开发步骤

1. wxml文件中添加camera和canvas组件。camera组件用于展示相机内容和获取相机帧,canvas组件用于图片压缩。

<!-- 相机组件,放在UI最底层展示相机内容 -->
<camera frame-size="medium"
        bindinitdone="onCameraInit"
        mode="normal"
        device-position="back"
        resolution="high"
        flash="off"/>
<!-- canvas组件,用于图片压缩,位置在屏幕外,不可见 -->
<canvas type="2d"
        id="capture"
        style="width: 1px; height: 1px;"/>

2. 初始化camera和canvas

const query = wx.createSelectorQuery();
query.select('#capture')
    .fields({node: true})
    .exec((res) => {
        const canvas = res[0].node;
        //设置canvas内部尺寸为480*640,frame-size="medium"的设置下相机帧大多是480*640
        canvas.width = 480;
        canvas.height = 640;
        this.canvas = canvas;
    });

let cameraContext = wx.createCameraContext();
let listener = cameraContext.onCameraFrame(frame => {
    if (!this.canvas) return;
    let canvas = this.canvas;
    //如果尺寸不匹配,就修改canvas尺寸以适应相机帧
    if (canvas.width !== frame.width || canvas.height !== frame.height) {
        canvas.width = frame.width;
        canvas.height = frame.height;
    }

    //TODO 在这里保存frame对象,以便在需要的时候进行下一步压缩图片、发起CRS请求。不要在onCameraFrame回调中直接处理。
});
listener.start();

3. 压缩图片为JPEG(在需要发起一次CRS请求时进行第3、4步,比如用户主动触发一次识别时,或者已经开始识别循环时。不要在onCameraFrame回调中直接发起)

let context = this.canvas.getContext('2d');
let ctxImageData = context.createImageData(frame.width, frame.height);
ctxImageData.data.set(new Uint8ClampedArray(frame.data)); //复制相机帧内容到imageData
context.putImageData(ctxImageData, 0, 0); //将imageData画到canvas上
let dataUrl = this.canvas.toDataURL("image/jpeg", 0.7); //使用toDataURL方法将相机帧压缩为JPEG,质量70%
let base64 = dataUrl.substr(23); //去除dataURL头,留下文件内容的base64

4. 组装请求参数,发起CRS请求

const params = {
    image: base64,
    notracking: "true",
    appId: "开发前准备中的 Cloud Key",
};

return new Promise((resolve, reject) => {
    wx.request({
        url: "https://cn1-crs.easyar.com:8443/search/",
        method: 'post',
        data: params,
        header: {
            'Authorization': "开发前准备中的 Token",
            'content-type': 'application/json'
        },
        success: res => resolve(res.data), //处理方法见下
        fail: err => reject(err),
    });
});

5. 处理请求结果

queryImage(frame).then(response => { //response为上面的res.data
    let result = response && response.result;
    if (!result) return;

    if (result.target) {
        console.log("识别成功", result.target.targetId);
        //小程序可以根据targetId获知识别到了哪一张图,进而进行判断或触发事件等,也可以对每张图配置meta信息,根据meta信息来进行操作

        if (result.target.meta) { //读取识别图meta的base64(meta在上传识别图时配置)
            console.log("meta base64:", result.target.meta);
        }
    } else {
        console.log("识别失败", result.message);
    }
});

三、后续工作

  1. 完整示例: 点击查看

  2. https://cn1-crs.easyar.com:8443 加入小程序域名白名单的request部分

  3. 在图库中添加识别图

  4. 根据实际需求处理CRS请求的内容,如展示图片、视频、3D模型等

  5. 可以通过自建服务器,在服务器端 调用接口 的方式获取Token,发送给小程序端使用,而不是将Token写死在小程序代码中