Since the project needs access to video surveillance, I have learned some knowledge about this aspect in advance. Although I found many tutorials through Google, I still had some difficulties in my practice. So here’s a quick note. Since the video surveillance platform may not be able to directly provide video streams of RTMP or HLS protocol, ffMPEG may be used to pull the stream, convert the video stream and then push the stream.

Nginx video module introduction

Nginx-rtmp-module nginx-rtmp-module nginx-rtmp-module How to Install Nginx with RTMP Module on CentOS 7

Test Tool Introduction

  1. OBS: Live streaming software, currently only used to push the video stream to the service to verify the effect;
  2. VLC: play video, this time using RTMP, HLS protocol play, official website address: www.videolan.org;

Introduction to Playback Protocols

Copy the from open.hikvision.com/docs/37e388…

The name of the protocol Detailed introduction
RTSP Real Time Streaming Protocol (RTSP) is a network application Protocol designed for use by entertainment and communication systems to control Streaming media servers. This protocol is used to establish and control media sessions between terminals. The client of the media server issues VCR commands, such as play, record, and pause, to facilitate real-time control of media streaming from the server to the client (video on demand) or from the client to the server (voice recording).
RTMP Real-time Messaging Protocol (RTMP), also known as real-time Messaging Protocol, is a proprietary Protocol originally developed by Macromedia for streaming audio, video, and data between Flash player and a server over the Internet.
HLS HTTP Live Streaming (HLS) is an HTTP – based network transport protocol proposed by Apple.
RTP Real-time Transport Protocol (RTP) is a network Transport Protocol. It was published by the Multimedia Transport Working Group of IETF in RFC 1889 in 1996.

Nginx configuration

rtmp { server { listen 1935; chunk_size 4096; Application myapp {live on; } # HLS application show {live on; hls on; hls_path /data/hls/; Hls_fragment 5s; hls_playlist_length 60; deny play all; } } } http { server { listen 80; server_name localhost; #charset koi8-r; access_log /var/log/nginx/host.access.log main; Stat {rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } # stat. XSL file from nginx-rtmp-module source directory cp to HTML directory location /stat. } location /hls { types { application/vnd.apple.mpegurl m3u8; video/mp2t ts; } root /data; Add_header cache-control no-cache; }}Copy the code

Browser plays the HLS video

Front-end is based on VideoJS implementation of video playback; It seems that versions prior to 7.0 did not support HLS playback, so prior to 7.0 there was another tool: videojs-contrib-hls

demo.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>video</title>
    <link rel="stylesheet" href="https://vjs.zencdn.net/7.0.0/video-js.css">
    <script src="https://vjs.zencdn.net/7.0.0/video.min.js"></script>
</head>
<body>
<video id="test_video" controls preload="none" width="640" height="480"
      class="video-js vjs-big-play-centered vjs-fluid "
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://119.3.193.218/hls/test.m3u8" type='application/vnd.apple.mpegurl' />
</video>
<script type="text/javascript">
    var myPlayer = videojs('test_video'); // ID in the video tag
    myPlayer.ready(function(a){
        myPlayer.play(); 
    });
</script>
</body>
</html>
Copy the code

Some problems encountered during the period

  1. At the beginning of the network tutorial, I configured the HTTP port of HLS as 8080, but the result was that the security group on the server did not open port 8080, which took a long time to check.
  2. It was impossible to play the video with the HTML video tag, and it took a long time to test it before changing to video.js.
  3. demo.htmlIn the test, it was opened as a local file. There was a cross-domain problem, which led to the failure of playing. After uploading to the server, the problem was solved.

Standing on the shoulders of those who came before us

  1. Nginx-rtmp live server setup -OBS recording push stream -VLC video streaming playback
  2. Live broadcast principle and web live combat