-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
137 lines (133 loc) · 8.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Virtual Glasses Try-On</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel='stylesheet' type='text/css' media='screen' href='https://unpkg.com/webcam-easy/demo/style/webcam-demo.css'>
<link rel='stylesheet' type='text/css' media='screen' href='style/virtual-glasses.css'>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-core.min.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-converter.min.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-webgl.min.js"></script>
<script src="https://unpkg.com/@tensorflow/[email protected]/dist/tf-backend-cpu.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/[email protected]/dist/face-landmarks-detection.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/webcam-easy/dist/webcam-easy.min.js"></script>
<script type="text/javascript" src="js/webcam-ui-lib.js"></script>
</head>
<body>
<main id="virtual-glasses-app">
<div class="form-control webcam-start" id="webcam-control">
<label class="form-switch">
<input type="checkbox" id="webcam-switch">
<i></i>
<span id="webcam-caption">Try it On</span>
</label>
<button id="cameraFlip" class="btn d-none"></button>
</div>
<div id="image-container">
<canvas id="canvas" width="640" height="480"></canvas>
<div class="loading d-none">
Loading Model
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</div>
<div id="glasses-slider">
<img id="arrowLeft" src="images/arrow-left.png">
<div id="glasses-list">
<ul>
<li class="selected-glasses">
<img src="3dmodel/glasses-01/glasses_01.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-01/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.5"
data-3d-z="0"
data-3d-up="10"
data-3d-scale="0.01">
</li>
<li >
<img src="3dmodel/glasses-02/glasses_02.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-02/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.3"
data-3d-z="0"
data-3d-up="0"
data-3d-scale="0.4">
</li>
<li >
<img src="3dmodel/glasses-03/glasses_03.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-03/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.3"
data-3d-z="0"
data-3d-up="-40"
data-3d-scale="0.4">
</li>
<li>
<img src="3dmodel/glasses-04/glasses_04.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-04/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.5"
data-3d-z="0"
data-3d-up="0"
data-3d-scale="12">
</li>
<li >
<img src="3dmodel/glasses-05/glasses_05.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-05/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0"
data-3d-z="0"
data-3d-up="-80"
data-3d-scale="0.11">
</li>
<li >
<img src="3dmodel/glasses-06/glasses_06.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-06/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.3"
data-3d-z="0"
data-3d-up="-30"
data-3d-scale="0.1">
</li>
<li >
<img src="3dmodel/glasses-07/glasses_07.png" data-3d-type="gltf"
data-3d-model-path="3dmodel/glasses-07/"
data-3d-model="scene.gltf"
data-3d-x="0"
data-3d-y="0.3"
data-3d-z="0"
data-3d-up="0"
data-3d-scale="0.8">
</li>
</ul>
</div>
<img id="arrowRight" src="images/arrow-right.png">
</div>
</div>
<div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
Fail to start camera, please allow permision to access camera. <br/>
If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
<button id="closeError" class="btn btn-primary ml-3">OK</button>
</div>
<div class="md-modal md-effect-12">
<div id="app-panel" class="app-panel md-content row p-0 m-0">
<div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
<video id="webcam" autoplay playsinline width="640" height="480"></video>
</div>
</div>
</div>
<div class="md-overlay"></div>
</main>
<script type="module" src='js/virtual-glasses.js'></script>
</body>
</html>