Integración con JavaScript

Aprenda a integrar la biblioteca tm-videoface-plus en su proyecto utilizando JavaScript puro, con instrucciones paso a paso para construir una implementación simple y reutilizable de OCR.

Implementación Básica

import { VideoFace, StatusCodes, Envs } from 'tm-videoface-plus';

const config = [
  {
    type: 'CH_SMILE',
    enabled: true
  },
];

const vf = new VideoFace('YOUR_KEY', Envs.DEV, config);
const videoElement = document.querySelector('video');

vf.openCamera() //Open user camera
  .then((stream) => {
    videoElement.srcObject = stream;
    return vf.startStream(); //Start process
  }).then((id) => {
    console.log(id);
  })

// Listen to events...
vf.events('RESULT').subscribe((result) => {
  console.log('Result:', result);
  vf.close();
});

vf.events('MOVE').subscribe((move) => {
  // Handle move events e.g. MV_HEAD_TURN_LEFT
  console.log('Move:', move);
});

vf.events('ERROR').subscribe((error) => {
  console.error('Error:', error);
});

vf.events('CONNECTED').subscribe(() => {
  console.log('Connected to the stream.');
});

vf.close(); //Close

Ejemplo con browserify

index.js

import { VideoFace, Envs } from 'tm-videoface-plus';

async function init(){
    
  const config = [
    {type: 'CH_BLINK', enabled: true},
    {type: 'CH_SMILE', enabled: true},
    {type: 'CH_HEAD_POSE', enabled: true, moves: ['MV_HEAD_TURN_LEFT', 'MV_HEAD_TURN_RIGHT']}
  ];

  const vf = new VideoFace('YOUR_KEY', Envs.DEV, config);
  const stream = await vf.openCamera(); //Open user camera
  document.getElementById('video-tag').srcObject = stream;  //Display Stream
  await vf.startStream();  //Start process
  
  vf.events('CONNECTED').subscribe((e) => {
    console.log('Connected');
  });
  vf.events('MOVE').subscribe((move) => {
    // Handle move events e.g. ChallengeMoves.MV_HEAD_TURN_LEFT
    console.log('Move:', move);
  });
  vf.events('RESULT').subscribe((result) => {
    console.log('Result:', result);
    vf.close(); //Close
  });
  vf.events('ERROR').subscribe((error) => {
    console.error(error);
  });
};
window.onload = () => {
    init();
}

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <video id="video-tag" autoplay playsinline></video>
</body>
</html>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -o dist/bundle.js"
  },
  "dependencies": {
    "browserify": "^17.0.0",
    "fw-ocrid": "*"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }
}

npm install
npm run build

Ejecute los comandos anteriores y luego abra en el navegador el archivo index.html.

Implementación Básica​

Ejemplo con browserify​

Implementación Básica

Ejemplo con browserify