vue中播放rtsp流

2023-4-4 前端達人

實現vue中播放rtsp視頻流的問題

實現vue中播放rtsp視頻流的問題

實現vue中播放rtsp視頻流的問題

背景：項目中通過攝像機提供的rtsp流來顯示畫面，但是在編寫項目中，需要將rtsp實時流畫面傳輸到web前端頁面中。于是找了很多方法，都是后臺轉碼轉成rtmp來播放，現在大部分插件和瀏覽器都是支持使用rtmp播放視頻流。而rtsp隨著flash的退出而被復雜化了。網上都是1、通過ffmpeg轉碼后輸出，2、通過攝像機指定的web插件轉碼輔助播放，如海康，大華攝像機；3、還有個猿大師播放器基于猿大師中間件提供的內嵌網頁播放（沒用過，不知道行不行，原本想用現在這個方法行不行的，若不行就用這個猿大師了的）

開始

node.js工具

jsmpeg.js文件

npm install rtsp2web

科普了解一下

rtsp2web 是一個依賴 ffmpeg，能實時將傳入的 rtsp 視頻流轉碼成圖像數據并通過 ws 推送到前端的智能工具。
前端頁面借助 jsmpeg.js 就可以很輕松的實現播放
同時rtsp2web的特點還有：1、并發，支持同時播放多路視頻2、合并同源，同時播放多個同一個rtsp視頻源時，只會創建一個轉碼推流進程，不會創建多個。3、智能釋放資源，智能檢測當前沒有使用的轉碼推流進程，將其關閉，并釋放電腦資源。

使用

下載ffmpeg（鏈接: https://www.ffmpeg.org/download.html#build-windows）

安裝成功以后，你重新打開一個命令行終端，輸入：ffmpeg -h，如果能輸出 ffmpeg 的相關信息出來，則證明你的電腦安裝 ffmpeg 成功。

使用rtsp2web

創建了一個vuecli（vue2）項目，名稱不要起rtsp2web，與src文件夾同級
下創建一個serve文件夾

-|public
    |-favicon.ico
    |-index.html
-|src
-|serve
-|.gittignore
-.....  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

在serve下初始化和下載

npm init --yes
npm install rtsp2web  


    
        1
    

    
        2

在serve下創建index.js

//index.js
const RTSP2web = require('rtsp2web')

//服務端的端口號，端口號可以自定義
const port = 8033
new RTSP2web({
    port
)}  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

運行命令：node index.js

前端代碼

在public的index.html中
其中jsmpeg.min.js通過src引入，可以用jsmpeg.js或者jsmpeg.min.js都行

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--v  jsmpeg.min.js文件用在這   v-->
    <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    var rtsp = 'rtsp://username:password@ip:port/live'
    window.onload = () => {
    //這里的port要與index.js的port保持一致
    new JSMpeg.Player("ws://localhost:8033/rtsp?url="+btoa(rtsp), {
       canvas: document.getElementById("canvas")
    })
  }
  </script>
</html>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29

#####在vue頁面中用canvas中播放視頻
如在App.vue中這樣用：

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
  </div>
</template>  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

問題

為什么node index.js之后沒反應？
—檢查端口號是否填寫對應，index.js中的端口要與script里的端口保持一致
|
為什么長時間未顯示圖像？
—需要等待大概1-2分鐘，就會顯示畫面。至于這么長時間未顯示，小弟也不知道啊。。希望大佬指點。。

最后

完事了就，這是我歷經千辛萬苦找到的方法，弄這個vue中播放rtsp搞了好久，技術太拉了我，只能用這些小玩意來搞。原本打算用java或者python通過拉rtsp流解析成rtmp的，奈何能力不足，也懶得思考懶得搞懶得弄，所以擺爛了QAQ
若哪里有講的不妥和使用不當的地方還請您告知一下，萬分感謝大佬指點，小弟深表感謝<抱拳>
~~-----------------------------------------------------------------------------------------------------------~~

參考。1

https://zhuanlan.zhihu.com/p/531899593 ??
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

vue中播放rtsp流