webcam_demo

Webcam Demo

In this documentation we show how to use our detection service with webcamera. NOTE: we have chosen reactjs as it is today's one of the most popular UI library.

1. Clone our repository
2. Enter to webcam_demo folder and install packages

cd webcam_demo

npm install

3. Change detection API key inside src > App.js line 40

4. Start project

npm start

5. Click video start button to start your webcamera

OR follow below instructions to create project by yourself

1. Install reactjs

npx create-react-app compreface-demo

2. Enter to project folder

cd compreface-demo

3. Install CompreFace SDK

npm i @exadel/compreface-js-sdk

4. Create your component and copy/past following code. NOTE: We have used functional component and video tag used to connect to your webcamera and canvas tags used for drawing square and some extra data.

import { useRef } from 'react'
import { CompreFace } from '@exadel/compreface-js-sdk';

function App() {
  const videoTag = useRef(null);
  const canvas1 = useRef(null);
  const canvas2 = useRef(null);
  const canvas3 = useRef(null);
  
  const handleVideoStart = () => {
    console.log("Click is working")
  } 

  return (
    <div>
        <video ref={videoTag} width="640" height="480" autoPlay muted ></video>
        <canvas ref={canvas1} width="640" id="canvas" height="480" style={{ display: 'none' }}></canvas>
	      <canvas ref={canvas2} width="640" id="canvas2" height="480" style={{ position: 'absolute' }} ></canvas>
        <canvas ref={canvas3} width="640" height="480" style={{ position: 'absolute' }}></canvas>

        <div>
          <button onClick={handleVideoStart}>Start video</button>
        </div>
    </div>
  );
}

export default App;

5. Add ability to start webcamera when user clicks "Start video" button. Put following code into handleVideoStart() function. Navigator.mediaDevices is built in read-only property of browser which enables user to access webcamera.

 navigator.mediaDevices.getUserMedia({ video: true})
    .then(stream => videoTag.current.srcObject = stream)
    .catch( error => console.error(error) )

6. Initialize CompreFace instances and catch video event which fired when webcamera starts working. Your code should look like as following example. Play event listener fires when webcamera starts working and this is place where we need to use CompreFace SDK. NOTE: next_frame custom event created in order to create kind of recursion effect when we drawing square on face.

import { useRef } from 'react'
import { CompreFace } from '@exadel/compreface-js-sdk';

function App() {
  const videoTag = useRef(null);
  const canvas1 = useRef(null);
  const canvas2 = useRef(null);
  const canvas3 = useRef(null);
  
  const handleVideoStart = () => {
    navigator.mediaDevices.getUserMedia({ video: true})
      .then(stream => videoTag.current.srcObject = stream)
      .catch( error => console.error(error) )

      videoTag.current.addEventListener('play', () => {
        // CompreFace init
        let server = "http://localhost";
        let port = 8000;
        let detection_key = "your_api_key_for_detection_service";
  
        let core = new CompreFace(server, port);
        let detection_service = core.initFaceDetectionService(detection_key);
        // end of CompreFace init
  
        let ctx1 = canvas1.current.getContext('2d');
        let ctx2 = canvas2.current.getContext('2d');
        let ctx3 = canvas3.current.getContext("2d");

        document.addEventListener('next_frame', () => {
          ctx1.drawImage(videoTag.current, 0, 0, 640, 480)
          canvas1.current.toBlob( blob => {
            detection_service.detect(blob, {  limit: 1, face_plugins: 'age,gender' })
              .then(res => {
                /**

                  We need call draw function which draws square on face of user in front of webcamera

                */
              })
              .catch(error => console.log(error))
          }, 'image/jpeg', 0.95)
        })

        const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
			  document.dispatchEvent(evt);
      })
  } 

  return (
    <div>
        <video ref={videoTag} width="640" height="480" autoPlay muted ></video>
        <canvas ref={canvas1} width="640" id="canvas" height="480" style={{ display: 'none' }}></canvas>
	      <canvas ref={canvas2} width="640" id="canvas2" height="480" style={{ position: 'absolute' }} ></canvas>
        <canvas ref={canvas3} width="640" height="480" style={{ position: 'absolute' }}></canvas>

        <div>
          <button onClick={handleVideoStart}>Start video</button>
        </div>
    </div>
  );
}

