diff --git a/src/controllers/streamInfoController.js b/src/controllers/streamInfoController.js new file mode 100644 index 0000000..22aef11 --- /dev/null +++ b/src/controllers/streamInfoController.js @@ -0,0 +1,28 @@ +/*Canopy - The next generation of stoner streaming software +Copyright (C) 2024-2026 Rainbownapkin and the TTN Community + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see .*/ + +//Config +const config = require('../../config.json'); +const package = require('../../package.json'); + +//Local Imports +const csrfUtils = require('../utils/csrfUtils'); + +//register page functions +module.exports.get = async function(req, res){ + //Render page + return res.render('streamInfo', {instance: config.instanceName, links: config.links, user: req.session.user, csrfToken: csrfUtils.generateToken(req)}); +} \ No newline at end of file diff --git a/src/routers/streamInfoRouter.js b/src/routers/streamInfoRouter.js new file mode 100644 index 0000000..56313eb --- /dev/null +++ b/src/routers/streamInfoRouter.js @@ -0,0 +1,34 @@ +/*Canopy - The next generation of stoner streaming software +Copyright (C) 2024-2026 Rainbownapkin and the TTN Community + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see .*/ + +//npm imports +const { Router } = require('express'); + + +//local imports +const streamInfoController = require("../controllers/streamInfoController"); +const presenceUtils = require("../utils/presenceUtils"); + +//globals +const router = Router(); + +//Use presence middleware +router.use(presenceUtils.presenceMiddleware); + +//routing functions +router.get('/', streamInfoController.get); + +module.exports = router; diff --git a/src/server.js b/src/server.js index 8e78e99..eddcc48 100644 --- a/src/server.js +++ b/src/server.js @@ -57,6 +57,7 @@ const fileNotFoundController = require('./controllers/404Controller'); const indexRouter = require('./routers/indexRouter'); const aboutRouter = require('./routers/aboutRouter'); const hrtRouter = require('./routers/hrtRouter'); +const streamInfoRouter = require('./routers/streamInfoRouter'); const registerRouter = require('./routers/registerRouter'); const loginRouter = require('./routers/loginRouter'); const profileRouter = require('./routers/profileRouter'); @@ -182,6 +183,7 @@ app.use(sessionUtils.rememberMeMiddleware); app.use('/', indexRouter); app.use('/about', aboutRouter); app.use('/hrt', hrtRouter); +app.use('/streamInfo', streamInfoRouter); app.use('/register', registerRouter); app.use('/login', loginRouter); app.use('/profile', profileRouter); diff --git a/src/views/streamInfo.ejs b/src/views/streamInfo.ejs new file mode 100644 index 0000000..8d8cbaa --- /dev/null +++ b/src/views/streamInfo.ejs @@ -0,0 +1,70 @@ +<%# Canopy - The next generation of stoner streaming software +Copyright (C) 2024-2026 Rainbownapkin and the TTN Community + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . %> + + + + <%- include('partial/styles', {instance, user}); %> + <%- include('partial/csrfToken', {csrfToken}); %> + + <%= instance %> - HLS, WebRTC? WTF? + + + <%- include('partial/navbar', {user}); %> +
+

HLS, WebRTC? WTF?

+
+

TL;DR

+ Canopy supports two types of streams. WebRTC and HLS. WebRTC streams are instant ad-hoc peer-to-peer connections, good for smaller streams. HLS streams require a dedicated server and more setup time, but are more reliable and can offer better bandwidth for both streamers and viewers alike. +
+
+
+

How HLS Works:

+ HLS Works by taking an input video stream via a "first mile" protocol (usually RTMP) from broadcasting software such as OBS, and sending it off to a properly configured web-server. The web-server ingests the video stream, chopping it up into small bite-sized video files (around 2-6 seconds long), and serving them along side a playlist file on the web. When your browser plays back the stream, it is given a link to the playlist file. Reading the playlist file, it is given the location and order of video clips. When it runs out, it refreshes the playlist file in the background to get the details on the latest clips of the stream. Finally, as it plays the stream back, it sews the clips back-together in order. +
+
+
+

How WebRTC Works:

+ WebRTC is a collection of technolgies included in most modern browsers. It includes a mechanism for negotiating direct connections through NAT (either peer-2-peer via STUN, or relayed via TURN server) with dedicated media streaming features, and a browser-side API for interacting with Cameras, Microphones, and Screen shares. +
+
+
+

Pros/Cons of HLS:

+ While requireing a web-server running specific software, HLS streams provide dedicated bandwidth for streamers. Furthermore, while they do have a bit more of a delay than WebRTC Streams, they typically are more reliable and able to hold better video quality over worse connections than WebRTC. They also typically require broadcasting software on-top of the requirement for a dedicated server, though depending on preference that could be either a good or bad thing. +
+
+
+

Pros/Cons of WebRTC:

+ WebRTC connections come in two flavors, STUN and TURN. STUN uses an intermediary server, to make a connection through your firewall, to another established peer. For certain connections, some users, suchas those on a CGNAT, will require a TURN server to relay the connection. At the current moment, ourfore.st only supplies STUN servers, however we do plan on looking into TURN relay servers in the future. +
+
+ This means that each viewer uses up part of a streamers bandwidth, comparitively to HLS, in which the streaming-server takes the load of multiple connections off of the streamers connection (assuming they're it's not hosted on the same connection.) Furthermore, WebRTC's video-chat roots prioritizes real-time communication over video/audio quality. That being said, WebRTC requires no extra setup, and no extra software other than this website and your browser. +
+
+
+

HLS Setup Reccomendations:

+ The easiest way to setup an HLS Streaming server would be via Owncast, alternatively experienced self-hosters may prefer to configure the NGINX web-server with the ngx_http_hls_module. +
+ If going the NGINX route, check out RSSSSA, Rainbow's custom solution for implementing multi-user streamkey authentication on top of ngx_http_hls_module. +
+
+ Anywho, your server will need to be configured with a proper domain-name pointed at it, HTTPS, and a Access-Control-Allow-Origin header allowing ourfore.st code to request your servers content from user's browsers. +
+
+ +
+ <%- include('partial/scripts', {user}); %> +
+ diff --git a/www/css/about.css b/www/css/about.css index d4338af..09991b4 100644 --- a/www/css/about.css +++ b/www/css/about.css @@ -20,13 +20,13 @@ along with this program. If not, see .*/ @media (orientation: landscape){ #about-div{ - margin: 0 25%; + margin: 0 25% 2em; } } @media (orientation: portrait){ #about-div{ - margin: 0 10%; + margin: 0 10% 2em; } }