實(shí)現(xiàn)vue中播放rtsp視頻流的問(wèn)題
背景：項(xiàng)目中通過(guò)攝像機(jī)提供的rtsp流來(lái)顯示畫面，但是在編寫項(xiàng)目中，需要將rtsp實(shí)時(shí)流畫面?zhèn)鬏數(shù)絯eb前端頁(yè)面中。于是找了很多方法，都是后臺(tái)轉(zhuǎn)碼轉(zhuǎn)成rtmp來(lái)播放，現(xiàn)在大部分插件和瀏覽器都是支持使用rtmp播放視頻流。而rtsp隨著flash的退出而被復(fù)雜化了。網(wǎng)上都是1、通過(guò)ffmpeg轉(zhuǎn)碼后輸出，2、通過(guò)攝像機(jī)指定的web插件轉(zhuǎn)碼輔助播放，如海康，大華攝像機(jī)；3、還有個(gè)猿大師播放器基于猿大師中間件提供的內(nèi)嵌網(wǎng)頁(yè)播放（沒(méi)用過(guò)，不知道行不行，原本想用現(xiàn)在這個(gè)方法行不行的，若不行就用這個(gè)猿大師了的）
開(kāi)始
:
-
node.js工具
-
jsmpeg.js文件
-
npm install rtsp2web
科普了解一下
-
rtsp2web 是一個(gè)依賴 ffmpeg，能實(shí)時(shí)將傳入的 rtsp 視頻流轉(zhuǎn)碼成圖像數(shù)據(jù)并通過(guò) ws 推送到前端的智能工具。
-
前端頁(yè)面借助 jsmpeg.js 就可以很輕松的實(shí)現(xiàn)播放
-
同時(shí)rtsp2web的特點(diǎn)還有：1、并發(fā)，支持同時(shí)播放多路視頻2、合并同源，同時(shí)播放多個(gè)同一個(gè)rtsp視頻源時(shí)，只會(huì)創(chuàng)建一個(gè)轉(zhuǎn)碼推流進(jìn)程，不會(huì)創(chuàng)建多個(gè)。3、智能釋放資源，智能檢測(cè)當(dāng)前沒(méi)有使用的轉(zhuǎn)碼推流進(jìn)程，將其關(guān)閉，并釋放電腦資源。
使用
安裝成功以后，你重新打開(kāi)一個(gè)命令行終端，輸入：ffmpeg -h，如果能輸出 ffmpeg 的相關(guān)信息出來(lái)，則證明你的電腦安裝 ffmpeg 成功。
使用rtsp2web
創(chuàng)建了一個(gè)vuecli（vue2）項(xiàng)目，名稱不要起rtsp2web，與src文件夾同級(jí)
下創(chuàng)建一個(gè)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')
//服務(wù)端的端口號(hào)，端口號(hào)可以自定義
const port = 8033
new RTSP2web({
port
)}
運(yùn)行命令：node index.js
前端代碼
在public的index.html中
其中jsmpeg.min.js通過(guò)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頁(yè)面中用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>
問(wèn)題
為什么node index.js之后沒(méi)反應(yīng)？
—檢查端口號(hào)是否填寫對(duì)應(yīng)，index.js中的端口要與script里的端口保持一致
|
為什么長(zhǎng)時(shí)間未顯示圖像？
—需要等待大概1-2分鐘，就會(huì)顯示畫面。至于這么長(zhǎng)時(shí)間未顯示，小弟也不知道啊。。希望大佬指點(diǎn)。。
最后
完事了就，這是我歷經(jīng)千辛萬(wàn)苦找到的方法，弄這個(gè)vue中播放rtsp搞了好久，技術(shù)太拉了我，只能用這些小玩意來(lái)搞。原本打算用java或者python通過(guò)拉rtsp流解析成rtmp的，奈何能力不足，也懶得思考懶得搞懶得弄，所以擺爛了QAQ
若哪里有講的不妥和使用不當(dāng)?shù)牡胤竭€請(qǐng)您告知一下，萬(wàn)分感謝大佬指點(diǎn)，小弟深表感謝<抱拳>
-----------------------------------------------------------------------------------------------------------
參考。