export default App;

7. Add draw function. NOTE: You can extra canvas elemets which shows extra info related to detected face.

const drawFace = (canvasElement, faceData, extraCanvas) => {
    const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
    document.dispatchEvent(evt);
    let box = faceData.result[0].box;

    canvasElement.clearRect(0, 0, 640, 480);
    extraCanvas.clearRect(0, 0, 640, 480);

    canvasElement.strokeStyle = 'green';
    extraCanvas.strokeStyle = "blue";
    extraCanvas.fillStyle = "white"

    extraCanvas.lineWidth = 5;
    canvasElement.lineWidth = 5;
    
    canvasElement.strokeRect(box.x_min, box.y_min, box.x_max - box.x_min, box.y_max - box.y_min);
    extraCanvas.fillText( Number.parseFloat(box.probability).toPrecision(5) + '  ' + faceData.result[0].gender + '  ' + faceData.result[0].age[0] + '-' + faceData.result[0].age[1], box.x_min, box.y_min - 10)
  }

8. Final code should look like this.

import { useRef } from 'react'
import { CompreFace } from '@exadel/compreface-js-sdk';

function App() {
  const videoTag = useRef(null);
  const canvas1 = useRef(null);
  const canvas2 = useRef(null);
  const canvas3 = useRef(null);
  
  const drawFace = (canvasElement, faceData, extraCanvas) => {
    const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
    document.dispatchEvent(evt);
    let box = faceData.result[0].box;

    canvasElement.clearRect(0, 0, 640, 480);
    extraCanvas.clearRect(0, 0, 640, 480);

    canvasElement.strokeStyle = 'green';
    extraCanvas.strokeStyle = "blue";
    extraCanvas.fillStyle = "white"

    extraCanvas.lineWidth = 5;
    canvasElement.lineWidth = 5;
    
    canvasElement.strokeRect(box.x_min, box.y_min, box.x_max - box.x_min, box.y_max - box.y_min);
    extraCanvas.fillText( Number.parseFloat(box.probability).toPrecision(5) + '  ' + faceData.result[0].gender + '  ' + faceData.result[0].age[0] + '-' + faceData.result[0].age[1], box.x_min, box.y_min - 10)
  }

  const handleVideoStart = () => {
    navigator.mediaDevices.getUserMedia({ video: true})
      .then(stream => videoTag.current.srcObject = stream)
      .catch( error => console.error(error) )

      videoTag.current.addEventListener('play', () => {
        // CompreFace init
        let server = "http://localhost";
        let port = 8000;
        let detection_key = "your_api_key_for_detection_service";
  
        let core = new CompreFace(server, port);
        let detection_service = core.initFaceDetectionService(detection_key);
        // end of CompreFace init
  
        let ctx1 = canvas1.current.getContext('2d');
        let ctx2 = canvas2.current.getContext('2d');
        let ctx3 = canvas3.current.getContext("2d");

        document.addEventListener('next_frame', () => {
          ctx1.drawImage(videoTag.current, 0, 0, 640, 480)
          canvas1.current.toBlob( blob => {
            detection_service.detect(blob, {  limit: 1, face_plugins: 'age,gender' })
              .then(res => {
                  drawFace(ctx2, res, ctx3)
              })
              .catch(error => console.log(error))
          }, 'image/jpeg', 0.95)
        })

        const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
			  document.dispatchEvent(evt);
      })
  } 

  return (
    <div>
        <video ref={videoTag} width="640" height="480" autoPlay muted ></video>
        <canvas ref={canvas1} width="640" id="canvas" height="480" style={{ display: 'none' }}></canvas>
	      <canvas ref={canvas2} width="640" id="canvas2" height="480" style={{ position: 'absolute' }} ></canvas>
        <canvas ref={canvas3} width="640" height="480" style={{ position: 'absolute' }}></canvas>

        <div>
          <button onClick={handleVideoStart}>Start video</button>
        </div>
    </div>
  );
}

export default App;