rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Added HLS Guide

Browse source
This commit is contained in:
rainbow napkin 2026-09-29 20:33:29 -04:00
parent 96cdcfc840
commit a9258ae35c
5 changed files with 136 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/controllers/streamInfoController.js Normal file
View file

@ -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 <https://www.gnu.org/licenses/>.*/
//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)});
}

34
src/routers/streamInfoRouter.js Normal file
View file

@ -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 <https://www.gnu.org/licenses/>.*/
//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;

2
src/server.js
View file

@ -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);

70
src/views/streamInfo.ejs Normal file
View file

@ -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 <https://www.gnu.org/licenses/>. %>
<!DOCTYPE html>
<html>
<head>
<%- include('partial/styles', {instance, user}); %>
<%- include('partial/csrfToken', {csrfToken}); %>
<link rel="stylesheet" type="text/css" href="css/about.css">
<title><%= instance %> - HLS, WebRTC? WTF?</title>
</head>
<body>
<%- include('partial/navbar', {user}); %>
<div id="about-div">
<h1>HLS, WebRTC? WTF?</h1>
<div class="dynamic-container" id="about-text">
<h2>TL;DR</h2>
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.
<br>
<br>
<br>
<h2>How HLS Works:</h2>
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.
<br>
<br>
<br>
<h2>How WebRTC Works:</h2>
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.
<br>
<br>
<br>
<h2>Pros/Cons of HLS:</h2>
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.
<br>
<br>
<br>
<h2>Pros/Cons of WebRTC:</h2>
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.
<br>
<br>
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.
<br>
<br>
<br>
<h2>HLS Setup Reccomendations:</h2>
The easiest way to setup an HLS Streaming server would be via <a href="https://owncast.online/">Owncast</a>, alternatively experienced self-hosters may prefer to configure the <a href="https://nginx.org/">NGINX web-server</a> with the <a href="https://nginx.org/en/docs/http/ngx_http_hls_module.html">ngx_http_hls_module</a>.
<br>
If going the NGINX route, check out <a href="https://git.ourfore.st/rainbownapkin/rssssa/">RSSSSA</a>, Rainbow's custom solution for implementing multi-user streamkey authentication on top of ngx_http_hls_module.
<br>
<br>
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.
</div>
</div>
</body>
<footer>
<%- include('partial/scripts', {user}); %>
</footer>
</html>

4
www/css/about.css
View file

@ -20,13 +20,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
@media (orientation: landscape){
#about-div{
margin: 0 25%;
margin: 0 25% 2em;
}
}
@media (orientation: portrait){
#about-div{
margin: 0 10%;
margin: 0 10% 2em;
}
}