EasyAR WebAR 微信小程序 快速入门

注:为提高请求识别速度和降低成本建议您采用token方式进行请求识别,本文档会保留服务端适配的请求方式

一、开发前准备

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

_images/webar-mini2.png _images/webar-mini.png
  1. 如果需要使用云识别功能,请登录 EasyAR 官网购买WebAR云识别图库,并获取Cloud Key,Cloud Secret和Client-end URL或者WebAR Token和Client-end URL:

_images/webar-min.png

二、开发步骤

注:本文档以最简化方式说明开发微信小程序WebAR的步骤。

1、在微信开发者工具中找到app.json文件,配置页面路由以及全局信息等。第一个是小程序打开的首页,假如现在需要三个页面:首页、识别页面和展示页面,其目录结构和配置如下:

_images/webar-mini3.png

2、在首页中显示直接体验和识别体验入口。展示效果如下:

_images/webar-mini4.png

代码如下:

<!--index.wxml-->
<view class='index-container' frame-size="small" style="width: 100%; height: {{height}}px">
  <view class="btn-area recognition">
      <button type="primary" bindtap="goRecognition">识别体验</button>
  </view>
  <view class="btn-area direct">
      <button type="primary" bindtap="goShow">直接体验</button>
  </view>
</view>

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    height: 360,
    status: false,
    scanStatus: 'none',
    msg: "请点击识别图片",
    listener: null,
    isRequest: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: res => {
        this.setData({ height: res.windowHeight });
      }
    });
  },
  goShow: function(ev) {
    wx.navigateTo({
      url: '../show/show'
    });
  },
  goRecognition: function(ev) {
    wx.navigateTo({
      url: '../recognition/recognition'
    });
  }
})

/**index.wxss**/
.index-container{
  position: relative;
  background-color: #eeeeee;
}
.btn-area{
  position: absolute;
  right: 20px;
  left: 20px;
}
.recognition{
  bottom: 35vh;
}
.direct{
  top: 35vh;
}

3、因为小程序无法加载three.js等js插件,在展示界面,即直接体验跳转的页面,使用web-view组件呈现,代码如下:

<view class="container">
  <web-view src="https://webar.easyar.cn/webar/?targetId=direct"></web-view>
</view>

注:有关web-view组件的使用请直接参考 微信小程序开发文档 ,此处不予说明。

4、识别体验的页面效果以及页面代码如下:

_images/webar-mini5.png

使用 camera 组件,点击按钮的时候进行“拍照”操作,将图片传到服务端进行识别(此处请参考 EasyAR WebAR 快速入门) ,有关识别请求我们提供了两种方法,第一种采用服务端适配的方式,第二种采用token的方式,其区别和联系如下图所示:

_images/apiKey.png

获取图片以及发起识别请求代码如下:

识别请求方法一(服务端适配方式):

//获取图片
 takePhoto: function (e) {
      if (this.status) return;

      this.status = true;

       this.ctx.takePhoto({
        quality: 'normal',
        success: res => {
            this.setData({ msg: '识别中...' });
            this.searchPhoto(res.tempImagePath)
        },
        fail: err => {
            this.stopScan();
            this.setData({ msg: '未识别到目标' });
        }
       });
 }

  //发起识别请求
  searchPhoto: function (filePath) {
      wx.uploadFile({
        // recognize.php及其它语言实现,请参考 https://github.com/gentwolf-shen/EasyAR-WebAR-Demo/tree/master/backend
        url: 'https://<您的域名>/recognize.php',
        filePath: filePath,
        name: 'image',
        success: res => {
            this.status = false;
            let msg = JSON.parse(res.data);
            that.setData({isRequest: false});
            if (msg.statusCode == 0) {
                this.setData({ msg: '识别成功' });
                setTimeout(() => {
                    console.info('go to webar');
                    wx.navigateTo({
                      url: '../show/show'
                    });
                }, 500);
            }
        },
        fail: err => {
          this.setData({ msg: JSON.stringify(err), isRequest: false });
        }
      });
识别请求方法二(token方法):

二(1):获取token: 打开easyar官网进入云识别管理,并选择正在使用的云识别图库点击管理,进入之后选择秘钥,选择您需要的日期,然后点击生成token按钮,最后点击复制按钮就可以拿到需要的token (若您需要持续有效的token,请您参考 EasyAR CRS/api/auth-getToken 自己搭建一个动态获取token的服务器,每次进入小程序识别界面请求拿到最新token即可):

_images/getToken.png

二(2):使用token进行识别: 首先获取图片并转化为base64位编码格式(为加快转化速度,故引用upng.js):

import upng from '../../UPNG.js'
 //获取图片
takePhoto: function (e) {
    if (this.status) return;
    this.status = true;
    const context = wx.createCameraContext()
    this.listener = context.onCameraFrame((frame) => {
      if(!this.data.isReuqest) {
        this.transformArrayBufferToBase64(frame);
      }
    });
    this.listener.start({
      success: () => {
        this.setData({ msg: '识别中'});
      },
      fail: (err) => {
        this.setData({ msg: err});
      }
    })
  }

 //转化base64编码格式
transformArrayBufferToBase64: function (frame) {
     const data = new Uint8ClampedArray(frame.data);
     this.setData({isReuqest: true});
     let pngData = upng.encode([frame.data], frame.width, frame.height, 16, 0);
     let base64 = wx.arrayBufferToBase64(pngData);
     this.searchPhoto(base64)
},

二(3):发起识别请求(将复制得到的token作为Authorization的属性值放入header中即可):

searchPhotp: function(imageBase64) {
    let that = this;
    wx.request({
      url: 'https://cn1-crs.easyar.com:8443/search',
      data: {
        image: imageBase64
      },
      header: {
        'Authorization': '您easyar官网复制得到的token',
        'content-type': 'application/json' // 默认值
      },
      method: 'POST',
      success(res) {
        that.setData({isReuqest: false});
        if (res.data.statusCode == 0) {
          that.listener.stop();
          that.setData({ msg: '识别成功'});
          setTimeout(() => {
            console.info('go to webar');
            wx.navigateTo({
              url: '../show/show'
            });
          }, 500);
        }
      },

      fail(err) {
        console.log(err)
        that.status = false;
        that.setData({ msg: '识别失败,请点击重试', isReuqest: false});
      }
    })
}

5、完整示例: 点击查看

以上为EasyAR WebAR 微信小程序的所有核心开发步骤。关于如何发布小程序的问题,请参考 微信小程序开发文档

三、常见问题

1、发起识别请求中的url(您的请求接口)是什么意思?

这个是您的接收上传图片的地址,因为easyar云识别接受的是base64编码之后的文件,小程序上传的是file文件,所以需要中间转换一下。

2、直接体验跳转的页面在苹果手机中无法开启摄像头?

因为web-view组件是在微信浏览器中运行,iOS不支持在Safari以外的浏览器中打开摄像头。

3、IOS开启的3D内容是黑色背景,在安卓是好的,是否正常?

是的,因为小程序不支持WebGL,所以渲染3D内容仍旧采用的是web-view组件。

4、token的时间是否可以定制化?

可以,您可以访问 EasyAR CRS/api/auth-getToken 进行定制化获取相应token