-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathplayground.html
179 lines (155 loc) · 6.06 KB
/
playground.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transparent WebRTC Background Playground</title>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/selfie_segmentation.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
<style>
body {
background-color: cyan;
}
p {
margin: 2px;
}
.row {
display: flex;
}
.mirror {
transform: scaleX(-1);
}
</style>
</head>
<body>
<div class="container">
<h2>Green Screen Transparency Controls</h2>
<div class="row">
<div>
<h4>Canvas method</h4>
<label for="g_floor">Minimum green value:</label>
<input type="range" min="0" max="255" value="105" id="g_floor"
oninput="this.nextElementSibling.value = this.value"/>
<output>105</output>
<br>
<label for="rb_ceiling">Maximum red and blue values:</label>
<input type="range" min="0" max="255" value="80" id="rb_ceiling"
oninput="this.nextElementSibling.value = this.value"/>
<output>80</output>
</div>
<div>
<h4>webGL method</h4>
<p>
<label for="keyColor">keyColor</label>
<input type="color" id="keyColor" value="#00ff00"/>
</p>
<p>
<label for="similarity">Similarity</label>
<input type="range" id="similarity" min="0" max="1" step="0.001" value="0.4"
oninput="this.nextElementSibling.value = this.value"/>
<output>0.4</output>
</p>
<p>
<label for="smoothness">Smoothness</label>
<input type="range" id="smoothness" min="0" max="1" step="0.001" value="0.08"
oninput="this.nextElementSibling.value = this.value"/>
<output>0.08</output>
</p>
<p>
<label for="spill">Spill</label>
<input type="range" id="spill" min="0" max="1" step="0.001" value="0.1"
oninput="this.nextElementSibling.value = this.value"/>
<output>0.1</output>
</p>
</div>
</div>
<h2>Sender</h2>
<div>
<h3>Webcam options</h3>
<div>
<label for="devices">Choose your camera source</label>
<select name="devices" id="devices" class="senderControl"></select>
<br>
<p>Pick a video resolution (default VGA)</p>
<button id="qvga" class="senderControl">QVGA</button>
<button id="vga" class="senderControl">VGA</button>
<button id="hd" class="senderControl">HD</button>
</div>
<h3>Choose the elements you want to enable</h3>
<div>
<input type="checkbox" id="show_video" checked/>
<label for="show_video">Webcam video</label>
<input type="checkbox" id="show_transparency" checked/>
<label for="show_transparency">Show Transparency</label>
<input type="checkbox" id="show_green_screen" checked/>
<label for="show_green_screen">Show Green Screen</label>
<input type="checkbox" id="show_green_transparency" checked/>
<label for="show_green_transparency">Show Green Transparency</label>
<input type="checkbox" id="show_webgl_transparency" checked/>
<label for="show_webgl_transparency">Show WebGL Transparency</label>
</div>
<h3>Adjust green screen parameters</h3>
</div>
<div class="row">
<div>
<h3>Webcam video</h3>
<video id="gum_video" autoplay muted playsinline class="mirror"></video>
</div>
<br>
<div>
<h3>Transparent background</h3>
<canvas id="transparent_canvas" class="mirror"></canvas>
</div>
<div>
<h3>Green background</h3>
<canvas id="green_screen_canvas" class="mirror"></canvas>
</div>
<div>
<h3>Canvas Green Transparency</h3>
<canvas id="transparent_green_canvas" class="mirror"></canvas>
</div>
<div>
<h3>webGL Green Transparency</h3>
<canvas id="transparent_green_webgl" class="mirror"></canvas>
</div>
</div>
<h3>Place a WebRTC Call</h3>
<div>
<p>Choose the source to use:</p>
<button id="call_transparent" class="callBtn senderControl">transparency</button>
<button id="call_green" class="callBtn senderControl">green screen</button>
<button id="call_transparent_green" class="callBtn senderControl">green transparency</button>
<button id="call_transparent_webgl" class="callBtn senderControl">webgl transparency</button>
</div>
</div>
<div>
<h2>Receiver</h2>
<h3>Choose the elements you want to see</h3>
<div>
<input type="checkbox" id="receiver_show_video" checked/>
<label for="receiver_show_video">Incoming stream</label>
<input type="checkbox" id="receiver_show_transparency" checked/>
<label for="receiver_show_transparency">Add Transparency</label>
<input type="checkbox" id="receiver_show_webgl_transparency" checked/>
<label for="receiver_show_webgl_transparency">Add WebGL Transparency</label>
</div>
<div class="row">
<div>
<h3>Received video</h3>
<video id="receiver" autoplay muted playsinline></video>
</div>
<div>
<h3>Canvas Transparency added</h3>
<canvas id="transparent_receiver"></canvas>
</div>
<div>
<h3>WebGL Transparency added</h3>
<canvas id="transparent_receiver_webgl"></canvas>
</div>
</div>
</div>
</div>
<script type="module" src="main.js"></script>
</body>
</html>