-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
137 lines (125 loc) · 5.18 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 lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="WebCodecs code samples">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">
<title>Video frame processing tests</title>
<style>
h1 {
margin-top: 0;
}
video {
background: #222;
margin: 0 0 20px 0;
--width: 100%;
width: var(--width);
height: calc(var(--width) * 9 / 16);
}
th, td {
border-right: thin solid #999;
border-bottom: thin solid #999;
text-align: right;
}
</style>
</head>
<body>
<h1>Video frame processing tests</h1>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div id="params">
<p>
How to create the initial stream of <code>VideoFrame</code>:<br/>
<input type="radio" id="streammode1" name="streammode" value="generated" checked="checked">
<label for="streammode1">From scratch (<code>new VideoFrame()</code>)</label><br/>
<input type="radio" id="streammode2" name="streammode" value="usermedia">
<label for="streammode2">From camera (<code>getUserMedia() + MediaStreamTrackProcessor</code>)</label>
</p>
<p>
Video resolution:<br/>
<em>(Your camera may not support all modes!)</em><br/>
<select id="resolution">
<option value="default">Full HD if from scratch, HD if from camera</option>
<option value="360p">SD 360p - 640 x 360</option>
<option value="480p">SD 480p - 640 x 480</option>
<option value="720p">HD 720p - 1280 x 720</option>
<option value="1080p">Full HD 1080p - 1920 x 1080</option>
<option value="1440p">QHD 1440p - 2560 x 1440</option>
<option value="2160p">4K 2160p - 3840 x 2160</option>
</select>
</p>
<p>
Number of video frames per second:<br/>
<input type="text" id="framerate" value="25">
</p>
<p>
Transform frames in any way?<br/>
<input type="checkbox" id="mode-green" checked="checked">
<label for="mode-green">Replace green with W3C blue (<em>uses WebAssembly</em>)</label><br/>
<input type="checkbox" id="mode-grey">
<label for="mode-green">Convert image to black and white (<em>uses JavaScript</em>)</label><br/>
<input type="checkbox" id="mode-encode">
<label for="mode-encode">Encode/Decode in H.264 (<em>uses WebCodecs</em>)</label><br/>
<input type="checkbox" id="mode-ooo">
<label for="mode-ooo">Out-of-order <code>VideoFrame</code> every 5 seconds</label><br/>
<input type="checkbox" id="mode-slow">
<label for="mode-slow">Take longer to process <code>VideoFrames</code> every 2 seconds (lower frame rate preferrable)</label>
</p>
<p>
Add overlay to track actual display time in <code><video></code> element?<br/>
<input type="radio" id="overlay1" name="overlay" value="none">
<label for="overlay1">No overlay</label><br/>
<input type="radio" id="overlay2" name="overlay" value="timestamp" checked="checked">
<label for="overlay2">Add timestamp overlay in bottom-right corner (<em>uses WebGPU</em>)</label>
</p>
<p>
Explicitly copy frames to a specific part of memory in between steps?<br/>
<input type="radio" id="memory1" name="memory" value="no" checked="checked">
<label for="overlay1">No specific copy</label><br/>
<input type="radio" id="memory2" name="memory" value="cpu">
<label for="overlay1">Copy frames to CPU memory</label><br/>
<input type="radio" id="memory3" name="memory" value="gpu">
<label for="overlay1">Copy frames to GPU memory</label>
</p>
<p>
VideoFrame transferable hiccups across workers:<br/>
<input type="checkbox" id="closehack" checked="checked">
<label for="closehack">Enable <code>VideoFrame</code> close hack</label>
</p>
</div>
<p>
<video height="50%" id="outputVideo" autoplay muted controls></video>
</p>
<section id="stats" hidden>
<h2>Results of previous run</h2>
<table id="stats">
<thead>
<tr>
<th>Counter</th>
<th>Count</th>
<th>Avg.</th>
<th>Median</th>
<th>Min.</th>
<th>Max.</th>
</tr>
</thead>
<tbody>
</tbody>
<caption>Processing steps stats (times in ms)</caption>
</table>
<p>Notes on statistics:</p>
<ul>
<li>The "display" counter measures the time during which the frame was displayed.</li>
<li>The "end2end" counter does not take the display time into account.</li>
<li>The "queued" counter does not take time spent waiting for display either.</li>
<li>Some steps may not see all frames, e.g. "display". That's normal!</li>
<li>If you choose explicit copies to CPU/GPU memory, new "toCPU-xxx" or "toGPU-xxx" stats will appear, with "xxx" being the name of the next step (noting that "transform" covers "background" and "grey").</li>
</ul>
</div>
<script src="InstrumentedTransformStream.js"></script>
<script src="StepTimesDB.js"></script>
<script src="main.js"></script>
</body>
</html>