實現瀏覽器播放rtsp視頻流的解決方案

同學問道：需要實時播放攝像頭rtsp視頻流，而瀏覽器不能直接播放，怎樣解決？

實現這個需求可以通過插件或者轉碼來實現。

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

C++音視頻開發學習資料：點擊莬費領取→音視頻開發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

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

實現原理

實現步驟

服務器安裝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>

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

優缺點

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

C++音視頻開發學習資料：點擊莬費領取→音視頻開發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案二：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)
更改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;
        }
    }
}

4.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"

5.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允許

C++音視頻開發學習資料：點擊莬費領取→音視頻開發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案三：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

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

C++音視頻開發學習資料：點擊莬費領取→音視頻開發（資料文檔+視頻教程+面試題）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

方案四：VLC插件播放

播放步驟

下載安裝vlc
瀏覽器播放


<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

優缺點

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

其他方案

WebRTC

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

h5stream

GB28181

jsmpeg.js + ffmpeg + websocket + node

如果你對音視頻開發感興趣，或者對本文的一些闡述有自己的看法，可以在下方的留言框，一起探討。

TML+PHP超大視頻上傳實例，PHP批量上傳大文件技巧,PHP批量上傳大文件,PHP實現批量上傳圖片的技巧，PHP結合WEB UPLOADER插件實現分段，PHP結合WEB UPLOADER插件實現切片上傳，PHP結合WEB UPLOADER插件實現斷點續傳，PHP結合WEB UPLOADER插件實現大文件上傳，PHP結合UPLOADER插件實現分片上傳文件，PHP結合百度UPLOADER插件實現分片上傳文件，PHP結合WEB UPLOADER插件實現分片上傳文件，前端HTML5，JS,JQ，VUE2，VUE3，React，

前端的話都有可能用到，VUE2，VUE3，HTML5，也不一定是VUE，公司內部有自己的產品，有些產品是之前開發的，沒有用VUE，而是用的普通的HTML模板，用的也還好。

后端PHP5,PHP6,PHP7,PHP8，ThinkPHP，

客戶是武漢這邊的一家企業。

webuploader的組件公司研發部的同事也調研過，研究過他的實現，實際上他就是對Flash和HTML5進行了一個封裝，本質還是調的HTML5的API，兼容性不是特別好。可擴展性也比較差，可維護性就更不用說了，之前公司項目遇到過坑，到現在連webuploader開發人員都聯系不上。想找他們尋求一點技術支持的幫助，真的是想都不要想。公司這一塊也愿意付費，就是付費尋求的技術支持，也不行。這一點真的讓哥幾個給整郁悶了。領導也不太滿意，所以還是找有技術支持的產品。研發部的同事稱這些項目是免費坑人項目。

服務器支持Linux，Windows,macOS,CentOS,中標麒麟，銀河麒麟，統信，龍芯，華為鯤鵬，

數據庫支持MySQL，達夢數據庫，人大金倉

需要提供前端源碼，后端源碼，控件源碼

需要提供7*24小時技術支持，長期技術支持，長期維護服務

需要提供手機，QQ，微信，企業微信，電子郵箱等聯系方式

需要支持包含IE在內的全部瀏覽器

終端需要支持Windows,macOS,Linux,信創國產化環境，中標麒麟，銀河麒麟，統信UOS，龍芯，華為

功能需要支持10G，50G,100G大文件上傳和斷點續傳，刷新續傳，重啟續傳

支持超大文件分片，分段，分塊，分割上傳下載，斷點續傳

支持文件夾上傳，下載斷點續傳，支持文件夾層級結構，層級結構信息保存到數據庫，下載的時候同樣保留層級結構

支持加密上傳，下載加密，端到端加密，國密SM4加密算法，數據加密傳輸，傳輸過程中要保證數據是加密的。

版本：6.5.40

代碼：https://gitee.com/xproer/up6-php/tree/6.5.40/

安裝環境

PHP:7.2.14

調整塊大小

NOSQL

NOSQL不需要任何配置，可以直接訪問測試

SQL

創建數據庫

您可以直接復制腳本進行創建

配置數據庫連接

6.安裝依賴

訪問頁面進行測試

數據表中的數據

相關參考：

文件保存位置

php5教程，

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a
控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

TML+VUE超大視頻上傳解決方案

最近項目有個需求，需要在網頁前端實現大文件，文件夾的上傳和下載，需要支持斷點續傳，MD5校驗，文件秒傳，加密傳輸(國密SM4)，加密存儲，壓縮傳輸(zip,gzip)功能，前端框架使用VUE，后端用的是JAVA SpringBoot

這個是政府項目，現在國家因為信息安全的原因，所有政府項目都必須支持信創國產化環境：國產操作系統，國產數據庫，國產瀏覽器

網上搜了很多文章，基本上的方案都是vue+html5，或百度webuploader，我們之前也是采用的這個方案，穩定性比較差，傳上去的文件數據容易出錯，然后斷點續傳功能不夠完善，用戶傳大文件的時候瀏覽器響應卡頓容易崩潰，用戶傳文件的時候不能刷新頁面，也不能關閉頁面，否則文件進度將會丟失。這個對于現在的客戶來說有點難以接受，因為用戶傳的文件比較大，1G到10G都有，可能一次傳不完，傳一半，第二天再傳。

找了幾個月，只發現一個產品比較不錯：澤優大文件上傳控件（up6），不僅提供了產品源碼，視頻教程，開發部這邊集成很快，基本上沒花什么時間，直接把他的代碼復制到項目中就完事了。

我們的需求實際上很簡單，第一就是希望使用簡單，不管是對開發人員，還是對最終用戶都要使用簡單。對開發人員來說要集成和整合簡單，能夠提供前端和后端 API，前端API使用和調用要方便。

對于普通用戶，要使用簡單學習成本低。基本上用戶一看就會使用，不需要進行使用培訓。如果是插件的話需要提供好的安裝引導，用戶直接下一步下一步就完事。

第二點就是穩定可靠，用戶是政府用戶，對穩定性要求比較高。不僅體現在產品本身的穩定性，還體現在對第三方應用的兼容性，要兼容各種操作系統，比如國產操作系統，國產瀏覽器，國產數據庫。

第三點就是能夠提供技術支持，因為是政府客戶，必須要有技術支持，這個是硬指標，因為項目周期也比較長，中途可能會變更需求或者定制開發，所以廠商必須提供技術服務。

除了這些還有一點就是下載功能需要也支持斷點續傳。用戶平時會從系統中下載很多文件，文件有大有小，大的1G，小的幾KB，但是用戶是批量下載，不是打包成ZIP下載。

上面幾點能夠滿足的話基本上就沒有什么問題，要求能夠提供控件源代碼的采購，因為我們做政府項目，有些政府大客戶要求源代碼審查，我們公司自已也有產品，領導希望能夠集成在我們的產品中，這樣就能夠為所有用戶提供這個功能，用戶體驗也能夠統一，我們維護起來也方便。

示例下載：

在線咨詢

上一篇：HTML添加背景音樂(embed、audio)
下一篇：JSP include指令

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

實現瀏覽器播放rtsp視頻流的解決方案

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

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

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

方案四：VLC插件播放

其他方案

WebRTC

h5stream

GB28181

jsmpeg.js + ffmpeg + websocket + node

您的項目需求