博客

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

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

1. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路.
2. 通过设备的主动注册,让设备去主动连接服务器后端通过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();
          f