# webar.js

**Repository Path**: CoolkingNight/webar.js

## Basic Information

- **Project Name**: webar.js
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebAR.js

### JS framework for WebAR.

## Installing WebAR.js

    npm install --save webar.js

## Docs

- <a href="http://ar.uc.cn/docs/webar/index.html">Website && Documentations</a>

## Getting Started:

WebAR.js 包含几个模块：

-   WebAR - WebAR.js入口，获取Camera对象
-   Camera - 摄像头模块
-   DisplayTarget - 绘制模块
-   Detector - 检测算法模块

```javascript
import WebAR from 'webar.js';

// 从 WebAR 获取配置好的camera对象
const camera = await WebAR.getWebCameraAsync();

// 异步打开摄像机
await camera.openAsync();

const canvas = document.querySelector('#canvas');
const gl = canvas.getContext('webgl');

// 配置并生成 displayTarget
const displayTarget = camera.createDisplayTarget(gl,);

// 绘制
const draw = () => {
  displayTarget.draw();
  window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

/*
* 配置FaceDetector
* @param {String} detectorName - camera.DETECTOR.FACE = 'FACE', 配置FaceDetector
* @param {Object} option - option
* @param {Boolean} option.singleFace - 是否只检测最大的脸
* @param {Boolean} option.rect - 是否返回人脸框位置
* @param {Boolean} option.alignment - 是否返回人脸五官的点
*/
const faceDetector = camera.setDetector(WebAR.DETECTOR.FACE, {
  singleFace: false,
  rect: true,
  alignment: true,
});

// 启动detector
faceDetector.start().then(() => {
  // MarkerDetector 回调数据
  faceDetector.onResult(data => {
    console.log(data);
  });
}, () => {
  // rejecjt 回调。detector 异常。
  // 在安卓上可能是SO 下载失败，SO 初始化失败等
  // 在iOS 不应该进入错误回调，如果有请发issue。
});

/*
* 配置MarkerDetector
* @param {String} detectorName - camera.DETECTOR.FACE = 'FACE', 配置FaceDetector
* @param {Array} marker - marker id
* @param {Object} option - 选项
* @param {String} option.url - marder 训练数据地址
*/
const MarkerDetedctor = camera.setDetector(camera.DETECTOR.FACE, {
  markers: [ 'playbill', 'h' ],
  option: { url: 'http://' },
});

// 启动detector
MarkerDetector.start().then(() => {
  // MarkerDetector 回调数据
  MarkerDetector.onResult(data => {
    console.log(data);
  });
}, () => {
  // rejecjt 回调。detector 异常。
  // 在安卓上可能是SO 下载失败，SO 初始化失败等
  // 如果在iOS 上进入错误回调，请发issue。
});

// 截图功能
displayTarget.getImage(base64 => {
  // 当前帧base64
  console.log(base64);
});

```
## License
<a href="https://github.com/alibaba/webar.js/blob/master/LICENSE">MIT</a>