This repo contains code to be run on a raspberry pi with a camera attached and associated web frontend. Video can be streamed from the raspberry pi to a phone or computer.
The backend is built with simple python. The camera system uses mediamtx and streaming is done via WebRTC. The frontend is built with VueJS + Quasar.
- a diagram ("software_diagram.png"), also found in FigmaJam
- a frontend (vuejs + quasarjs)
- a backend (python + websockets)
- some configs (nginx, dnsmasq)
Install nginx, dnsmasq, npm, python3
npm install
pip install websockets
Add the .conf files to their correct places
(haven't tested this but the deps are that complicated here)
systemctl restart nginx
# (may have to "systemctl stop systemd-resolved && pkill -f systemd-resolved")
# lsof -i:53 to check for services bound to DNS
systemctl restart dnsmask
cd backend && python server.py
# Then
cd stream_frontend && ./build.sh
See diagram "software_diagram.png" for visuals
The DNSMASQ service (see config at ./dnsmask.conf) is a DNS server that translates domain names to IP addresses.
In the config file you can see the single relevant command:
address=/stream.me/127.0.0.1
This tells the web browser that the website "stream.me" should automatically redirect them to 127.0.0.1 (which is the address of the "raspberry pi", though this will change eventually)
This is the "web server" running on the raspberry pi which listens for all incoming requests. (See ./nginx.conf -- specifically the "location" blocks towards the bottom of the file)
It essentially acts as a middleman between the browser and the backend services running on the Pi.
So when the browser goes to stream.me, it will return a webpage for them.
When the joystick controller wants to send position data, it will send it to stream.me/control, and nginx will automatically know to redirect that to the backend.
To pull the video data, it will request "stream.me/live", which nginx will automatically redirect it to the live video feed
The backend is a single python script (found in ./backend/server.py). This would be running on the Raspberry Pi
This brings up a server on port 9000 that listens for websocket connections.
The web page (where a viewer is watching the video stream) would send a websocket connection to this backend in order to establish communication (for example to send position commands to the Pi to move the camera).
The frontend is essentially the webpage files that are sent to the viewer.
It contains the video container, joystick, battery icons, etc, and all the logic associated with those.
When loaded it will open a connection to the backend to enable two-way communication