demos/canvas2D/multipleTrackers/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-EN" />
    
    <title>JEELIZ FACEFILTER: CANVAS2D FACE TRACKING DEMO WITH MULTIPLE TRACKERS</title>
    
    <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
    <script src="../../../dist/jeelizFaceFilter.js"></script>

    <!-- INCLUDE DEMO SCRIPT -->
    <script src="./main.js"></script>

    <!-- HELPER TO USE CANVAS2D WITHOUT TAKING CARE OF WEBGL -->
    <script src="../../../helpers/JeelizCanvas2DHelper.js"></script>

    <!-- INCLUDE FORK ME ON GITHUB BANNER -->
    <script src="../../appearance/widget.js"></script>

    <link rel="stylesheet" href="../../appearance/style.css" type="text/css" />

    <style type='text/css'>
    #notice {
      position: absolute;
      z-index: -1;
      font-variant: small-caps;
      text-align: center;
      color: black;
      font-size: 32pt;
      left: 50%; top: 50%;
      width: 400px; height: 200px;
      margin-top: -100px; margin-left: -200px;
    }

    #jeeFaceFilterCanvas, #jeeFaceFilterCanvas2{
      width: auto;
      max-width: 40vw;
      position: static;
      float: left;
      transform: none;
    }
    </style>
  </head>
  
  <body>
    <canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
    <canvas width="600" height="600" id='jeeFaceFilterCanvas2'></canvas>
    
    <video id='myVideo' style='display: none' src='video.mp4' playsinline preload autoplay loop></video>
    <div id='notice'>Click or Touch <br/> to start the video!</div>
  </body>
</html>