demos/canvas2D/fromVideoFile/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 FACE FILTER : CANVAS2D MINIMALIST FACE TRACKING DEMO FROM VIDEO FILE</title>
        
        <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
        <script type="text/javascript" src="../../../dist/jeelizFaceFilter.js"></script>

        <!-- INCLUDE DEMO SCRIPT -->
		<script type="text/javascript" src="./demo_videoFile.js"></script>

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

        <!-- INCLUDE FORK ME ON GITHUB BANNER -->
        <script type="text/javascript" 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;
        }
        </style>
    </head>
    
    <body onload="main()" style='color: white'>
        <canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
        <video id='myVideo' style='display: none' src='video.mp4' playsinline preload autoplay loop></video>
        <div id='notice'>Click or Touch <br/> to start !</div>
    </body>
</html>
 
 