Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add WebCodecs in Worker sample #583

Merged
merged 14 commits into from
Feb 2, 2023
Merged

Add WebCodecs in Worker sample #583

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
01a923d
Add WebCodecs in Worker sample
aboba Oct 15, 2022
17c1a79
Cleanup debug messages
aboba Oct 17, 2022
bedfdce
Add more granular error messages
aboba Oct 17, 2022
2bff7f8
Add CSS, update codec configuration
aboba Oct 17, 2022
9317f5b
Fix HEVC codec string
aboba Oct 18, 2022
c4e0d4e
Fix HEVC codec string
aboba Oct 18, 2022
2592be3
Remove remaining "var" usage
aboba Oct 18, 2022
29c4bc1
Renove hard coded HEVC error
aboba Oct 19, 2022
a9098fc
Update encode/decode and queue depth statistics
aboba Oct 19, 2022
f62116e
Remove encoder and decoder metrics
aboba Oct 20, 2022
250506a
Restore queue size metrics, change default bitrate and GoP size
aboba Oct 23, 2022
4ddf87d
Fix cfg.svc bug
aboba Oct 30, 2022
3bb5c82
Add bitrate mode selection
aboba Oct 30, 2022
c4e1bd1
Adjust default bitrate
aboba Nov 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
151 changes: 151 additions & 0 deletions samples/encode-decode-worker/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html>
<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 itemprop="description" content="Client-side WebCodecs code samples">
<meta itemprop="name" content="WebCodecs code samples">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">
<base target="_blank">

<title>WebCodecs in Worker</title>
<link rel="stylesheet" href="css/main.css">

<style>
body, html {
height: 100%;
}

button {
margin: 0 10px 20px 0;
min-width: 90px;
}

div#buttons {
margin: 0 0 1em 0;
}

div#container {
max-width: 100%;
}

#errormessage {
display: none;
font-size: 300%;
}

#videoblock {
display: none;
}

p#dimensions {
height: 1em;
margin: 0 0 1.5em 0;
}

video {
background: none;
height: auto;
width: auto;
}
</style>

</head>

<body>
<div>
<h2>WebCodecs in Worker</h2>
</div>

<textarea id="vLog" style="width: 640px; height: 360px"></textarea>
<br/></br>

<div id="rateInput">
<label for="rate">bitrate: </label>
<input type="text" name="rate" id="rate"
value=1000000>
</div>

<div id="keyInput">
<label for="keygap">keyframe interval: </label>
<input type="text" name="keygap" id="keygap"
value=300>
</div>

<div id="codecButtons">
<p>Codec:</p>
<input type="radio" id="H264" name="codec" value="H264" onchange="getCodecValue(this)">
<label for="H.264">H.264</label><br>
<input type="radio" id="H265" name="codec" value="H265" onchange="getCodecValue(this)">
<label for="H.265">H.265</label><br>
<input type="radio" id="VP8" name="codec" value="VP8" checked="checked" onchange="getCodecValue(this)">
<label for="VP8">VP8</label><br>
<input type="radio" id="VP9" name="codec" value="VP9" onchange="getCodecValue(this)">
<label for="VP9">VP9</label><br>
<input type="radio" id="AV1" name="codec" value="AV1" onchange="getCodecValue(this)">
<label for="AV1">AV1</label><br>
</div>

<div id="hwButtons">
<p>Hardware Acceleration Preference:</p>
<input type="radio" id="hw" name="hwAccel" value="prefer-hardware" onchange="getHwValue(this)">
<label for="hw">Prefer Hardware</label><br>
<input type="radio" id="sw" name="hwAccel" value="prefer-software" onchange="getHwValue(this)">
<label for="sw">Prefer Software</label><br>
<input type="radio" id="no-pref" name="hwAccel" value="no-preference" checked="checked" onchange="getHwValue(this)">
<label for="no-pref">No Preference</label><br>
</div>

<div id="prefButtons">
<p>Latency goal:</p>
<input type="radio" id="realtime" name="latencyPref" value="realtime" checked="checked" onchange="getPrefValue(this)">
<label for="realtime">realtime</label><br>
<input type="radio" id="quality" name="latencyPref" value="quality" onchange="getPrefValue(this)">
<label for="quality">quality</label><br>
</div>

<div id="modeButtons">
<p>Scalability Mode:</p>
<input type="radio" id="L1T1" name="mode" value="L1T1" onchange="getModeValue(this)">
<label for="L1T1">L1T1</label><br>
<input type="radio" id="L1T2" name="mode" value="L1T2" onchange="getModeValue(this)">
<label for="L1T2">L1T2</label><br>
<input type="radio" id="L1T3" name="mode" value="L1T3" checked="checked" onchange="getModeValue(this)">
<label for="L1T3">L1T3</label><br>
</div>

<div id="resButtons">
<p>Resolution:</p>
<input type="radio" id="qvga" name="resolution" value="qvga" checked="checked" onchange="getResValue(this)">
<label for="qvga">QVGA</label><br>
<input type="radio" id="vga" name="resolution" value="vga" onchange="getResValue(this)">
<label for="vga">VGA</label><br>
<input type="radio" id="hd" name="resolution" value="hd" onchange="getResValue(this)">
<label for="hd">HD</label><br>
<input type="radio" id="full-hd" name="resolution" value="full-hd" onchange="getResValue(this)">
<label for="full-hd">Full HD</label><br>
<input type="radio" id="tv4K" name="resolution" value="tv4K" onchange="getResValue(this)">
<label for="tv4K">Television 4k (3840x2160)</label><br>
<input type="radio" id="cinema4K" name="resolution" value="cinema4K" onchange="getResValue(this)">
<label for="cinema4K">Cinema 4K (4096x2160)</label><br>
<input type="radio" id="eightK" name="resolution" value="eightK" onchange="getResValue(this)">
<label for="eightK">8K</label><br>
</div>

<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>

<video height="50%" id="inputVideo" autoplay muted></video>
<br/>Local Video</br>
<br/></br><video height="50%" id="outputVideo" autoplay muted></video>
<br/>Encoded (and Decoded) Video via WebCodecs</br>
<br/></br>
<button id="connect">Start</button>
<button id="stop">Stop</button>
<script src="js/main.js"></script>
</body>
</html>