vue+flv.js+SpringBoot+websocket實現(xiàn)視頻監(jiān)控與回放功能
更新時間：2022年02月21日 15:53:57 作者：香草味糖葫蘆
vue+springboot的項目,需要在頁面展示出?？档挠脖P錄像機連接的攝像頭的實時監(jiān)控畫面以及回放功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
需求:
vue+springboot的項目,需要在頁面展示出海康的硬盤錄像機連接的攝像頭的實時監(jiān)控畫面以及回放功能.
- 之前項目里是純前端實現(xiàn)視頻監(jiān)控和回放功能.但是有局限性.就是ip地址必須固定.新的需求里設(shè)備ip不固定.所以必須換一種思路.
- 通過設(shè)備的主動注冊,讓設(shè)備去主動連接服務(wù)器后端通過socket推流給前端實現(xiàn)實時監(jiān)控和回放功能；
思路:
1：初始化設(shè)備.后端項目啟動時就調(diào)用初始化方法.
2：開啟socket連接.前端頁面加載時嘗試連接socket.
3：點擊播放,調(diào)用后端推流接口.并且前端使用flv.js實現(xiàn)播放.
準備工作:
1:vue項目引入flv.js。
npm install --save flv.js
main.js里面引入
import flvjs from ‘flv.js’;
Vue.use(flvjs)
但是這里我遇見一個坑.開發(fā)模式?jīng)]有問題.但是打包之后發(fā)現(xiàn)ie瀏覽器報語法錯誤.不支持此引用.所以修改引用地址.
在webpack.base.conf.js的module.exports下添加
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'flvjs':'flv.js/dist/flv.js'
}
},plugins下添加
plugins: [
new webpack.ProvidePlugin({
flvjs:'flvjs',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],最后頁面引入時:
import flvjs from "flv.js/dist/flv.js";
2.準備一個硬盤錄像機,并添加一個攝像頭設(shè)備以做測試使用.
硬盤錄像機設(shè)置為主動注冊模式.并配置好ip和端口以及子設(shè)備ID
在設(shè)置里的網(wǎng)絡(luò)設(shè)置里面
3.后端搭建好websocket工具類
包含通用的OnOpen,onClose,onError等方法.
實現(xiàn):
1.項目啟動開啟設(shè)備服務(wù).這個SDKLIB里面都有就不介紹了.
2.頁面加載嘗試開啟socket連接.
//嘗試連接websocket
startSocket(channelnum, device_value) {
try {
let videoWin = document.getElementById(this.currentSelect);
if (flvjs.isSupported()) {
let websocketName =
"/device/monitor/videoConnection/" + channelnum + device_value;
console.log("進入連接websocket", this.ipurl + websocketName);
const flvPlayer = flvjs.createPlayer(
{
type: "flv",
//是否是實時流
isLive: true,
//是否有音頻
hasAudio: false,
url: this.ipurl + websocketName,
enableStashBuffer: true,
},
{
enableStashBuffer: false,
stashInitialSize: 128,
}
);
flvPlayer.on("error", (err) => {
console.log("err", err);
});
flvjs.getFeatureList();
flvPlayer.attachMediaElement(videoWin);
flvPlayer.load();
flvPlayer.play();
return true;
}
} catch (error) {
console.log("連接websocket異常", error);
return false;
}
},這里傳的參數(shù)是通道號和設(shè)備信息.無需在意.只要是唯一key就可以.
2.socket連接成功后.調(diào)用后端推流方法實現(xiàn)播放.
這里說一下后端的推流方法.
調(diào)用SDK里的CLIENT_RealPlayByDataType方法
/**
* 實時預(yù)覽拉流
*
* @param loginHandler 登錄句柄
* @param channel 通道號
* @param emDataType 回調(diào)拉出的碼流類型,{@link NetSDKLib.EM_REAL_DATA_TYPE}
*/
public long preview(long loginHandler, int channel, NetSDKLib.fRealDataCallBackEx realDataCallBackEx, fRealDataCallBackEx2 realPlayDataCallback, int emDataType, int rType, boolean saveFile, int emAudioType) {
NetSDKLib.NET_IN_REALPLAY_BY_DATA_TYPE inParam = new NetSDKLib.NET_IN_REALPLAY_BY_DATA_TYPE();
NetSDKLib.NET_OUT_REALPLAY_BY_DATA_TYPE outParam = new NetSDKLib.NET_OUT_REALPLAY_BY_DATA_TYPE();
inParam.nChannelID = channel;
inParam.rType = rType;
if(realDataCallBackEx!=null){
inParam.cbRealData=realDataCallBackEx;
}
if(realPlayDataCallback!=null){
inParam.cbRealDataEx = realPlayDataCallback;
}
inParam.emDataType = emDataType;
inParam.emAudioType=emAudioType;
if (saveFile) {
inParam.szSaveFileName = UUID.randomUUID().toString().replace(".", "").replace("-", "") + "." + EMRealDataType.getRealDataType(emDataType).getFileType();
}
NetSDKLib.LLong realPlayHandler = netsdk.CLIENT_RealPlayByDataType(new NetSDKLib.LLong(loginHandler), inParam, outParam, 3000);
if (realPlayHandler.longValue() != 0) {
netsdk.CLIENT_MakeKeyFrame(new NetSDKLib.LLong(loginHandler),channel,0);
RealPlayInfo info = new RealPlayInfo(loginHandler, emDataType, channel, rType);
realPlayHandlers.put(realPlayHandler.longValue(), info);
} else {
log.error("realplay failed.error is " + ENUMERROR.getErrorMessage(), this);
}
return realPlayHandler.longValue();
}注意:這里的碼流類型選擇flv.
回調(diào)函數(shù)里面:
// 回調(diào)建議寫成單例模式, 回調(diào)里處理數(shù)據(jù)，需要另開線程
@Autowired
private WebSocketServer server;
private Log log = Log.get(WebSocketRealDataCallback.class);
@Override
public void invoke(NetSDKLib.LLong lRealHandle, int dwDataType, Pointer pBuffer, int dwBufSize, int param, Pointer dwUser) {
RealPlayInfo info = DeviceApi.realPlayHandlers.get(lRealHandle.longValue());
if (info != null && info.getLoginHandler() != 0) {
//過濾碼流
byte[] buffer = pBuffer.getByteArray(0, dwBufSize);
if (info.getEmDataType() == 0 || info.getEmDataType() == 3) {
//選擇私有碼流或mp4碼流,拉流出的碼流都是私有碼流
if (dwDataType == 0) {
log.info(dwDataType + ",length:" + buffer.length + " " + Arrays.toString(buffer), WebSocketRealDataCallback.class);
sendBuffer(buffer, lRealHandle.longValue());
}
} else if ((dwDataType - 1000) == info.getEmDataType()) {
log.info(dwDataType + ",length: " + buffer.length + Arrays.toString(buffer), WebSocketRealDataCallback.class);
sendBuffer(pBuffer.getByteArray(0, dwBufSize), lRealHandle.longValue());
}
}
}以及調(diào)用Websocket里面的sendMessageToOne發(fā)送給指定客戶端
/**
* 發(fā)送數(shù)據(jù)
* @param bytes
* @param realPlayHandler
*/
private static void sendBuffer(byte[] bytes, long realPlayHandler) {
/**
* 發(fā)送流數(shù)據(jù)
* 使用pBuffer.getByteBuffer(0,dwBufSize)得到的是一個指向native pointer的ByteBuffer對象,其數(shù)據(jù)存儲在native,
* 而webSocket發(fā)送的數(shù)據(jù)需要存儲在ByteBuffer的成員變量hb，使用pBuffer的getByteBuffer得到的ByteBuffer其hb為null
* 所以，需要先得到pBuffer的字節(jié)數(shù)組,手動創(chuàng)建一個ByteBuffer
*/
ByteBuffer buffer = ByteBuffer.wrap(bytes);
server.sendMessageToOne(realPlayHandler, buffer);
}這里傳的參數(shù)是設(shè)備初始化的時候得到的登錄句柄.以及流數(shù)據(jù).
/**
* 發(fā)送binary消息給指定客戶端
*
* @param realPlayHandler 預(yù)覽句柄
* @param buffer 碼流數(shù)據(jù)
*/
public void sendMessageToOne(long realPlayHandler, ByteBuffer buffer) {
//登錄句柄無效
if (realPlayHandler == 0) {
log.error("loginHandler is invalid.please check.", this);
return;
}
RealPlayInfo realPlayInfo = AutoRegisterEventModule.findRealPlayInfo(realPlayHandler);
if(realPlayInfo == null){
//連接已斷開
}
String key = realPlayInfo.getChannel()+realPlayInfo.getSbbh();
Session session = sessions.get(key);
if (session != null) {
synchronized (session) {
try {
session.getBasicRemote().sendBinary(buffer);
byte[] bytes=new byte[buffer.limit()];
buffer.get(bytes);
} catch (IOException e) {
e.printStackTrace();
}
}
} else {
//log.error("session is null.please check.", this);
}
}這樣就實現(xiàn)了視頻監(jiān)控.
效果:
分享一下websocket代碼:
package com.dahuatech.netsdk.webpreview.websocket;
import cn.hutool.log.Log;
import cn.hutool.log.LogFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;
/**
* @description websocket實現(xiàn)類
*/
@ServerEndpoint("/websocket/{realPlayHandler}")
@Component
public class WebSocketServer {
private static Log log = LogFactory.get(WebSocketServer.class);
private FileOutputStream outputStream;
/**
* 靜態(tài)變量,用來記錄當前在線連接數(shù)。應(yīng)該把它設(shè)計成線程安全
*/
private final AtomicInteger onlineCount = new AtomicInteger(0);
/**
* 存放每個客戶端對應(yīng)的WebSocket對象,根據(jù)設(shè)備realPlayHandler建立session
*/
public static ConcurrentHashMap<Long, Session> sessions = new ConcurrentHashMap<>();
/**
* 存放客戶端的對象
*//*
public static CopyOnWriteArrayList<Session> sessionList=new CopyOnWriteArrayList<>();*/
/**
* 有websocket client連接
*
* @param realPlayHandler 預(yù)覽句柄
* @param session
*/
@OnOpen
public void OnOpen(@PathParam("realPlayHandler") long realPlayHandler, Session session) {
if (sessions.containsKey(realPlayHandler)) {
sessions.put(realPlayHandler, session);
} else {
sessions.put(realPlayHandler, session);
addOnlineCount();
}
log.info("websocket connect.session: " + session);
}
/**
* 連接關(guān)閉調(diào)用的方法
*
* @param realPlayHandler 預(yù)覽句柄
* @param session websocket連接對象
*/
@OnClose
public void onClose(@PathParam("realPlayHandler") Long realPlayHandler, Session session) {
if (sessions.containsKey(realPlayHandler)) {
sessions.remove(realPlayHandler);
subOnlineCount();
}
}
/**
* 發(fā)生錯誤
*
* @param throwable e
*/
@OnError
public void onError(Throwable throwable) {
throwable.printStackTrace();
}
/**
* 收到客戶端發(fā)來消息
*
* @param message 消息對象
*/
@OnMessage
public void onMessage(ByteBuffer message) {
log.info("服務(wù)端收到客戶端發(fā)來的消息: {}", message);
}
/**
* 收到客戶端發(fā)來消息
*
* @param message 字符串類型消息
*/
@OnMessage
public void onMessage(String message) {
log.info("服務(wù)端收到客戶端發(fā)來的消息: {}", message);
}
/**
* 發(fā)送消息
*
* @param message 字符串類型的消息
*/
public void sendAll(String message) {
for (Map.Entry<Long, Session> session : sessions.entrySet()) {
session.getValue().getAsyncRemote().sendText(message);
}
}
/**
* 發(fā)送binary消息
*
* @param buffer
*/
public void sendMessage(ByteBuffer buffer) {
for (Map.Entry<Long, Session> session : sessions.entrySet()) {
session.getValue().getAsyncRemote().sendBinary(buffer);
}
}
/**
* 發(fā)送binary消息給指定客戶端
*
* @param realPlayHandler 預(yù)覽句柄
* @param buffer 碼流數(shù)據(jù)
*/
public void sendMessageToOne(long realPlayHandler, ByteBuffer buffer) {
//登錄句柄無效
if (realPlayHandler == 0) {
log.error("loginHandler is invalid.please check.", this);
return;
}
Session session = sessions.get(realPlayHandler);
if (session != null) {
synchronized (session) {
try {
session.getBasicRemote().sendBinary(buffer);
byte[] bytes=new byte[buffer.limit()];
buffer.get(bytes);
} catch (IOException e) {
e.printStackTrace();
}
}
} else {
//log.error("session is null.please check.", this);
}
}
public void sendMessageToAll(ByteBuffer buffer) {
for (Session session : sessions.values()) {
synchronized (session) {
try {
/**
* tomcat的原因,使用session.getAsyncRemote()會報Writing FULL WAITING error
* 需要使用session.getBasicRemote()
*/
session.getBasicRemote().sendBinary(buffer);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
/**
* 主動關(guān)閉websocket連接
*
* @param realPlayHandler 預(yù)覽句柄
*/
public void closeSession(long realPlayHandler) {
try {
Session session = sessions.get(realPlayHandler);
if (session != null) {
session.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 獲取當前連接數(shù)
*
* @return
*/
public int getOnlineCount() {
return onlineCount.get();
}
/**
* 增加當前連接數(shù)
*
* @return
*/
public int addOnlineCount() {
return onlineCount.getAndIncrement();
}
/**
* 減少當前連接數(shù)
*
* @return
*/
public int subOnlineCount() {
return onlineCount.getAndDecrement();
}
}遇見的坑:
前端在播放的時候一開始始終不出畫面.流數(shù)據(jù)已經(jīng)拉過來了.后來才發(fā)現(xiàn)是因為hasAudio參數(shù)
這里如果設(shè)置成了true.則你的電腦必須插入耳機.不然會報錯;
總結(jié):
之前使用純前端實現(xiàn)視頻監(jiān)控和回放時.瀏覽器時只支持IE.使用后端推流的方式實現(xiàn)視頻監(jiān)控和回放時.瀏覽器支持谷歌火狐Edge等.但是又不支持IE了.很有意思.
flv的官方文檔解釋的是:
由于IO限制，flv.js可以支持HTTP上的FLV直播流Chrome 43+，F(xiàn)ireFox 42+，Edge 15.15048+和Safari 10.1+現(xiàn)在。
最后:
由于是后端不停的拉流.所以流量和服務(wù)器壓力比較大.可能同時打開多個監(jiān)控.會出現(xiàn)卡頓的情況.需要注意.
到此這篇關(guān)于vue+flv.js+SpringBoot+websocket實現(xiàn)視頻監(jiān)控與回放的文章就介紹到這了,更多相關(guān)vue SpringBoot websocket視頻監(jiān)控與回放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
Vue.js?核心特性之一就是雙向綁定,本文將深入探討?Vue2?和?Vue3?在雙向綁定上的區(qū)別,并分析這些改進對性能和開發(fā)體驗的影響,希望對大家有所幫助2024-11-11
在vue中會將常用的組件進行封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件封裝之input輸入框的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue監(jiān)聽scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個參考，希望給有同樣經(jīng)歷的人幫助2017-09-09
antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue:Bin Code Editor格式化JSON編輯器詳解
文章介紹了BinCodeEditor組件的安裝、注冊、使用方法以及注意事項,組件可以通過npm或yarn安裝,支持全局或局部注冊,使用時,可以通過value屬性綁定JavaScript值,或使用v-model,組件事件與方法包括編輯區(qū)顯示問題的解決2024-12-12
vue2.0中g(shù)oods選購欄滾動算法的實現(xiàn)代碼
這篇文章主要介紹了vue2.0中g(shù)oods選購欄滾動算法的實現(xiàn)代碼,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
監(jiān)聽element-ui table滾動事件的方法
這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了vue中使用geobuf的示例詳細，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04