https://pose-animator-demo.firebaseapp.com/camera.html

1<!DOCTYPE html>
2<html>
3
4<head>
5    <title>PoseNet - Camera Feed Demo</title>
6    <style>body {
7            display: flex;
8            flex-direction: column;
9            align-items: center;
10            justify-content: center;
11        }
12
13        .canvas-container {
14            width: 800px;
15            max-width: 100%;
16            display: flex;
17            justify-content: center;
18            position: relative;
19        }
20
21        .camera-canvas {
22            position: absolute;
23            transform: scale(0.5, 0.5);
24            transform-origin: 0 0;
25            left: 10px;
26            top: 10px;
27        }
28
29        #main {
30            left: 0;
31            top: 0;
32            position: absolute;
33        }
34
35        .illustration-canvas {
36            border: 1px solid #eeeeee;
37        }
38
39        .footer {
40            position: fixed;
41            left: 0;
42            bottom: 0;
43            width: 100%;
44            color: black;
45        }
46
47        .footer-text {
48            max-width: 600px;
49            text-align: center;
50            margin: auto;
51        }
52
53        @media only screen and (max-width: 600px) {
54
55            .footer-text,
56            .dg {
57                display: none;
58            }
59        }
60
61        /*
62         *  The following loading spinner CSS is from SpinKit project
63         *  https://github.com/tobiasahlin/SpinKit
64         */
65        .sk-spinner-pulse {
66            width: 20px;
67            height: 20px;
68            margin: auto 10px;
69            float: left;
70            background-color: #333;
71            border-radius: 100%;
72            -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
73            animation: sk-pulseScaleOut 1s infinite ease-in-out;
74        }
75
76        @-webkit-keyframes sk-pulseScaleOut {
77            0% {
78                -webkit-transform: scale(0);
79                transform: scale(0);
80            }
81
82            100% {
83                -webkit-transform: scale(1.0);
84                transform: scale(1.0);
85                opacity: 0;
86            }
87        }
88
89        @keyframes sk-pulseScaleOut {
90            0% {
91                -webkit-transform: scale(0);
92                transform: scale(0);
93            }
94
95            100% {
96                -webkit-transform: scale(1.0);
97                transform: scale(1.0);
98                opacity: 0;
99            }
100        }
101
102        .spinner-text {
103            float: left;
104        }</style>
105    <meta name="viewport" content="width=device-width, initial-scale=1">
106</head>
107
108<body>
109    <div id="info" style="display:none">
110    </div>
111    <div id="loading" style="position: relative; left: 0">
112        <span class="spinner-text" id="status">
113            Loading PoseNet model...
114        </span>
115        <div class="sk-spinner sk-spinner-pulse"></div>
116    </div>
117    <div class="canvas-container">
118        <div id="main" style="display:none">
119            <video id="video" playsinline="" style=" -moz-transform: scaleX(-1);
120            -o-transform: scaleX(-1);
121            -webkit-transform: scaleX(-1);
122            transform: scaleX(-1);
123            display: none;
124            ">
125            </video>
126            <canvas id="output" class="camera-canvas"></canvas>
127            <canvas id="keypoints" class="camera-canvas"></canvas>
128        </div>
129        <canvas class="illustration-canvas">
130    </canvas></div>
131    <div class="footer">
132        <div class="footer-text">
133          <p>
134            Pose Animator runs TF.js <strong>FaceMesh</strong> and <strong>PoseNet</strong> models to animate SVG illustrations with camera feed / static images.<br>
135            It currently supports <strong>single-pose</strong>, <strong>single-face</strong> detection, and has been tested on Destkop Chrome & iOS Safari.
136            <br>
137            (PoseNet model config - MobileNetV1, output stride 16, quant bytes 2)
138          </p>
139        </div>
140      </div>
141    

141<script src="/camera.283d5d54.js"></script>

141
142</body>
143
144</html>