Java 监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器 ...

Java 监控直播流rtsp协议转rtmp、hls、httpflv协议返回浏览器

目录

• 需求背景：
  
• 一：了解音视频流协议：
  
• 二：方案一 rtsp 转rtmp
  
  
  
  • 
    
    
    
    • 1、下载nginx + nginx-rtmp-module
      
    • 2、nginx配置文件
      
    • 3、cmd 到nginx根目录启动nginx
      
    • 4、下载ffmpeg安装
      
    • 5、配置ffmpeg环境变量
      
    • 6、测试ffmpeg
      
    • 7、下载VLC播放器
      
    • 8、查摄像头的rtsp协议格式
      
    • 9、执行ffmpeg命令
      
    • 10、测试rtmp是否转换成功
      
    • 11、测试是否成功
      
    • 12、为什么放弃了用rtmp
      
    
    
  
  
• 三：方案二 rtsp转hls
  
  
  
  • 
    
    
    
    • 1、nginx配置：
      
    • 2、执行ffmepg命令
      
    • 3、查看nginx根目录 -> hls -> test.m3u8 是否生成
      
    • 4、m3u8在网页上播放
      
    • 5、认识一下m3u8格式
      
    • 6、为什么放弃了用HLS
      
    
    
  
  
• 四：方案三rtsp 转httpflv(采用)
  
  
  
  • 
    
    
    
    • 1、安装nginx-flv-module
      
    • 2、nginx配置
      
    • 3、做java权限认证
      
    • 4、执行ffmepg命令：
      
    • 4.1 采用java代码去执行ffmepg命令
      
    • 5、测试http-flv链接
      
    • 6、前端使用flv.js播放：
      
    • 7、大功告成
      
    
    
  
  

需求背景：

在做之前的项目的时候有一个对接摄像头实时播放的需求，由于我们摄像头的购买量不是很多，海康威视不给我们提供流媒体云服务器，所以需要我们自己去        一个去满足我们能在浏览器看到监控画面。项目源代码在以前公司没有拷贝就不能复习，最近又在准备面试，所以写了这个博客来复盘和扩展一下，由于我现在没有Liunx，我就用Windows来演示，生产环境还是要使用Liunx，下面这些操作在Liunx也是一样的流程，大家自行百度。
一：了解音视频流协议：

媒体流协议对比 协议HttpFlvRTMPHLSDash全称FLASH VIDEO over HTTPReal Time Message ProtocolHTTP Living Streaming传输方式HTTP长连接TCP长连接HTTP短连接HTTP短连接视频封装格式FLV FLV TAG
TS文件 Mp4
3gp
webm
原理 同RTMP，使用HTTP协议（80端口）
  每个时刻的数据收到后立刻转发
  集合一段时间的数据，生成TS切片文件（三片），并更新m3u8索引
延时 低
1~3秒
  低
1~3秒
  高
5~20秒（依切片情况）
高数据分段连续流连续流切片文件切片文件Html5播放 可通过HTML5解封包播放
（flv.js）
不支持 可通过HTML5解封包播放
（hls.js）
  如果dash文件列表是MP4，
webm文件，可直接播放
其它 需要Flash技术支持，不支持多音频流、多视频流，不便于seek（即拖进度条）
  跨平台支持较差，需要Flash技术支持
  播放时需要多次请求，对于网络质量要求高
二：方案一 rtsp 转rtmp

1、下载nginx + nginx-rtmp-module

nginx：下载地址：http://nginx-win.ecsds.eu/download/
nginx-rtmp-module：nginx 的扩展，安装后支持rtmp协议，下载地址：https://github.com/arut/nginx-rtmp-module

解压nginx-rtmp-module到nginx根目录下，并修改其文件夹名为nginx-rtmp-module（原名为nginx-rtmp-module-master）

2、nginx配置文件

到nginx根目录下的conf目录下复制一份nginx-win.conf 重命名 nginx-win-rtmp.conf

