ynerant
/
ghostream
mirror of https://gitlab.crans.org/nounous/ghostream.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Change the quality selector

This commit is contained in:
Alexandre Iooss 2020-10-06 09:12:19 +02:00
parent 87b9db7cea
commit 24acfe1137
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
3 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/static/css/style.css
View File

@ -44,6 +44,19 @@ h1, h2, h3, h4 {
color: #ddd;
}
select {
border: none;
color: inherit;
appearance: none;
/* Custom caret */
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(187, 187, 187)' height='24' viewBox='0 1 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
padding-right: 1.2rem;
}
.container {
height: 100%;
width: 100%;

15
web/static/js/videoQuality.js
View File

@ -1,8 +1,9 @@
document.getElementsByName("quality").forEach(function (elem) {
elem.onclick = function () {
// Restart the connection with a new quality
peerConnection.createOffer({"iceRestart": true}).then(offer => {
return peerConnection.setLocalDescription(offer)
}).catch(console.log)
}
document.getElementById("quality").addEventListener("change", (event) => {
console.log(`Stream quality changed to ${event.target.value}`)
// Restart the connection with a new quality
// FIXME: set quality
peerConnection.createOffer({ "iceRestart": true }).then(offer => {
return peerConnection.setLocalDescription(offer)
}).catch(console.log)
})

27
web/template/viewer.html
View File

@ -6,22 +6,19 @@
<video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
</div>
<div class="quality-selector">
<form name="quality_form">
<input type="radio" id="quality_source" name="quality" value="" checked>
<label for="quality_source">Source</label>
<input type="radio" id="quality_720p" name="quality" value="@720p">
<label for="quality_720p">720p</label>
<input type="radio" id="quality_480p" name="quality" value="@480p">
<label for="quality_480p">480p</label>
<input type="radio" id="quality_240p" name="quality" value="@240p">
<label for="quality_240p">240p</label>
</form>
</div>
<!-- Links under video -->
<!-- Links and settings under video -->
<p>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-aspect-ratio-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm1 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 1 0V5h2.5a.5.5 0 0 0 0-1h-3zm11 8a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0V11h-2.5a.5.5 0 0 0 0 1h3z"/>
</svg>
<select id="quality">
<option value="">Source</option>
<option value="@720p">720p</option>
<option value="@480p">480p</option>
<option value="@240p">240p</option>
</select>
<svg class="ml-1" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z" />
<path fill-rule="evenodd"