二、开发步骤¶

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

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

列出设备上所有的摄像头

navigator.mediaDevices.enumerateDevices()

.then((devices) => {

devices.find((device) => {

if (device.kind === 'videoinput') {

const option = document.createElement('option');

option.text = device.label || 'camera '+ (videoDeviceElement.length + 1).toString();

option.value = device.deviceId;

// 将摄像头id存储在select元素中，方便切换前、后置摄像头

videoDeviceElement.appendChild(option);

}

});

if (videoDeviceElement.length === 0) {

reject('没有摄像头');

} else {

resolve(true);

}

})

.catch((err) => {

reject(err);

});

打开摄像头

// 摄像头参数

// 更多参数请查看 https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints

// deviceId是select元素中储存的摄像头id

const constraints = {

audio: false,

video: {deviceId: {exact: deviceId}}

};

navigator.mediaDevices.getUserMedia(constraints)

.then((stream) => {

// videoElement为video元素，将摄像头视频流绑定到video上实时预览

videoElement.srcObject = stream;

videoElement.style.display = 'block';

videoElement.play();

resolve(true);

})

.catch((err) => {

reject(err);

});

截取摄像头图像

// 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). 方式一： 使用Token直接访问云识别服务器。

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

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

Token是写在JavaScript文件中的，适用于安全要求较低的环境中使用，完整示例，请查看 Token使用示例。

// 云图库的Client-end URL

const url = '您云图库的Client-end URL/search';

// 云图库的Cloud Token

const token = '';

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', url);

http.setRequestHeader('Content-Type', 'application/json;Charset=UTF-8');

// 将Cloud Token写在请求头中

http.setRequestHeader('Authorization', token);

// image为截取的摄像头图片数据，如：{image: '/9j/4AAQSkZJRgA...'}

http.send(JSON.stringify(image));

2). 方式二，使用Cloud Key与Cloud Secret，将图像数据发送到你的服务器，并在服务器上将图像及云识别相关参数签名后，再发送到云识别服务器。

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

可以使用jQuery等类库，将上一步的image发送到服务器端识别。

服务器端处理，本文档以PHP示例，Java、C#等示例，请查看这里 。

// 云图库配置信息

define('CLOUDKEY', '');

define('CLOUDSECRET', '');

define('CLOUDURL', 'http:///search');

// 获取浏览器发送的图片信息

$image = '';

$data = @file_get_contents('php://input');

if ($data) {

$obj = json_decode($data);

$image = $obj->image;

}

// 将图片信息与云图库信息签名

$params = [

// Unix时间戳(毫秒)

'timestamp' => time() * 1000,

'appKey' => CLOUDKEY,

'image' => $image,

];

// 使用字典顺序将key排序后，将所有的key与value拼接，最后拼接上CLOUDSECRET，然后使用sha256加密

// 参数签名方法，请参考“EasyAR CRS文档”。

$params['signature'] = getSign($params, CLOUDSECRET);

// 发送到云识别服务器

$str = httpPost(CLOUDURL, json_encode($params));

// 检测返回结果

// 如果statusCode为0，则表示识别成功

$obj = json_decode($str);

if ($obj->statusCode != 0) {

// 识别失败或未识别到目标

} else {

// 识别成功

// 识别的结果为$obj->result->target

}

检测识别结果

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

完整示例