nginx-win-rtmp.conf：

1. #user  nobody;
2. # multiple workers works !
3. worker_processes  2;
5. #error_log  logs/error.log;
6. #error_log  logs/error.log  notice;
7. #error_log  logs/error.log  info;
9. #pid        logs/nginx.pid;
11. events {
12.     worker_connections  8192;
13.     # max value 32768, nginx recycling connections+registry optimization =
14.     #   this.value * 20 = max concurrent connections currently tested with one worker
15.     #   C1000K should be possible depending there is enough ram/cpu power
16.     # multi_accept on;
17. }
19. rtmp {
20.     server {
21.         listen 1935;
22.         chunk_size 4000;
23.                
24.         application live {
25.              live on;
26.              # 播放时进行回调，如果HttpRespone statusCode不等于200会断开
27.                          # on_play http://localhost:8081/auth;
28.         }
29.                
30.                 application hls {
31.                      live on;
32.                      # 开启hls切片
33.              hls on;
34.              # m3u8地址
35.                          hls_path html/hls;
36.                          # 一个切片多少秒
37.                          hls_fragment 8s;
38.                          # on_play http://localhost:8081/auth;
39.                          # on_publish http://localhost:8081/auth;
40.                          # on_done http://localhost:8081/auth;
41.         }
42.     }
43. }
45. http {
46.     #include      /nginx/conf/naxsi_core.rules;
47.     include       mime.types;
48.     default_type  application/octet-stream;
50.     #log_format  main  '$remote_addr:$remote_port - $remote_user [$time_local] "$request" '
51.     #                  '$status $body_bytes_sent "$http_referer" '
52.     #                  '"$http_user_agent" "$http_x_forwarded_for"';
54.     #access_log  logs/access.log  main;
56. #     # loadbalancing PHP
57. #     upstream myLoadBalancer {
58. #         server 127.0.0.1:9001 weight=1 fail_timeout=5;
59. #         server 127.0.0.1:9002 weight=1 fail_timeout=5;
60. #         server 127.0.0.1:9003 weight=1 fail_timeout=5;
61. #         server 127.0.0.1:9004 weight=1 fail_timeout=5;
62. #         server 127.0.0.1:9005 weight=1 fail_timeout=5;
63. #         server 127.0.0.1:9006 weight=1 fail_timeout=5;
64. #         server 127.0.0.1:9007 weight=1 fail_timeout=5;
65. #         server 127.0.0.1:9008 weight=1 fail_timeout=5;
66. #         server 127.0.0.1:9009 weight=1 fail_timeout=5;
67. #         server 127.0.0.1:9010 weight=1 fail_timeout=5;
68. #         least_conn;
69. #     }
71.     sendfile        off;
72.     #tcp_nopush     on;
74.     server_names_hash_bucket_size 128;
76. ## Start: Timeouts ##
77.     client_body_timeout   10;
78.     client_header_timeout 10;
79.     keepalive_timeout     30;
80.     send_timeout          10;
81.     keepalive_requests    10;
82. ## End: Timeouts ##
84.     #gzip  on;
86.     server {
87.         listen       5080;
88.         server_name  localhost;
91.         location /stat {
92.             rtmp_stat all;
93.             rtmp_stat_stylesheet stat.xsl;
94.         }
95.         location /stat.xsl {
96.             root nginx-rtmp-module/;
97.         }
98.         location /control {
99.             rtmp_control all;
100.         }
101.                
102.                 location /hls {
103.             # Serve HLS fragments
104.             types {
105.                 application/vnd.apple.mpegurl m3u8;
106.                 video/mp2t ts;
107.             }
108.             expires -1;
109.             add_header Access-Control-Allow-Origin *;
110.         }
112.         #charset koi8-r;
113.         #access_log  logs/host.access.log  main;
115.         ## Caching Static Files, put before first location
116.         #location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
117.         #    expires 14d;
118.         #    add_header Vary Accept-Encoding;
119.         #}
121. # For Naxsi remove the single # line for learn mode, or the ## lines for full WAF mode
122.         location / {
123.             #include    /nginx/conf/mysite.rules; # see also http block naxsi include line
124.             ##SecRulesEnabled;
125.          ##DeniedUrl "/RequestDenied";
126.          ##CheckRule "$SQL >= 8" BLOCK;
127.          ##CheckRule "$RFI >= 8" BLOCK;
128.          ##CheckRule "$TRAVERSAL >= 4" BLOCK;
129.          ##CheckRule "$XSS >= 8" BLOCK;
130.             root   html;
131.             index  index.html index.htm;
132.         }
134. # For Naxsi remove the ## lines for full WAF mode, redirect location block used by naxsi
135.         ##location /RequestDenied {
136.         ##    return 412;
137.         ##}
139. ## Lua examples !
140. #         location /robots.txt {
141. #           rewrite_by_lua '
142. #             if ngx.var.http_host ~= "localhost" then
143. #               return ngx.exec("/robots_disallow.txt");
144. #             end
145. #           ';
146. #         }
148.         #error_page  404              /404.html;
150.         # redirect server error pages to the static page /50x.html
151.         #
152.         error_page   500 502 503 504  /50x.html;
153.         location = /50x.html {
154.             root   html;
155.         }
157.         # proxy the PHP scripts to Apache listening on 127.0.0.1:80
158.         #
159.         #location ~ \.php$ {
160.         #    proxy_pass   http://127.0.0.1;
161.         #}
163.         # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
164.         #
165.         #location ~ \.php$ {
166.         #    root           html;
167.         #    fastcgi_pass   127.0.0.1:9000; # single backend process
168.         #    fastcgi_pass   myLoadBalancer; # or multiple, see example above
169.         #    fastcgi_index  index.php;
170.         #    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
171.         #    include        fastcgi_params;
172.         #}
174.         # deny access to .htaccess files, if Apache's document root
175.         # concurs with nginx's one
176.         #
177.         #location ~ /\.ht {
178.         #    deny  all;
179.         #}
180.     }
182.     # another virtual host using mix of IP-, name-, and port-based configuration
183.     #
184.     #server {
185.     #    listen       8000;
186.     #    listen       somename:8080;
187.     #    server_name  somename  alias  another.alias;
189.     #    location / {
190.     #        root   html;
191.     #        index  index.html index.htm;
192.     #    }
193.     #}
195.     # HTTPS server
196.     #
197.     #server {
198.     #    listen       443 ssl spdy;
199.     #    server_name  localhost;
201.     #    ssl                  on;
202.     #    ssl_certificate      cert.pem;
203.     #    ssl_certificate_key  cert.key;
204.     #    ssl_session_timeout  5m;
205.     #    ssl_prefer_server_ciphers On;
206.     #    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
207.     #    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;
209.     #    location / {
210.     #        root   html;
211.     #        index  index.html index.htm;
212.     #    }
213.     #}
215. }

