Skip to content

Commit 9a92fb5

Browse files
abobadalecurtis
aboba
authored and
dalecurtis
committed
Add WebCodecs in Worker sample
This is a sample demonstrating WebCodecs Encode and Decode in a worker. A live demo is here: https://webrtc.internaut.com/wc/wcWorker/
1 parent f3ac20f commit 9a92fb5

File tree

3 files changed

+764
-0
lines changed

3 files changed

+764
-0
lines changed

‎samples/encode-decode-worker/index.html

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<meta charset="utf-8">
6+
<meta name="description" content="WebCodecs code samples">
7+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
8+
<meta itemprop="description" content="Client-side WebCodecs code samples">
9+
<meta itemprop="name" content="WebCodecs code samples">
10+
<meta name="mobile-web-app-capable" content="yes">
11+
<meta id="theme-color" name="theme-color" content="#ffffff">
12+
<base target="_blank">
13+
14+
<title>WebCodecs in Worker</title>
15+
<link rel="stylesheet" href="css/main.css">
16+
17+
<style>
18+
body, html {
19+
height: 100%;
20+
}
21+
22+
button {
23+
margin: 0 10px 20px 0;
24+
min-width: 90px;
25+
}
26+
27+
div#buttons {
28+
margin: 0 0 1em 0;
29+
}
30+
31+
div#container {
32+
max-width: 100%;
33+
}
34+
35+
#errormessage {
36+
display: none;
37+
font-size: 300%;
38+
}
39+
40+
#videoblock {
41+
display: none;
42+
}
43+
44+
p#dimensions {
45+
height: 1em;
46+
margin: 0 0 1.5em 0;
47+
}
48+
49+
video {
50+
background: none;
51+
height: auto;
52+
width: auto;
53+
}
54+
</style>
55+
56+
</head>
57+
58+
<body>
59+
<div>
60+
<h2>WebCodecs in Worker</h2>
61+
</div>
62+
63+
<textarea id="vLog" style="width: 640px; height: 360px"></textarea>
64+
<br/></br>
65+
66+
<div id="rateInput">
67+
<label for="rate">bitrate: </label>
68+
<input type="text" name="rate" id="rate"
69+
value=1000000>
70+
</div>
71+
72+
<div id="keyInput">
73+
<label for="keygap">keyframe interval: </label>
74+
<input type="text" name="keygap" id="keygap"
75+
value=300>
76+
</div>
77+
78+
<div id="codecButtons">
79+
<p>Codec:</p>
80+
<input type="radio" id="H264" name="codec" value="H264" onchange="getCodecValue(this)">
81+
<label for="H.264">H.264</label><br>
82+
<input type="radio" id="H265" name="codec" value="H265" onchange="getCodecValue(this)">
83+
<label for="H.265">H.265</label><br>
84+
<input type="radio" id="VP8" name="codec" value="VP8" checked="checked" onchange="getCodecValue(this)">
85+
<label for="VP8">VP8</label><br>
86+
<input type="radio" id="VP9" name="codec" value="VP9" onchange="getCodecValue(this)">
87+
<label for="VP9">VP9</label><br>
88+
<input type="radio" id="AV1" name="codec" value="AV1" onchange="getCodecValue(this)">
89+
<label for="AV1">AV1</label><br>
90+
</div>
91+
92+
<div id="hwButtons">
93+
<p>Hardware Acceleration Preference:</p>
94+
<input type="radio" id="hw" name="hwAccel" value="prefer-hardware" onchange="getHwValue(this)">
95+
<label for="hw">Prefer Hardware</label><br>
96+
<input type="radio" id="sw" name="hwAccel" value="prefer-software" onchange="getHwValue(this)">
97+
<label for="sw">Prefer Software</label><br>
98+
<input type="radio" id="no-pref" name="hwAccel" value="no-preference" checked="checked" onchange="getHwValue(this)">
99+
<label for="no-pref">No Preference</label><br>
100+
</div>
101+
102+
<div id="prefButtons">
103+
<p>Latency goal:</p>
104+
<input type="radio" id="realtime" name="latencyPref" value="realtime" checked="checked" onchange="getPrefValue(this)">
105+
<label for="realtime">realtime</label><br>
106+
<input type="radio" id="quality" name="latencyPref" value="quality" onchange="getPrefValue(this)">
107+
<label for="quality">quality</label><br>
108+
</div>
109+
110+
<div id="modeButtons">
111+
<p>Scalability Mode:</p>
112+
<input type="radio" id="L1T1" name="mode" value="L1T1" onchange="getModeValue(this)">
113+
<label for="L1T1">L1T1</label><br>
114+
<input type="radio" id="L1T2" name="mode" value="L1T2" onchange="getModeValue(this)">
115+
<label for="L1T2">L1T2</label><br>
116+
<input type="radio" id="L1T3" name="mode" value="L1T3" checked="checked" onchange="getModeValue(this)">
117+
<label for="L1T3">L1T3</label><br>
118+
</div>
119+
120+
<div id="resButtons">
121+
<p>Resolution:</p>
122+
<input type="radio" id="qvga" name="resolution" value="qvga" checked="checked" onchange="getResValue(this)">
123+
<label for="qvga">QVGA</label><br>
124+
<input type="radio" id="vga" name="resolution" value="vga" onchange="getResValue(this)">
125+
<label for="vga">VGA</label><br>
126+
<input type="radio" id="hd" name="resolution" value="hd" onchange="getResValue(this)">
127+
<label for="hd">HD</label><br>
128+
<input type="radio" id="full-hd" name="resolution" value="full-hd" onchange="getResValue(this)">
129+
<label for="full-hd">Full HD</label><br>
130+
<input type="radio" id="tv4K" name="resolution" value="tv4K" onchange="getResValue(this)">
131+
<label for="tv4K">Television 4k (3840x2160)</label><br>
132+
<input type="radio" id="cinema4K" name="resolution" value="cinema4K" onchange="getResValue(this)">
133+
<label for="cinema4K">Cinema 4K (4096x2160)</label><br>
134+
<input type="radio" id="eightK" name="resolution" value="eightK" onchange="getResValue(this)">
135+
<label for="eightK">8K</label><br>
136+
</div>
137+
138+
<div class="select">
139+
<label for="videoSource">Video source: </label><select id="videoSource"></select>
140+
</div>
141+
142+
<video height="50%" id="inputVideo" autoplay muted></video>
143+
<br/>Local Video</br>
144+
<br/></br><video height="50%" id="outputVideo" autoplay muted></video>
145+
<br/>Encoded (and Decoded) Video via WebCodecs</br>
146+
<br/></br>
147+
<button id="connect">Start</button>
148+
<button id="stop">Stop</button>
149+
<script src="js/main.js"></script>
150+
</body>
151+
</html>

0 commit comments

Comments
 (0)