Tejasvi Shinde

Posted on Jan 22, 2021

RTSP stream to Web Browser using FFMPEG

#javascript #node

If you need to stream your video from the webcam to your browser webpage.
To achieve this I have tried a few different ways but none of them is as good as converting RTSP to HLS and then pass to Browser.

We will follow the below steps

RTSP stream
Understanding FFMPEG
Converting RTSP TO HLS
Passing HLS to a web browser

1.RTSP Stream

What is RTSP?
RTSP, also known as Real-Time Streaming Protocol, is a lesser-known protocol for streaming video online. This protocol was designed to control the streaming servers used in entertainment and communications systems.

When the RTSP controls the server to client connection, video-on-demand streams are used; when it controls the client to server connection, RTSP utilizes voice recording streams.

RTSP commonly is used for Internet Protocol (IP) camera streaming, such as those coming from CCTV or IP cameras.
Rather than forcing your viewers to download an entire video before watching it, the RTSP stream allows them to watch your content before the download is complete.

You cannot directly stream RTSP over HTTP. Because of this, there is no easy, straightforward way to stream RTSP in a web browser, as RTSP is designed more for streaming video on private networks such as security systems within a business. However, you can stream RTSP using additional software that’s embedded onto your website.
Furthermore, to achieve this I have used FFMPEG

2. Understanding FFMPEG

FFmpeg is a command-line tool that converts audio or video formats. It can also capture and encode in real-time from various hardware and software sources such as a TV capture card.
Basically, it is a wrapper that converts RTSP to HLS.
(HLS stands for HTTP Live Streaming. In short, HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet and supported by the web browser)

Check this FFMPEG for more information

3. Converting RTSP TO HLS

To Achieve this we have to use FFMPEG commands.
Basically from node, I will run bash file which has those commands this will run in the background and when it receives RTSP stream It parallelly changes them to HLS.

4. Passing HLS to a web browser

we are almost done because passing HLS to a web browser is easy.

I hope you guys got a basic idea about this conversion.

Remember to run this we need a server to run in the background it can be simple HTTP-SERVER or NGX-SERVER.

Code Implementation

Index.html



<!DOCTYPE html>
<html>
<head>
  <title>Live Cam</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<body>
  <!-- Use this if you only support Safari!!
    <div id="player">
        <video id="video" autoplay="true" controls="controls">
            <source src="http://192.1xx.x.1xx:8080/playlist.m3u8" />
            Your browser does not support HTML5 streaming!
        </video>
    </div>
-->
  <video id="video" autoplay="true" controls="controls" type='application/x-mpegURL'></video>
  <script>
    if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      // bind them together
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
        hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        });
      });
    }
  </script>
</body>
</html>

In code you can see I have added the HLS CDN link you can use NPM Package too.
You can see in this line code hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");

My HTTP-SERVER is running on http://192.1xx.x.1xx:8080 and /playlist.m3u8 I will come to this.

setup-ffmpeg.sh



#!/bin/bash
VIDSOURCE="rtsp://192.1xx.x.xxx:5554"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS playlist.m3u8

In the bash file, I have provided VIDSOURCE="rtsp://192.1xx.x.xxx:5554" RTSP link.
You can see it at the end playlist.m3u8. This will create a file playlist.m3u8 and start dumping stream one after another so at the end we will refer to this file.

When you run the bash file you can see the changes in your folder like this

FFMPEG provides a lot of useful commands. You can try a different set of commands and use them as per your requirements.

Top comments (9)

mac_4 • Aug 5 '21 • Edited

Hey! Hello how to timestamp the output files with linux date comand,

If possible in ns resolution, something like date "+%Y%m%d-%H%M%S%N"

Or may be the other way round, What are my options to relate video with another signal from another source.

Any info is appreciated.

Tejasvi Shinde • Aug 25 '21 • Edited

Hey, try this command to generate timestamp

ffmpeg -i test.mp4 -vf \ "drawtext=fontfile=arialbd.ttf:text='%{pts\:gmtime\:0\:%H\\\:%M\\\:%S}'" test.avi

This produces a stamp in the HH:MM:SS format; you can change it to whatever you'd like, using
strftime

K. Mahesh Kumar • Apr 18 '23 • Edited

I just want to display my cams in my PHP page, on selection of particular camera, i want to show only the live view, but how can i send the rtsp url to .sh file dynamically

My rtsp URL looks like this

rtsp://admin:mypassword@172.17.0.30:554/cam/realmonitor?channel=1&subtype=0

i want to make it as dynamic selector, can you please help me on this

jayeshhhh • Jan 24 '22 • Edited

Hello,
Can I run multiple rtsp stream at a time?

Suppose I have two media stream

Now, I want to run both stream in same time with different-different browser. But write now output is coming common stream in both browser and "I want to get output is different stream with different browser at a time"

How can we manage multiple stream!

Thank you in advance