參考文章：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;width: 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地址，沒有明顯卡頓