A recent project required real-time playback of camera RTSP video streams, so we specifically did some research. The browser cannot play directly, only through plug-ins or transcoding to achieve this requirement.

There are a wide range of solutions available for this purpose, both commercial and open source. Here are some of the open source solutions. Here are all the solutions I’ve tried, some of them worked, some of them didn’t. But because each project is different, what didn’t work this time might work in another project.

Solution 1: HTML5 + Websocket_rtSP_proxy to achieve live video streaming

Realize the principle of

Implementation steps

Server Install the Streamedian server
The client uses the video label to play


<video id="test_video" controls autoplay></video>

<script src="Free player. 1.8.4. Js." "></script>
<script>

    if (window.Streamedian) {
        var errHandler = function(err){
            console.log('err', err.message);
        };

        var infHandler = function(inf) {
            console.log('info', inf)
        };

        var playerOptions = {
            socket: "ws://localhost:8088/ws/".redirectNativeMediaErrors : true.bufferDuration: 30.errorHandler: errHandler,
            infoHandler: infHandler
        };

        var html5Player  = document.getElementById("test_video");
        html5Player.src = "RTSP: / / 184.72.239.149 / vod/mp4: / / BigBuckBunny_175k. Mov." ";

        var player = Streamedian.player('test_video', playerOptions);

        
        window.onbeforeunload = function(){
            player && player.destroy();
            player = null;
            Request = null; }}</script>
Copy the code

Note: Apply for a license key from the official website. Otherwise, the socket can only identify localhost and 127.0.0.1

The advantages and disadvantages

Advantages: Relatively simple implementation
Cons: Paid, free version has many restrictions

Refer to the link

Html5 + Websocket_rtSP_proxy implements live video streaming
streamedian
html5_rtsp_player

Scheme 2: FFmPEG + nginx + video, RTSP to RTMP playback

RTMP is a protocol developed by Adobe. It can be easily built using Adobe Media Server. With the advent of the open source era, some big god developed nginx RTMP plug-in, also can directly use nginx to implement RTMP

The biggest advantage of RTMP mode is the low delay. After testing, the delay is generally 1-3 seconds, which can be said to be very real-time. The downside is that it was developed by Adobe, and RTMP relies heavily on Flash for playback, which is largely disabled in modern browsers due to its security

Implementation steps

Install the FFMPEG tool
Install nginx

Nginx-rtmp-module must be installed on Linux, and rtMP-module must be installed on Windows (nginx 1.7.11.3 Gryphon) Change the nginx configuration

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off; }}}Copy the code

Ffmpeg transcoding

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"
Copy the code

Video playback

<html>
<head>
<title>video</title>
<! -- Add CSS -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='RTMP: / / 127.0.0.1:1935 / HLS/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<! Js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('test_video', {"autoplay":true});
    player.play();
</script>
Copy the code

Note: When using Google Chrome to play, you need to enable Flash

Refer to the link

Enable the RTMP service in Nginx
ffmpeg.org
videojs
videojs flash

Scheme 3: FFMPEG + video, transfer from RTSP to HLS

HLS (HTTP Live Streaming) is a PROTOCOL based on HTTP proposed by Apple. The idea is to slice the stream into small video files, which are then managed through a m3U8 file list

HTTP Live Streaming is not a true real-time Streaming system due to potential time delays corresponding to the size and duration of media segments. On the client, at least one segment media file can not be played until it is completely downloaded, and it is usually required to download two media files before playing to ensure seamless connection between audio and video in different segments.

In addition, the encoder and stream splitter on the server must wait for at least one TS file to be generated before the client can start downloading, which also introduces potential latency.

The server software wraps the received stream into a new TS file every cached time, and then updates the M3U8 file. In the m3U8 file, only the indexes of the latest clips are kept, so as to ensure that the audience can see the new content whenever they connect to it, and realize the effect similar to live broadcast.

The theoretical minimum delay of this method is the length of one TS file, generally 2-3 TS files.

Implementation steps

Install the FFMPEG tool
Ffmpeg transcoding

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"
Copy the code

Ffmpeg instructions on HLS

-hls_time n: set the length of each slice. The default value is 2. The unit is in seconds
-hls_list_size n: sets the maximum number of items to be saved in the playlist. If the value is set to 0, pieces of information will be saved. The default value is 5
-hls_wrap n: indicates the number of slices to be covered. If the value is set to 0, it will not be covered. The default value is 0. This option avoids storing too many slices on disk and limits the maximum number of slices that can be written to disk
-hls_start_number n: set the sequence number value in the playlist to number. The default value is 0

Video playback

<html>
<head>
<title>video</title>
<! -- Add CSS -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script>
videojs.options.flash.swf = "./videojs/video-js.swf"
    var player = videojs('my_video_1', {"autoplay":true});
    player.play();
</script>
Copy the code

Refer to the link

ffmpeg hls
videojs
videojs-contrib-hls

Scheme 4: VLC plug-in playback

Play the steps

Download and install VLC
Browser Playback


<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value="RTSP: / / admin: 12345 @192.168.10.235:554 / h264 / ch1 / main/av_stream ' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>
Copy the code

The advantages and disadvantages

Advantages: RTSP can be played directly without the help of any mediation server
Disadvantages: Plug-ins need to be manually installed; NPAPI based, not supported by the latest Chrome and Firefox
If all other features of your project are compatible with Internet Explorer on the client’s computer, this is the best solution.

Refer to the link

VLC wiki
Plug-in Installation Method

Other options

WebRTC

WebRTC is a set of APIS that supports web browsers to conduct real-time audio and video. For example, HTML5 directly calls the camera through WebRTC. However, if remote video stream is to be displayed, RTSP needs to be converted into WebRTC stream for display on the Web.

Reference address: github.com/lulop-k/kur…

h5stream

Reference Address:

Github.com/liweilup/h5…
Use H5Stream to develop real-time monitoring system
H5Stream Entry-level application, playing RTSP streaming videos

GB28181

Reference Address:

LiveGBS GB28181 streaming media service
github

Write the place that is not clear, please oneself baidu, online case is very much, what suggestion can put forward to communicate at any time!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Browser playback RTSP video streaming solution

Solution 1: HTML5 + Websocket_rtSP_proxy to achieve live video streaming

Scheme 2: FFmPEG + nginx + video, RTSP to RTMP playback

Scheme 3: FFMPEG + video, transfer from RTSP to HLS

Scheme 4: VLC plug-in playback

Other options

WebRTC

h5stream

GB28181

Browser playback RTSP video streaming solution

Solution 1: HTML5 + Websocket_rtSP_proxy to achieve live video streaming

Scheme 2: FFmPEG + nginx + video, RTSP to RTMP playback

Scheme 3: FFMPEG + video, transfer from RTSP to HLS

Scheme 4: VLC plug-in playback

Other options

WebRTC

h5stream

GB28181

Related Posts

Iconfont usage guide in the project

Understanding of JS callback and promise,async/await

Front-end visualization