复制代码

3、cmd 到nginx根目录启动nginx

1. nginx.exe -c conf\nginx-win-rtmp.conf

复制代码

测试：浏览器输入 http://localhost:5080/stat，看到

代表安装成功
4、下载ffmpeg安装

ffmpeg：一个处理音视频强大的库，我们需要用它来转协议，下载地址：https://www.gyan.dev/ffmpeg/builds/ ，这里可以下载essential和full版本，essential就是简版，只包含ffmpeg.exe、ffplay.exe、
ffprobe.exe， 而full版本就包含了动态库和相关头文件，方便我们在开发中调用。
5、配置ffmpeg环境变量

将ffmpeg解压后里面的bin路径复制到Path里面去
6、测试ffmpeg

cmd ffmpeg -version 命令看到代表成功

7、下载VLC播放器

下载地址：https://www.videolan.org/vlc/

8、查摄像头的rtsp协议格式

我这里截图是海康威视的


现在没有测试的流，我找了个点播的rtsp
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4，用这个代替是一样的
9、执行ffmpeg命令

ffmpeg强大，命令也是复杂，我们cmd 执行

1. ffmpeg -re -rtsp_transport tcp -stimeout 20000000 -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" -buffer_size 1024000 -max_delay 500000 -codec:v libx264 -r 25 -rtbufsize 10M -s 1280x720 -map:v 0 -an -f flv rtmp://127.0.0.1:1935/live/test

