A React simple client for consuming the TrueFace webservice.

App.js

import React from "react";
import Webcam from "react-webcam";
import axios from "axios";


// Using a Local CORS Django based Proxy to bypass CORS issues
const proxyUrl = "http://127.0.0.1:8000/"

const videoConstraints = {
  width: 300,
  height: 300,
  facingMode: "user"
};

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);
 
  const capture = React.useCallback(
    () => {
      let imageSrc = webcamRef.current.getScreenshot();
      //splits the string to extract the base64 encoded data
      imageSrc = imageSrc.split(',')[1];
      let url = `${proxyUrl}`;
      //creating the json data
      let jsonData = `{"source": "${imageSrc}"}`;
      console.log(jsonData)
      postImage(url, jsonData);
    },
    [webcamRef]
  );

  const postImage = (url, jsonData) => {

    axios.post(
        url, 
        jsonData
      ).then(res => {
        //show results in the console
        console.log(res);
        console.log(res.data);
      }).catch(function (error) {
        // handle error
        console.log(error);
      })
  }
 
  return (
    <>
      <Webcam
        audio={false}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
};

export default WebcamCapture;