vue+flv.js+SpringBoot+websocket实现视频监控与回放

最新推荐文章于 2025-03-04 16:59:21 发布

egegerhn

最新推荐文章于 2025-03-04 16:59:21 发布

阅读量2.3k

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.youkuaiyun.com/egegerhn/article/details/126080393

版权

本文介绍如何利用vue、flv.js、SpringBoot和websocket实现视频监控与回放功能。通过设备注册、socket连接、后端推流接口，实现实时监控和回放。在前端，遇到ie浏览器flv.js引用问题，通过修改webpack配置解决。后端使用SDK实现设备服务和推流。在播放时注意hasAudio参数设置，否则可能导致播放错误。这种方式虽支持多种浏览器但对服务器压力较大，可能导致卡顿。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+flv.js+SpringBoot+websocket实现视频监控与回放

需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能.

之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路.
通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能；

思路:

1：初始化设备.后端项目启动时就调用初始化方法.
2：开启socket连接.前端页面加载时尝试连接socket.
3：点击播放,调用后端推流接口.并且前端使用flv.js实现播放.

准备工作:

1:vue项目引入flv.js。
npm install --save flv.js
main.js里面引入
import flvjs from ‘flv.js’;
Vue.use(flvjs)
但是这里我遇见一个坑.开发模式没有问题.但是打包之后发现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.准备一个硬盘录像机,并添加一个摄像头设备以做测试使用.
硬盘录像机设置为主动注册模式.并配置好ip和端口以及子设备ID
在这里插入图片描述
在设置里的网络设置里面

3.后端搭建好websocket工具类
包含通用的OnOpen,onClose,onError等方法.

实现:
1.项目启动开启设备服务.这个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;

最低0.47元/天解锁文章