瀏覽器播放rtsp視頻流解決方案-有解無憂

最近專案中需要實時播放攝像頭rtsp視頻流，于是就專門做了些研究，而瀏覽器不能直接播放，只有通過插件或者轉碼來實作這個需求，

要實作這個目的，可以采用的方案非常得多，有商業的也有開源的，這里主要列舉一些開源的方案，這里的方案都是我嘗試過了的，有些成功，有些沒成功，但是因為每個專案情況不同，這次沒成的方法，換個專案也許就能成，

方案一: html5 + websocket_rtsp_proxy 實作視頻流直播

實作原理

實作步驟

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

<video id="test_video" controls autoplay></video>

<script src="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/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>

注意：測驗時先從官網申請license key，否則socket 只能識別localhost和127.0.0.1

優缺點

優點：實作比較簡單
缺點：收費的，免費版有很多限制

參考鏈接

html5 + websocket_rtsp_proxy 實作視頻流直播
streamedian
html5_rtsp_player

方案二：ffmpeg + nginx + video，rtsp轉rtmp播放

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) 3. 更改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="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/videojs/video-js.min.css" />

</head>
<body>
<video id="test_video"  controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/videojs/video.min.js"></script>
<script type="text/javascript" src="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/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允許

參考鏈接

在 Nginx 中啟用 RTMP 服務
ffmpeg.org
videojs
videojs flash

方案三：ffmpeg + video，rtsp轉hls播放

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="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/videojs/video-js.min.css" />

</head>
<body>
<div >
    <video id="my_video_1"  controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/videojs/video.min.js"></script>
<script type="text/javascript" src="https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/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 hls
videojs
videojs-contrib-hls

方案四：VLC插件播放

播放步驟

下載安裝vlc
瀏覽器播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false'  height="410">
    <param name='mrl' value='rtsp://admin:[email protected]:554/h264/ch1/main/av_stream' />
    <param name='volume' value='https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/50' />
    <param name='autoplay' value='https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/true' />
    <param name='loop' value='https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/false' />
    <param name='fullscreen' value='https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/false' />
    <param name='controls' value='https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/false' />
</object>

優缺點

優點：可以直接播放RTSP，無需任何中介服務器的幫助
缺點：需要手動安裝插件；基于NPAPI，不被最新的 Chrome 和 Firefox 支持
如果你專案的其他功能都能兼容客戶電腦上的 IE 瀏覽器，這個方案就是首選，

參考鏈接

VLC wiki
插件安裝方法

其他方案

WebRTC

WebRTC 是支持網頁瀏覽器進行實時音視頻的一套API，例如：HTML5 通過 webRTC 直接呼叫攝像頭，但是如果要實作遠程視頻流的顯示，則需要將 RTSP 轉換為 WebRTC 流，供 web 端顯示，

參考地址：github.com/lulop-k/kur…

h5stream

參考地址：

github.com/liweilup/h5…
使用H5Stream開發實時監控系統
H5Stream入門級應用，播放RTSP流視頻

GB28181

參考地址：

LiveGBS GB28181流媒體服務
github

寫的不清楚的地方，請自行百度，網上案例很多，有什么建議可以隨時提出來交流！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463539.html

標籤：其他

上一篇：小程式不支持TextDecoder

下一篇：淺談前端性能優化