RTSP to HTTP
From:     https://www.thewebblinders.in/programming/article/rtsp-streaming-on-a-web-browser-6069


Intro 1 Installing Ffmpeg 2 Ffmpeg Cnvrt RTSP HLS 3 Streaming to a Browser
More Pgmmng 



RTSP to HLS - HTML5 Video streaming

Most IP Cameras use RTSP and you can view the stream by using some media
player like VLC

So what about accessing the RTSP stream from a web browser ?

The problem is, there is no native support in browsers for RTSP streams ,
But there is a workaround for this.

It is to re-stream RTSP to HLS (HTTP Live Streaming) using ffmpeg and then
using video.js and its hls plugin in the browser to view the stream, which
will be explained in this article



1. INSTALLING FFMPEG

First we have to install ffmpeg in our system , follow the instructions on
the official website , to know how to install it for your Operating System.

In this article, I will be using a Linux system
sudo add-apt-repository ppa:kirillshkrogalev/ffmpeg-next
sudo apt-get update                           
sudo apt-get install ffmpeg




2. USING FFMPEG TO CONVERT RTSP TO HLS

You will run the following shell command differently based on your os , this
is for linux systems.
ffmpeg -v info
-i rtsp://input
-c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p
-flags -global_header
-hls_time 10 -hls_list_size 6 -hls_wrap 10
-start_number 1 path/to/output/file_name.m3u8

rtsp://input is the complete RTSP url

path/to/output/file_name.m3u8 is where ffmpeg puts the HLS stream

FOR EXAMPLE :
ffmpeg -v info
-i rtsp://your_rtsp_ip:port/path/to/file.stream
-c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p
-flags -global_header
-hls_time 10 -hls_list_size 6 -hls_wrap 10
-start_number 1 /var/www/html/video.m3u8




3. STREAMING HLS ON A BROWSER

Now we use video.js and its hls plugin to view the live stream. For example
, you can create following html document and serve it , to see the live rtsp
streaming.

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>RTSP STREAMING TEST</title>

    <link href="https://vjs.zencdn.net/7.2.3/video-js.css"
rel="stylesheet">

</head>

<body>

    <video id='hls-example' class="video-js vjs-default-skin" width="400"
height="300" controls>
        <source type="application/x-mpegURL" src="ht
tp://localhost/video.m3u8">

        <!--
<source type="application/x-mpegURL" src="http://ip-
address/path/to/ouput/file-name.m3u8">
-->

    </video>

    <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs
-ie8.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib
-hls/5.14.1/videojs-contrib-hls.js"></script>
    <script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

    <script>
        var player = videojs('hls-example');
        player.play();
    </script>

</body>
</html>





More Programming from our blog