Web下無插件播放rtsp視頻流的方案及各家優秀內容資源整理

方案三：用 ffmpeg 把 rtsp 轉成 rtmp 通過 nginx代理出去，其中核心處用到了 nginx 的 nginx-rtmp-module 模塊，在客戶端則使用著名的網頁播放器 jwplayer 來播放 rtmp 流即可，但是 jwplayer 播放器好像是付費的，此方案也是搭建流媒體服務器的通用方案之一。

實現步驟：

四：video-source資源

掘金：clouding：瀏覽器播放rtsp視頻流解決方案
 利用JAVACV解析RTSP流，通過WEBSOCKET將視頻幀傳輸到WEB前端顯示成視頻
 CSDN：zctel：javacv
CSDN：斑馬jio：JavaCV轉封裝rtsp到rtmp（無需轉碼，低資源消耗）
博客園：之乏：流媒體
 Gitee：chengoengvb：RtspWebSocket

方案一：服務器端用 websocket 接受 rtsp ，然後，推送至客戶端

此方案，客戶端因爲直接轉成了mp4，所以H5的video標籤直接可以顯示。

參考地址：https://github.com/Streamedian/html5_rtsp_player

實現步驟：

服務器安裝streamedian服務器
客戶端通過video標籤播放

<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>

方案二：使用 ffmpeg + nginx 把 rtsp 轉成了 hls 協議，客戶端使用 videojs 播放

參考地址：

https://videojs.com/getting-started/

HLS (HTTP Live Streaming) 直播是有蘋果提出的一個基於http的協議。其原理是把整個流切分成一個個的小視頻文件，然後通過一個m3u8的文件列表來管理這些視頻文件。

HTTP Live Streaming 並不是一個真正實時的流媒體系統，這是因爲對應於媒體分段的大小和持續時間有一定潛在的時間延時。在客戶端，至少在一個分段媒體文件被完全下載後才能夠開始播放，而通常要求下載完兩個媒體文件之後纔開始播放以保證不同分段音視頻之間的無縫連接。

此外，在客戶端開始下載之前，必須等待服務器端的編碼器和流分割器至少生成一個TS文件，這也會帶來潛在的時延。

服務器軟件將接收到的流每緩存一定時間後包裝爲一個新的TS文件，然後更新m3u8文件。m3u8文件中只保留最新的幾個片段的索引，以保證觀衆任何時候連接進來都會看到較新的內容，實現近似直播的效果。
這種方式的理論最小延時爲一個ts文件的時長，一般爲2-3個ts文件的時長。

實現步驟

安裝ffmpeg工具
ffmpeg轉碼

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"

ffmpeg 關於hls方面的指令說明：

-hls_time n: 設置每片的長度，默認值爲2。單位爲秒
-hls_list_size n:設置播放列表保存的最多條目，設置爲0會保存有所片信息，默認值爲5
-hls_wrap n:設置多少片之後開始覆蓋，如果設置爲0則不會覆蓋，默認值爲0.這個選項能夠避免在磁盤上存儲過多的片，而且能夠限制寫入磁盤的最多的片的數量
-hls_start_number n:設置播放列表中sequence number的值爲number，默認值爲0

video 播放

<html>
<head>
<title>video</title>
<!-- 引入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>

方案三：用 ffmpeg 把 rtsp 轉成 rtmp 通過 nginx代理出去，其中核心處用到了 nginx 的 nginx-rtmp-module 模塊，在客戶端則使用著名的網頁播放器 jwplayer 來播放 rtmp 流即可，但是 jwplayer 播放器好像是付費的，此方案也是搭建流媒體服務器的通用方案之一。

rtmp是adobe開發的協議，一般使用adobe media server 可以方便的搭建起來；隨着開源時代的到來，有大神開發了nginx的rtmp插件，也可以直接使用nginx實現rtmp
rtmp方式的最大的優點在於低延時，經過測試延時普遍在1-3秒，可以說很實時了；缺點在於它是adobe開發的，rtmp的播放嚴重依賴flash，而由於flash本身的安全，現代瀏覽器大多禁用flash。

