-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
56 lines (56 loc) · 3.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LordTubeMaster</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" type="module"></script>
</head>
<body onload="video_url.value = location.hash.slice(1); const loop_mode = location.search.slice(1); if (['loop', 'random'].includes(loop_mode)) {effect.value = loop_mode; effect.dispatchEvent(new Event('change'))}; video_url.select(); video_url.dispatchEvent(new Event('change'))"> <!-- Chromium allows requesting screen capture without user gesture (against the spec). See: https://issues.chromium.org/issues/40177563 -->
<div id="inputs">
<input type="text" id="video_url" autofocus inputmode="url" spellcheck="false" size="40" placeholder="Enter YouTube / Vimeo ID + params or any URL" title="Reload with Alt+Enter" aria-keyshortcuts="Alt+Enter">
<select id="effect" title="Browse with Alt+↑ / Alt+↓" aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown">
<optgroup label="Wasm (MediaPipe)">
<option value="pose_landmarks_recode">Pose landmarks overlay</option>
<option value="pose_landmarks">Pose landmarks</option>
<option value="chest_xray">Chest X-ray</option>
<option value="laser_eyes">Laser eyes (close up only)</option>
<option value="background_segmentation">Background segmentation</option>
</optgroup>
<hr>
<optgroup label="WebGPU">
<option value="modnet_transformers_webgpu">MODNet portrait matting (Transformers.js)</option>
<option value="cartoonization_tfjs_webgpu">White-box cartoonization (TensorFlow.js)</option>
<option value="teed_edge_detection_ort_webgpu">TEED edge detection (ONNX Runtime web)</option>
</optgroup>
<hr>
<optgroup label="WebGL">
<option value="dotcamera_swissgl">Dot "camera" stippling (SwissGL)</option>
<option value="ruttetraizer_threejs">Rutt-Etra-Izer with mouse (Three.js)</option>
</optgroup>
<hr>
<optgroup label="VanillaJS">
<option value="bayer_dithering">Bayer dithering</option>
<option value="pixel_sorting">Pixel sorting</option>
<option value="rgb_split">RGB split</option>
</optgroup>
<hr>
<optgroup label="Meta">
<option value="passthrough_recode">Pass-through recoding</option>
<option value="loop">Loop all effects</option>
<option value="random">Randomize all effects</option>
</optgroup>
</select>
</div>
<div id="videos">
<iframe id="orig_video" allow="autoplay; fullscreen" allowfullscreen></iframe>
<video id="out_video" autoplay muted playsinline></video>
<canvas id="canvas" class="hide_cursor"></canvas>
</div>
<footer>
<a href="https://github.com/eyaler/LordTubeMaster/">code</a>
<a href="https://eyalgruss.com">more shit</a>
</footer>
</body>
</html>