前言
像海康大華一些攝像頭或者直播源 為rtsp視頻流，想在web上播放必須進行協(xié)議轉(zhuǎn)換。已知一些方案例如rtsp轉(zhuǎn)rtmp需要flash，現(xiàn)在瀏覽器基本不支持flash。還有轉(zhuǎn)hls或者flv這些延遲都比較高。經(jīng)過實踐對比比較理想方案是 經(jīng)轉(zhuǎn)碼后視頻流通過websocket傳送給客戶端在將視頻流解碼成圖片通過canvas渲染出來，延遲比較小基本在1s以內(nèi)。所用工具(插件)為ffmpeg+node（node-rtsp-stream）+jsmpeg
一、ffmpeg是什么？
FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計算機程序。采用LGPL或GPL許可證。它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案，簡而言之就是一個可以轉(zhuǎn)換各種視頻流格式/協(xié)議的強大工具。
二、ffmpeg安裝
1.下載
ffmpeg下載地址
進入官網(wǎng)選擇window圖標-點擊windows builds form gyan.dev
進入內(nèi)頁下拉找ffmpeg-release-essentials.zip點擊下載
下載完解壓
在bin目錄下有個ffmpeg.exe 程序運行入口
2.安裝
ffmpeg添加到全局環(huán)境變量
window+i 輸入’環(huán)境變量’搜索打開系統(tǒng)屬性窗口
點擊環(huán)境變量，在系統(tǒng)變量中找到Path點擊編輯
瀏覽-選擇ffmpeg解壓出來的bin目錄
確定-確定-確定關(guān)閉窗口
添加成功后驗證是否生效
任意地方打開Powershell窗口或cmd窗口
輸入 ffmpeg 打印如下表示成功
三、node搭建websocket服務(wù)
此功能需要借助node-rtsp-stream插件，node-rtsp-stream是一個node環(huán)境下處理rtsp視頻流插件，借助它能通過代碼自動調(diào)用ffmpeg程序進行推流拉取轉(zhuǎn)換并以websocket形式輸出視頻流。
由于在node下搭建服務(wù)，所以電腦要先安裝node環(huán)境。怎么安裝node環(huán)境自行查找其他教程。
新建一個app.js文件，同級目錄下npm安裝 node-rtsp-stream
npm install node-rtsp-stream -S
app.js寫入：
const stream = require('node-rtsp-stream')
new stream({
name: 'video-stream',
streamUrl: 'rtsp://xxxxx',//rtsp地址
wsPort: 9999,//端口號
ffmpegOptions: {
'-stats': '',
'-r': 30 ,//視頻幀數(shù)
'-s': '1920*1080' //視頻分辨率
}
})
運行
node app.js
出現(xiàn)上面打印一堆推流數(shù)據(jù)表示node服務(wù)啟動成功，服務(wù)端工作就完成了
四、web客戶端播放視頻
web端用到j(luò)smpeg插件播放視頻，jsmpeg是個js插件能將視頻流解碼成圖片并渲染出來。
jsmpeg.min.js下載地址：jsmpeg.min.js
新建index.html文件，jsmpeg.min.js放置同一個目錄下，index.html寫入
<!DOCTYPE >
<html>
<head>
<script src="./jsmpeg.min.js"></script>
<style>
#video{
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<canvas id="video"></canvas>
<button onclick="onPlay()">播放</button>
<button onclick="onPause()">暫停</button>
<button onclick="onStop()">停止</button>
</body>
<script>
var canvas = document.getElementById("video");
var url = "ws://127.0.0.1:9999";//node服務(wù)ip+端口號，本機node服務(wù)默認127.0.0.1
var player = new JSMpeg.Player(url, { canvas });
//開始播放
function onPlay() {
player.play();
}
//暫停播放
function onPause() {
player.pause();
}
//停止播放
function onStop() {
player.stop();
}
</script>
</html>
測試：打開運行index.html，成功播放
五、window下開機自啟動部署
window環(huán)境（服務(wù)器）下開機自啟動推流實現(xiàn)，一般用于本地局域網(wǎng)使用
1.node項目根目錄下新建start.bat 腳本并寫入
@echo off
cd /d %~dp0
node app.js
exit
此時雙擊start.bat就能自動運行app.js
2.新建init.vbs腳本寫入
CreateObject("WScript.Shell").Run "cmd /c D:\javaworkspace\node\start.bat",0
其中D:\javaworkspace\node\start.bat換成自己的start.bat路徑
3.vbs腳本放入開機自啟動文件夾
win+R運行shell:startup打開開機自啟動文件夾把init.vbs放入
這樣每次開機都會自啟動推流服務(wù)，而且是在后臺靜默推流隱藏cmd窗口。文章來源：http://www.zghlxwxcb.cn/news/detail-846156.html
demo示例
文章頂部提供了demo示例，從網(wǎng)上找的公用測試rtmp資源（未找到rtsp資源用rtmp代替，該方案2種格式都支持），rtmp隨時都可能失效，如失效請換成自己的資源測試。文章來源地址http://www.zghlxwxcb.cn/news/detail-846156.html
到了這里，關(guān)于web端播放rtsp視頻流（攝像頭監(jiān)控視頻）教程及window下開機自啟動部署的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
