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.m3u8rtsp://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.m3u83. 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="http://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>ALTERNATE TITLES