Tutorial based on this one: https://codecalamity.com/a-raspberry-pi-streaming-camera-using-mpeg-dash-hls-or-rtsp/
First, you'll need to install both FFMPEG and SRT.
Then we'll setup our HTTP Web server to watch the stream.
sudo apt update
sudo apt install nginx ffmpeg -y
First we need to allow nginx to access to our .m3u8 file (the HLS playlist), by default nginx is serving up the /var/www/html directory. So it is easy enough to link our in memory folder as a sub folder there.
ln -s /dev/shm/streaming /var/www/html/streaming
We're now going to create a simple webpage with an integrated video player.
mkdir -p /var/lib/streaming
Then create the file:
sudo nano /var/lib/streaming/index.html
Copy and paste to get the video player (Based on the HLS.js demo)
Don't forget to change the line var videoSrc = 'http://<Ip of the nginx server>/streaming/master.m3u8'; with the IP address of your Nginx server
to be able to see the video.
You can uncomment the next line to test it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HLS Web Streaming</title>
<style>
html body .page {
height: 100%;
width: 100%;
}
video {
width: 800px;
}
.wrapper {
width: 800px;
margin: auto;
}
</style>
</head>
<body>
<div class="page">
<div class="wrapper">
<h1> HLS Web Streaming</h1>
<video controls id="video"></video>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<script>
var video = document.getElementById('video');
var videoSrc = 'http://<Ip of the nginx server>/streaming/master.m3u8';
//var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
// HLS.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using HLS.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
</script>
</html>
Now we're going to use FFMPEG to transmit our video from our Transmitter (the device that has the video) to a Receiver and then play it in a web browser.
Open a terminal on your Transmitter device:
ffmpeg -input_format <format> -i <input_video> -video_size <resolution> -framerate <framerate> -c:v copy <codec> -f mpegts "srt://0.0.0.0:7000?pkt_size=1316&mode=listener"
ffmpeg -re -i srt://<SRT Transmitter IP Address>?pkt_size=1316 -c:v copy -f hls -hls_time 4 -hls_list_size 1 -hls_playlist_type event /dev/shm/streaming/master.m3u8
Now you can play the video, i recommand you to play it on VLC first to test it.
media > open a network stream > paste "http:///streaming/master.m3u8"
Open your browser and go to
http://<IP address of your Nginx server>/streaming
Note: This tutorial will only work on your local network unless you open your router's ports (Be careful with your network's security) (I recommend you to setup a DynDNS as well).
I'll update this tutorial later if something is missing, outdated or incorrect. Do not hesitate to contact me if you want to update this !