复制代码

rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4，是输入源头
rtmp://127.0.0.1:1935/live/test 是输出地址
如果没有报错的话，到现在rtsp就已经转换好了
ffmpeg命令学习：https://www.jianshu.com/p/df3216a52e59 、https://blog.csdn.net/fuhanghang/article/details/123565920
10、测试rtmp是否转换成功

我们打开VLC，媒体->打开网络串流->输入 rtmp://127.0.0.1:1935/live/test-> 播放

11、测试是否成功

等待几秒钟看到有视频播放就是成功了

12、为什么放弃了用rtmp

rtmp的优点是延迟低，效率高，但是在浏览器需要安装flash才能放，也就老版本的浏览器在用，rtmp可能会在别的地方支持，所以还是把他方式方法贴出来了。
三：方案二 rtsp转hls

1、nginx配置：

在前面已经贴出来了，其中这几个是针对hls的


2、执行ffmepg命令

1. ffmpeg -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/hls/test

复制代码

3、查看nginx根目录 -> hls -> test.m3u8 是否生成

生成了代表一切正常

4、m3u8在网页上播放

1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4.     <meta charset="UTF-8">
5.     <title>前端播放m3u8格式视频</title>
6.    
7.     <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
8.    
9.    
10.    
11. </head>
12. <body>
13.     <video id="myVideo"  controls preload="auto" width="1080" height="708" data-setup='{}'>   
14.         <source id="source" src="http://127.0.0.1:5080/hls/test.m3u8"  type="application/x-mpegURL">
15.     </video>
16. </body>
18. </html>

复制代码

source标签的src属性：http://你的nginx ip:nginx http端口/hls/test.m3u8

rtsp转HLS成功！
5、认识一下m3u8格式

m3u8文件里面存储了一个索引，以文本格式打开是这样的

1. #EXTM3U
2. #EXT-X-VERSION:3
3. #EXT-X-MEDIA-SEQUENCE:56
4. #EXT-X-TARGETDURATION:13
5. #EXTINF:10.381,
6. test-56.ts
7. #EXTINF:10.422,
8. test-57.ts
9. #EXTINF:13.453,
10. test-58.ts

复制代码

m3u8文件它不是视频源，源头是ts后缀文件

6、为什么放弃了用HLS

转HLS协议及网页加载过程：
ffmepg收到rtsp的流时候，会等一个切片的时间，一个切片时间到了，切片ts会放到服务器中，同时m3u8文件中加一个索引，对应着新进入的切片。网页在加载m3u8的时候，就是读取m3u8中的的索引去加载ts文件，所以在不断的请求ts，对ts进行解析，不断的和TCP握手，这就是为什么HLS延迟高和对网速的要求高的原因，我们监控肯定是要延迟低的，HLS兼容性好，适合点播。
四：方案三rtsp 转httpflv(采用)

1、安装nginx-flv-module

这个插件需要编译，教程：https://blog.csdn.net/KayChanGEEK/article/details/105095844
我这里已经编译好了，直接下载启动：
https://gitee.com/isyuesen/nginx-flv-file
2、nginx配置

看我git里面的https://gitee.com/isyuesen/nginx-flv-file/blob/master/conf/nginx.conf，和默认的config差别主要是添加了这几个

