快捷導(dǎo)航

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

更新時間：2022年12月21日 17:14:52 作者：dlpay

最近有個需求是前端在瀏覽器顯示攝像頭傳回的RTSP視頻流,下面這篇文章主要給大家介紹了關(guān)于vue中播放rtsp流的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景：

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

開始 :

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

科普了解一下

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

使用

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

安裝成功以后，你重新打開一個命令行終端，輸入：ffmpeg -h，如果能輸出 ffmpeg 的相關(guān)信息出來，則證明你的電腦安裝 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')

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

運(yùn)行命令：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>