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

来源:https://www.cnblogs.com/Suk-Lees/archive/2022/04/24/16187045.html
-Advertisement-
Play Games

最近項目中需要實時播放攝像頭rtsp視頻流，於是就專門做了些研究。而瀏覽器不能直接播放，只有通過插件或者轉碼來實現這個需求。 要實現這個目的，可以採用的方案非常得多，有商業的也有開源的，這裡主要列舉一些開源的方案。這裡的方案都是我嘗試過了的，有些成功，有些沒成功。但是因為每個項目情況不同，這次沒成的 ...


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

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

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

實現原理 img

實現步驟

  1. 伺服器安裝streamedian伺服器
  2. 客戶端通過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

優缺點

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

參考鏈接

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

rtmp是adobe開發的協議，一般使用adobe media server 可以方便的搭建起來；隨著開源時代的到來，有大神開發了nginx的rtmp插件，也可以直接使用nginx實現rtmp

rtmp方式的最大的優點在於低延時，經過測試延時普遍在1-3秒，可以說很實時了；缺點在於它是adobe開發的，rtmp的播放嚴重依賴flash，而由於flash本身的安全，現代瀏覽器大多禁用flash

實現步驟

  1. 安裝ffmpeg工具
  2. 安裝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;
        }
    }
}
  1. 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"
  1. 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允許

參考鏈接

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

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

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

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

伺服器軟體將接收到的流每緩存一定時間後包裝為一個新的TS文件，然後更新m3u8文件。m3u8文件中只保留最新的幾個片段的索引，以保證觀眾任何時候連接進來都會看到較新的內容，實現近似直播的效果。

這種方式的理論最小延時為一個ts文件的時長，一般為2-3個ts文件的時長。

實現步驟

  1. 安裝ffmpeg工具
  2. 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
  1. 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>

參考鏈接

方案四：VLC插件播放

播放步驟

  1. 下載安裝vlc
  2. 瀏覽器播放
<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:[email protected]: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 端顯示。

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

h5stream

參考地址：

GB28181

參考地址：

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 生產環境安裝Prometheus+Grafana
    安裝Prometheus wget https://github.com/prometheus/prometheus/releases/download/v2.34.0/prometheus-2.34.0.linux-amd64.tar.gz tar -zxvf prometheus-2.34.0. ...
  • MicroPython 之 PYBoard
    一、MicroPython 簡介 Python，是一種面向對象的解釋型電腦程式設計語言，它是純粹的自由軟體，源代碼和解釋器CPython遵循GPL（GNU General Public License）協議。Python的設計目標之一是讓代碼具備高度的可閱讀性。它設計時儘量使用其它語言經常使用的標 ...
  • MySQL備份遷移之mydumper
    簡介 mydumper 是一款開源的 MySQL 邏輯備份工具，主要由 C 語言編寫。與 MySQL 自帶的 mysqldump 類似，但是 mydumper 更快更高效。 mydumper 的一些優點特性： 輕量級C語言開發 支持多線程備份數據，備份後按表生成多個備份文件 支持事務性和非事務性表一 ...
  • 各公司用戶畫像技術案例分享
    分享嘉賓：姚凱飛 Club Factory 推薦演算法負責人 編輯整理：作者授權發佈 出品平臺：DataFunTalk 導讀： 關於用戶畫像的技術分享，分享給有需要的小伙伴，這裡給的部分案例並非本人的作品，而是來自於其它優秀的公司和前輩，大部分來自於他們的技術分享及網路圖片，如果不妥歡迎批評指正。 - ...
  • RxJava + Retrofit源碼解析
    RxJava + Retrofit怎麼請求網路，具體的用法這裡就不講了，本文只講一些重點源碼。 版本如下： okhttp : "com.squareup.okhttp3:okhttp:3.10.0", okhttp3_integration : "com.github.bumptech.glide: ...
  • OpenHarmony 3.1 Beta版本關鍵特性解析——ArkUI容器類API介紹
    本期，我們將為大家介紹 ArkUI 開發框架中容器類的各種類型以及相關 API 的使用。 ...
  • HMS Core電商解決方案之商品3D商品展示
    傳統電商商品展示採用圖文結合的形式，文案介紹產品的相關參數，搭配精美圖片去吸引客戶眼球。但圖文商品展示由於色差、尺寸不符等原因，會讓消費者產生圖片和實物不一致的疑慮，且消費者需要消耗大量精力閱讀和比較後才能做出購買決定。 隨著互聯網電商平臺的不斷完善，短視頻逐漸成為商品展示的主流形式。通過拍短視頻的 ...
  • 淺談前端性能優化
    前端性能優化主要分兩塊： 一是資源載入 1.多使用記憶體、緩存和其他方法 2.減少CPU計算量，減少網路載入耗時。 以上適用所有編程的性能優化-空間換時間 3.減少資源體積：壓縮代碼，圖片精靈 4.減少訪問次數：合併代碼（js模塊化，最後打包成一個JS）、SSR伺服器端渲染，緩存 5.使用更快的CDN ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類