1. rtmp {  
2.     server {  
3.         listen 1935;
4.         # 流复用的最大块大小
5.         chunk_size 4000;  
6.         application liveapp {
7.             live on;
8.             # 推流开始
9.                         on_publish http://localhost:8081/auth;
10.                         # 推流关闭
11.                         on_publish_done http://localhost:8081/auth;
12.                         # 客户端开始播放
13.                         on_play http://localhost:8081/auth;
14.                         # 客户端结束播放
15.                         on_play_done http://localhost:8081/auth;
16.         }  
17.     }  
18. }

复制代码

1. location /live {
2.     flv_live on;
3.     chunked_transfer_encoding on;
4.     add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
5.     add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
6.     add_header Access-Control-Allow-Headers X-Requested-With;
7.     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
8.     add_header 'Cache-Control' 'no-cache';
9. }

复制代码

3、做java权限认证

nginx rtmp配置中有配置on_publish钩子接口 http://localhost:8081/auth，这个回调HttpResponse stausCode如果不等于200会拒绝I/O，更多回调钩子看：https://github.com/arut/nginx-rtmp-module/wiki/Directives#on_connect

1. @PostMapping("/auth")
2.     public void getVideo(String token, HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws Exception {
3.         if (token.equals("tokenValue")) {
4.             httpServletResponse.setStatus(200);
5.         } else {
6.             // 拒绝服务
7.             httpServletResponse.setStatus(500);
8.         }
9.     }

复制代码

4、执行ffmepg命令：

1. ffmpeg -re  -rtsp_transport tcp -i "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4" -f flv -vcodec h264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 640*360 -q 10 "rtmp://127.0.0.1:1935/liveapp/test"

复制代码

4.1 采用java代码去执行ffmepg命令

依赖 javaCV

1. <dependency>
2.     <groupId>org.bytedeco</groupId>
3.     <artifactId>javacv-platform</artifactId>
4.     <version>1.5.2</version>
5. </dependency>

复制代码

1. public class App {
2.     public static void main( String[] args ) throws IOException, InterruptedException {
3.         String name = "test";
4.         // rtsp地址
5.         String rtspDir = "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4";
6.         // rtmp地址
7.         String rtmpDir = "rtmp://192.168.0.140:1935/liveapp/" + name + "?token=tokenValue";
9.         String ffmpeg = Loader.load(org.bytedeco.ffmpeg.ffmpeg.class);
10.         ProcessBuilder pb = new ProcessBuilder(ffmpeg,
11.                 "-re",
12.                 "-rtsp_transport",
13.                 "tcp",
14.                 "-i",
15.                 rtspDir,
16.                 "-f",
17.                 "flv",
18.                 "-vcodec",
19.                 "h264",
20.                 "-vprofile",
21.                 "baseline",
22.                 "-acodec",
23.                 "aac",
24.                 "-ar",
25.                 "44100",
26.                 "-strict",
27.                 "-2",
28.                 "-ac",
29.                 "1",
30.                 "-f",
31.                 "flv",
32.                 "-s",
33.                 "640*360",
34.                 "-q",
35.                 "10",
36.                 rtmpDir
37.         );
38.         pb.inheritIO().start().waitFor();
39.     }
40. }

复制代码

5、测试http-flv链接

如果你跟着我做的，那链接就是 http://127.0.0.1:18080/live?port=1935&app=liveapp&stream=test&token=tokenValue，在VLC播放器中点击媒体 -> 打开网络串流 -> 输入http://127.0.0.1:18080/live?port=1935&app=liveapp&stream=test&token=tokenValue -> 播放
有视频证明你离成功就差最后一步
6、前端使用flv.js播放：

1. <!doctype html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport"
6.         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
8.   <title>播放http-flv</title>
9. </head>
10. <body>
11. <video id="videoElement"></video>
14. </body>
15. </html>

复制代码

7、大功告成



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！