diff --git a/content/maker-portfolio/light-weight-video-streaming.md b/content/maker-portfolio/light-weight-video-streaming.md new file mode 100644 index 0000000..1f4e0e1 --- /dev/null +++ b/content/maker-portfolio/light-weight-video-streaming.md @@ -0,0 +1,151 @@ +--- +title: Light Weight Video Streaming Server +date: 2024-12-24 +--- + +> [!NOTE] +> This is another installation in my *magnum opus*, "Random-Things-I-Make-for-Absolutely-no-Reason". + +# The Problem + +I've picked up watching portions of shows and dropping them on a whim, but generally don't want to stream them thanks to the network load caused by my other projects[^1]. This requires downloading and hosting the files myself, perfectly feasible given my resources. +Hosting these files over the internet, however, would not be feasible due to the low outgoing upload speeds provided by my godforsaken ISP. The client, in cases would just be my phone or laptop. I will acknowledge, though, that options like Plex, Jellyfin, and others exist to manage almost the same requirements. +The sole reason I've chosen not to go with these is the resource overhead demanded. I spun up an instance of Jellyfin to prove this point. At idle, $\ge0.5$ GB of memory was used alongside a not insignificant CPU/GPU allocation. +Looking further into the processes involved, I found that servers like Jellyfin and Plex use the HSL video streaming paradigm, requiring server-side segmentation, encoding/decoding, and scaling. In my situation, bandwidth was an unlimited resource, so the overhead was unnecessary. + +# The Solution + +I really just had to write a script to present all the videos on a webserver in a drop-down list with a decent video player. Although there is nothing I hate more in the world than a Python network application, I'm too lazy to do anything else. + +Flask python API/`html` proxy (`server.py`): + +```python +from flask import Flask, jsonify, send_from_directory, render_template +import os + +app = Flask(__name__) + +# Get the current working directory (where the Python script is run from) +video_dir = os.getcwd() # Ensure this is where your .mp4 files and index.html are located + +@app.route('/') +def serve_index(): + """Serve the index.html file.""" + return send_from_directory(video_dir, 'index.html') + +@app.route('/videos') +def list_videos(): + """Return a list of .mp4 files in the directory.""" + files = [f for f in os.listdir(video_dir) if f.endswith('.mp4')] + return jsonify(files) + +@app.route('/videos/') +def serve_file(filename): + """Serve video files to the browser from the videos directory.""" + return send_from_directory(video_dir, filename) + +if __name__ == "__main__": + app.run(host="0.0.0.0", port=8080) + +``` + +And the `html` front-end (`index.html`): + +```html + + + + + + 4K Video Player + + + + +

4K Video Player

+ +
+ +
+ + + + + +``` +Resulting in: +![](maker-portfolio-1.png) + + +[^1]: I will write these up here at some point. diff --git a/content/maker-portfolio/maker-portfolio-1.png b/content/maker-portfolio/maker-portfolio-1.png new file mode 100644 index 0000000..e1775a5 Binary files /dev/null and b/content/maker-portfolio/maker-portfolio-1.png differ diff --git a/content/maker-portfolio/maker-portfolio-2.png b/content/maker-portfolio/maker-portfolio-2.png new file mode 100644 index 0000000..8220b40 Binary files /dev/null and b/content/maker-portfolio/maker-portfolio-2.png differ