参考文章：https://blog.csdn.net/wenqiangluyao/article/details/98594861
注释：做下面操作的时候，你得确定你的Rtsp地址是可用的，是可以在Vlc播放器里面正常使用
我这里想要做的东西就是把海康摄像头画面放在H5上展示出来，找到几个小方案，如下：
Springboot+ WebSocket + FFmpeg + jsmpeg
案例地址：点击跳转
启动准备：这是一个普通的Springboot项目，启动需要先修改ConvertVideoPakcet.java里面的Rtsp地址，并且把FFmpeg 配置到环境变量里面，或者修改代码使用绝对路径也可以。
实现流程：项目启动后，FFmpeg 就开始推流到http://127.0.0.1:8081/rtsp/receive地址，该地址接受到流之后，就去WebSocket 里面看有没有用户连接上来，如果有用户连接上来，就把这个流发送给用户。
测试：这个时候我们在浏览器输入播放地址：http://localhost:8081/index.html，打开F12调试，可以看见与WebSocket 建立连接，等待WebSocket 发送流过来。
测试结果：我试了几个Rtsp地址，感觉一两秒有一点点卡顿，卡顿不是太明显
Nodejs + FFmpeg + Flv.js + FFmpeg
案例地址：点击跳转
说明：实现流程和怎么启动啥的这哥们都已经写好了，按照他说的做就行了
Java + Nginx-http-flv-module + FFmpeg + Flv.js（我采用的）
参考地址：点击跳转
启动准备：
1、带Nginx-http-flv-module模块并且编译好的Nginx(点击下载),修改 conf/nginx.conf，在server里面增加：
1 location /rtmpLive { 2 flv_live on; 3 chunked_transfer_encoding on; #open 'Transfer-Encoding: chunked' response 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 }2、FFmpeg(最好配置到环境变量里面 ，不然就把下面推荐Java文件中的FFmpeg地址写全)
3、推流Java文件
1 import java.io.BufferedReader; 2 import java.io.InputStreamReader; 3 4 public class RtspPlayDemo{ 5 6 public static void main(String[] args){ 7 RtspPlayDemo convertVideoPakcet = new RtspPlayDemo(); 8 9 // rtsp地址 10 String rtspUrl = ""; 11 // Nginx rtmp地址 12 // 1935 对应Nginx配置文件中rtmp所监听的端口 13 // live 对应Nginx配置文件中rtmp下application的值 14 // rtmpStream 对应播放页面中16行参数stream的值 15 String nginxRtmpUrl = "rtmp://localhost:1935/live/rtmpStream"; 16 17 convertVideoPakcet.pushVideoAsRTSP(rtspUrl, nginxRtmpUrl); 18 } 19 20 public Integer pushVideoAsRTSP(String rtspUrl, String nginxRtmpUrl){ 21 int flag = -1; 22 try { 23 // ffmpeg 已经在系统环境变量中配置好了 24 String command = "ffmpeg "; 25 command += " -i "" + rtspUrl + """; 26 command += " -vcodec copy -acodec copy -f flv -s 800x600 " + nginxRtmpUrl; 27 System.out.println("ffmpeg推流命令：" + command); 28 29 Process process = Runtime.getRuntime().exec(command); 30 BufferedReader br= new BufferedReader(new InputStreamReader(process.getErrorStream())); 31 String line = ""; 32 while ((line = br.readLine()) != null) { 33 System.out.println("视频推流信息[" + line + "]"); 34 } 35 flag = process.waitFor(); 36 }catch (Exception e){ 37 e.printStackTrace(); 38 } 39 return flag; 40 } 41 }4、播放页面
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>播放页面</title> 5 </head> 6 <body> 7 <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script> 8 <video style="height: 400px; 600px;" id="videoElement" muted autoplay controls></video> 9 <script> 10 var flvPlayer = null; 11 if (flvjs.isSupported()) { 12 var videoElement = document.getElementById('videoElement'); 13 flvPlayer = flvjs.createPlayer({ 14 type: 'flv', 15 // 8080 对应Nginx监听的端口 16 // rtmpLive 对应Nginx的路径 17 url: 'http://localhost:8080/rtmpLive?app=live&stream=rtmpStream' 18 }); 19 flvPlayer.attachMediaElement(videoElement); 20 flvPlayer.load(); 21 } 22 </script> 23 </body> 24 </html>启动Nginx-->启动Java推流-->打开播放页面即可看见效果
测试结果：我试了几个Rtsp地址，没有明显卡顿