ynerant/ghostream
1
0
Fork 0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2024-12-22 19:42:20 +00:00
Code Issues Releases Wiki Activity

Working javascript modules

Browse Source
This commit is contained in:
Alexandre Iooss 2020-10-20 21:59:07 +02:00
parent c88f473ec0
commit 0b3fb87fa2
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
2 changed files with 73 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/static/js/main.js
View File

@ -1,18 +1,27 @@
import { GSWebSocket } from "./modules/websocket.js"; import { GsWebSocket } from "./modules/websocket.js";
import { ViewerCounter } from "./modules/viewerCounter.js"; import { ViewerCounter } from "./modules/viewerCounter.js";
// Some variables that need to be fixed by web page /**
const ViewersCounterRefreshPeriod = 1000; * Initialize viewer page
const stream = "demo"; *
let quality = "source"; * @param {String} stream
* @param {List} stunServers
* @param {Number} viewersCounterRefreshPeriod
*/
export function initViewerPage(stream, stunServers, viewersCounterRefreshPeriod) {
// Default quality
let quality = "source";
// Create WebSocket // Create WebSocket
const s = new GSWebSocket(); const s = new GsWebSocket();
s.open(); s.open();
// Register keyboard events // Create WebRTC
const viewer = document.getElementById("viewer"); // FIXME startPeerConnection() with stunServers
window.addEventListener("keydown", (event) => {
// Register keyboard events
const viewer = document.getElementById("viewer");
window.addEventListener("keydown", (event) => {
switch (event.key) { switch (event.key) {
case "f": case "f":
// F key put player in fullscreen // F key put player in fullscreen
@ -30,19 +39,19 @@ window.addEventListener("keydown", (event) => {
viewer.play(); viewer.play();
break; break;
} }
}); });
// Create viewer counter // Create viewer counter
const viewerCounter = new ViewerCounter( const viewerCounter = new ViewerCounter(
document.getElementById("connected-people"), document.getElementById("connected-people"),
stream, stream,
); );
viewerCounter.regularUpdate(ViewersCounterRefreshPeriod); viewerCounter.regularUpdate(viewersCounterRefreshPeriod);
// Side widget toggler // Side widget toggler
const sideWidgetToggle = document.getElementById("sideWidgetToggle"); const sideWidgetToggle = document.getElementById("sideWidgetToggle");
const sideWidget = document.getElementById("sideWidget"); const sideWidget = document.getElementById("sideWidget");
if (sideWidgetToggle !== null && sideWidget !== null) { if (sideWidgetToggle !== null && sideWidget !== null) {
// On click, toggle side widget visibility // On click, toggle side widget visibility
sideWidgetToggle.addEventListener("click", function () { sideWidgetToggle.addEventListener("click", function () {
if (sideWidget.style.display === "none") { if (sideWidget.style.display === "none") {
@ -53,13 +62,14 @@ if (sideWidgetToggle !== null && sideWidget !== null) {
sideWidgetToggle.textContent = "«"; sideWidgetToggle.textContent = "«";
} }
}); });
} }
// Video quality toggler // Video quality toggler
document.getElementById("quality").addEventListener("change", (event) => { document.getElementById("quality").addEventListener("change", (event) => {
quality = event.target.value; quality = event.target.value;
console.log(`Stream quality changed to ${quality}`); console.log(`Stream quality changed to ${quality}`);
// Restart the connection with a new quality // Restart the connection with a new quality
// FIXME // FIXME
}); });
}

15
web/template/player.html
View File

@ -34,18 +34,17 @@
{{end}} {{end}}
</div> </div>
<script type="module" src="/static/js/main.js"></script> <script type="module">
<script> import { initViewerPage } from "/static/js/main.js";
// Some variables that need to be fixed by web page
const viewersCounterRefreshPeriod = Number("{{.Cfg.ViewersCounterRefreshPeriod}}");
const stream = "{{.Path}}";
const stunServers = [ const stunServers = [
{{range $id, $value := .Cfg.STUNServers}} {{range $id, $value := .Cfg.STUNServers}}
"{{$value}}", "{{$value}}",
{{end}} {{end}}
] ]
startPeerConnection() initViewerPage(stream, stunServers, viewersCounterRefreshPeriod)
// Wait a bit before pulling viewers counter for the first time
setTimeout(() => {
refreshViewersCounter("{{.Path}}", {{.Cfg.ViewersCounterRefreshPeriod}})
}, 1000)
</script> </script>
{{end}} {{end}}