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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue中使用jsencrypt進行RSA非對稱加密的操作方法
這篇文章主要介紹了Vue中使用jsencrypt進行RSA非對稱加密,在這里需要注意要加密的數據必須是字符串,對Vue?RSA非對稱加密相關知識感興趣的朋友一起看看吧2022-04-04