實現步驟：

安裝ffmpeg工具
安裝nginx 注意：linux系統需要安裝 nginx-rtmp-module 模塊，Windows系統安裝包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改nginx配置

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;
        }
    }
}

ffmpeg轉碼

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"

video 播放

<html>
<head>
<title>video</title>
<!-- 引入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>

注意：使用谷歌瀏覽器播放時，需要開啓flash允許

四：video-source資源

視頻播放測試服務（spring boot+javacv+websocket）
spring boot+opencv+websocket:https://www.freesion.com/article/2770277090/

Web下無插件播放rtsp視頻流的方案總結_網絡_經驗之外:https://blog.csdn.net/ajrm0925/article/details/91879551?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2

FFmpeg轉封裝rtsp到rtmp（無需轉碼，低資源消耗）_Java_banmajio的博客-CSDN博客:https://blog.csdn.net/weixin_40777510/article/details/103764198?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7

easyCV/pom.xml at master · eguid/easyCV · GitHub:https://github.com/eguid/easyCV/blob/master/pom.xml
javacv rtsp rtmp_Java：https://blog.csdn.net/zb313982521/article/details/88110368

JAVA中通過JavaCV實現跨平臺視頻/圖像處理-調用攝像頭：https://blog.csdn.net/weixin_33881041/article/details/85992437

javacv 通過rtsp 獲取視頻流設置幀率：https://www.cnblogs.com/svenwu/p/9663038.html

javaCV開發詳解之8：轉封裝在rtsp轉rtmp流中的應用（無須轉碼，更低的資源消耗）：https://www.cnblogs.com/eguid/p/10195557.html

RTSP實例解析：https://www.cnblogs.com/qq78292959/archive/2010/08/12/2077039.html

JAVACV集成海康攝像頭RTSP流時出現的丟包與無法解析的問題：https://bbs.csdn.net/topics/392237412?page=1java使用opencv拉取rtsp流：https://blog.csdn.net/sinat_21184471/article/details/93978622

WebSocket插件：https://www.bbsmax.com/A/RnJW3xRRJq/sockjs+stomp的websocket插件

sockjs+stomp的websocket插件：https://www.bbsmax.com/A/pRdBPLN9Jn/

SpringBoot使用Websocket：https://blog.csdn.net/weixin_43835717/article/details/94066791

SpringBoot2.0集成WebSocket，實現後臺向前端推送信息：https://blog.csdn.net/moshowgame/article/details/80275084

【Websoket】實時推送圖像數據，前端實時顯示：https://blog.csdn.net/qq_20038925/article/details/70919307

WebSocket傳輸圖片：https://www.cnblogs.com/jzblogs/p/5613988.html

JavaScript進行WebSocket字節流通訊示例：https://blog.coloc.cc/2018/11/javascriptwebsocket.html

JavaScript進行WebSocket字節流通訊示例：https://www.cnblogs.com/coloc/p/8127268.html

spring boot 使用WebSocket與前端進行byte字節數組交互：https://blog.csdn.net/m0_37992075/article/details/83587624

spring boot集成javacv + websocket實現實時視頻推流回放（延時1-2秒）：https://blog.csdn.net/qq_23945685/article/details/104074262

Web下無插件播放rtsp視頻流的方案及各家優秀內容資源整理

Web下無插件播放rtsp視頻流的方案及各家優秀內容資源整理

方案一：服務器端用 websocket 接受 rtsp ，然後，推送至客戶端

實現步驟：

方案二：使用 ffmpeg + nginx 把 rtsp 轉成了 hls 協議，客戶端使用 videojs 播放

實現步驟

實現步驟：

四：video-source資源

Spring Boot 基礎，理論，簡介

四：SpringBoot-定時任務和異步任務的使用方式

一：Spring Boot 的配置文件 application.properties

二：SpringBoot-配置Log4j2，實現不同環境日誌打印

九：SpringBoot-整合Mybatis框架，集成分頁助手插件

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結