欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中播放rtsp流的方法實例詳解

 更新時間:2022年12月21日 17:14:52   作者:dlpay  
最近有個需求是前端在瀏覽器顯示攝像頭傳回的RTSP視頻流,下面這篇文章主要給大家介紹了關于vue中播放rtsp流的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

背景:

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

開始 :

  • node.js工具
  • jsmpeg.js文件
  • npm install rtsp2web

科普了解一下

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

使用

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

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

使用rtsp2web

創(chuàng)建了一個vuecli(vue2)項目,名稱不要起rtsp2web,與src文件夾同級

下創(chuàng)建一個serve文件夾

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

在serve下初始化和下載

npm init --yes
npm install rtsp2web

在serve下創(chuàng)建index.js

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

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

運行命令: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" rel="external nofollow" >
    <!--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>

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

問題

為什么node index.js之后沒反應?

—檢查端口號是否填寫對應,index.js中的端口要與script里的端口保持一致

|

為什么長時間未顯示圖像?

—需要等待大概1-2分鐘,就會顯示畫面。至于這么長時間未顯示,小弟也不知道啊。。希望大佬指點。。

最后

完事了就,這是我歷經千辛萬苦找到的方法,弄這個vue中播放rtsp搞了好久,技術太拉了我,只能用這些小玩意來搞。原本打算用java或者python通過拉rtsp流解析成rtmp的,奈何能力不足,也懶得思考懶得搞懶得弄,所以擺爛了QAQ

參考

https://zhuanlan.zhihu.com/p/531899593 

到此這篇關于vue中播放rtsp流的文章就介紹到這了,更多相關vue播放rtsp流內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • element table多層嵌套顯示的實踐

    element table多層嵌套顯示的實踐

    本文主要介紹了element table多層嵌套顯示的實踐,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 如何區(qū)分vue中的v-show 與 v-if

    如何區(qū)分vue中的v-show 與 v-if

    這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ,幫助大家更好的理解和學習vue框架,感興趣的朋友可以了解下
    2020-09-09
  • 淺談Vant-list?上拉加載及下拉刷新的問題

    淺談Vant-list?上拉加載及下拉刷新的問題

    這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中使用jsencrypt進行RSA非對稱加密的操作方法

    Vue中使用jsencrypt進行RSA非對稱加密的操作方法

    這篇文章主要介紹了Vue中使用jsencrypt進行RSA非對稱加密,在這里需要注意要加密的數據必須是字符串,對Vue?RSA非對稱加密相關知識感興趣的朋友一起看看吧
    2022-04-04
  • 項目開發(fā)中husky的使用詳解

    項目開發(fā)中husky的使用詳解

    這篇文章主要為大家介紹了項目開發(fā)中husky的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • vue3內嵌iframe的傳參與接收參數代碼示例

    vue3內嵌iframe的傳參與接收參數代碼示例

    這篇文章主要給大家介紹了關于vue3內嵌iframe的傳參與接收參數的相關資料,Vue項目中使用iframe及傳值功能相信有不少人都遇到過,需要的朋友可以參考下
    2023-07-07
  • Vue之表單事件數據綁定詳解

    Vue之表單事件數據綁定詳解

    這篇文章主要為大家介紹了Vue之表單事件的數據綁定,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助,希望能夠給你帶來幫助
    2021-11-11
  • Vue?Router的安裝使用方法總結

    Vue?Router的安裝使用方法總結

    在本文中,我們詳細講解了Vue路由的使用方法,我們首先安裝了Vue?Router,然后創(chuàng)建了一個Vue?Router實例,并配置了路由,感興趣的朋友一起看看吧
    2023-11-11
  • vant中如何修改用戶的頭像

    vant中如何修改用戶的頭像

    這篇文章主要介紹了vant中如何修改用戶的頭像,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue實現模糊查詢搜索功能的步驟詳解

    Vue實現模糊查詢搜索功能的步驟詳解

    本文主要介紹了Vue實現模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-10-10

最新評論