vue项目业务实现,视频监控-文件流,大屏适配方案(v-scale-screen),websocket前端

这篇具有很好参考价值的文章主要介绍了vue项目业务实现,视频监控-文件流,大屏适配方案(v-scale-screen),websocket前端。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近把以前的业务场景及解决方案整理了一下,具体实现的工具如下:

监控-视频文件流==>video.js + videojs-contrib-hls
大屏适配方案==> v-scale-screen
websocket==>sockjs-client+ webstomp-client

视频监控-文件流

vue实现监控大屏,前端,vue.js,音视频,开源项目,免费源码

使用方法

下载video插件,


yarn add video.js -save -D  或者 npm i video.js -save -D  
yarn add videojs-contrib-hls -save -D  或者 npm i videojs-contrib-hls -save -D  

使用方法

(1)导入


//导入 css 与 videojs (可全局,可只在使用的页面)
import "video.js/dist/video-js.css";
import videojs from "video.js";

(2)模板中写入标签

<video ref="videoPlayer" style="width: 100%; height: 100%" class="video-js videoNmae"></video>

(3)页面渲染时调用函数,渲染视频


data(){
    return {
      optionc: {
        autoplay: true,
        controls: true,
        muted: true,
        sources: [
          {
            src: "视频地址",
            type: "application/x-mpegURL", // 监控类直播视频流为此格式
            // src: '',
            // type: "video/mp4", // 本地video视频播放为此格式
          },
        ],
      },}
}



 mounted() {
    // 将方法包装成异步
    this.$nextTick(() => {
      setTimeout(() => {
        this.playerd = videojs(   // playerd 为data中的变量,初始值可设置为null
          this.$refs.videoPlayer,  // this.$refs.videoPlayer为放置视频的dom
          this.options,   // this.options为视频的配置,可根据官方文档自行配置,下面有我的配置项
          function onPlayerReady() {
            console.log("onPlayerReady", this);
          }
        );
        this.playerda = videojs(
          this.$refs.videoPlayera,
          this.optionc,
          function onPlayerReady() {
            console.log("onPlayerReady", this);
          }
        );
      });
    })
 }

// 定时器的清理
    beforeDestroy() {
         //clearInterval(this.int)
       // var videoTime = document.getElementById("myvideo");
        videoTime.pause();
    }

optionc为视频的配置,具体其他配置可查看官网传送门
组件销毁时需要将视频的实例销毁,避免内存泄漏

大屏适配方案(v-scale-screen)

1、在项目初期,寻找大屏适配的方案,在比较多种方案后,决定使用v-scale-screen的方案,此插件根据CSS3的scale缩放功能对页面进行适配(不受浏览器缩放的影响)

缺点 : 页面尺寸过大时,开发时电脑屏幕无法看清楚细节,需要使用触控板进行放大

npm i  v-scale-screen

// main.js中注册
import VScaleScreen from 'v-scale-screen';

Vue.component('v-scale-screen', {
  name: 'v-scale-screen',
  ...VScaleScreen
});

Vue.use(VScaleScreen, {
  designWidth: 750, // 设计稿宽度
  designHeight: 1334, // 设计稿高度
});

// 使用

    <v-scale-screen :size="size" :boxStyle="{background:'null'}" >
       。。。。。。。 
     </v-scale-screen>   

详情可见npm官网传送门

websocket前端

2.使用插件sockjs-client,webstomp-client(最后使用方案)

1.yarn add sockjs-client webstomp-client 或者 npm i sockjs-client webstomp-client

2.创建stomp.js文件

import SockJS from "sockjs-client";
import Stomp from "webstomp-client";

export class Websocket {
  ar = new Array();
  debug = false;
  // 客户端连接信息
  stompClient = {};
  constructor() {
    console.log("aaaaaaaaaa");
    //首次使用构造器实例
    if (!Websocket.instance) {
      console.log("bbbbbbb");
      this.init();
      //将this挂载到Websocket这个类的instance属性上
      Websocket.instance = this;
    }

    console.log("ccccc--->" + this.stompClient.connected);
    return Websocket.instance;
  }

  getStompClient() {
    return Websocket.instance.stompClient;
  }

  // 初始化
  init(callBack) {
    console.log("1111111111111=>", this.stompClient);
    if (!this.stompClient.connected) {
      console.log("222222");
      const socket = new SockJS("https://sdd.cevmp.cn/wss/publicServer");//websocket请求地址
      this.stompClient = Stomp.over(socket);
      this.stompClient.hasDebug = this.debug;

      this.stompClient.connect(
        {},
        (suce) => {
          console.log("连接成功,信息如下 ↓");
          while (this.ar.length > 0) {
            let a = this.ar.pop();
            // this.sub(a.addres, a.fun);
            let timestamp = new Date().getTime() + a.address;
            this.stompClient.subscribe(
              a.addres,
              (message) => {
                //this.console(message, "message");
                let data = JSON.parse(message.body);
                console.log(
                  "000000000000000000000订阅消息通知,信息如下 000000000" +
                    a.addres
                );
                a.fun(data);
              },
              {
                id: timestamp,
              }
            );
          }

          if (callBack) {
            callBack();
          }
        },
        (err) => {
          if (err) {
            console.log("连接失败,信息如下 ↓");
            console.log(err);
          }
        }
      );
    } else {
      if (callBack) {
        console.log("已连接成功,无需重复创建===========================>");
        callBack();
      }
    }
  }
  // 订阅
  sub(address, callBack) {
    console.log(address + "-->" + this.stompClient);
    if (!this.stompClient.connected) {
      this.ar.push({
        addres: address,
        fun: callBack,
      });
      console.log("没有连接,无法订阅", address);
      this.reconnect(1);
      return;
    }

    // 生成 id
    let timestamp = new Date().getTime() + address;
    console.log("订阅成功 -> " + address);
    this.stompClient.subscribe(
      address,
      (message) => {
        //this.console(message, "message");
        let data = JSON.parse(message.body);
        // console.log(data + " 订阅消息通知,信息如下 ↓↓↓↓↓↓↓");
        callBack(data);
      },
      {
        id: timestamp,
      }
    );
  }
  // 取消订阅
  unSub(address) {
    if (!this.stompClient.connected) {
      console.log("没有连接,无法取消订阅 -> " + address);
      return;
    }
    let id = "";
    for (let item in this.stompClient.subscriptions) {
      if (item.endsWith(address)) {
        id = item;
        break;
      }
    }
    this.stompClient.unsubscribe(id);
    console.log("取消订阅成功 -> id:" + id + " address:" + address);
  }
  // 断开连接
  disconnect(callBack) {
    if (!this.stompClient.connected) {
      console.log("没有连接,无法断开连接");
      return;
    }
    this.stompClient.disconnect(() => {
      console.log("断开成功");
      if (callBack) {
        callBack();
      }
    });
  }
  // 单位 秒
  reconnect(time) {
    if (!this.stompClient.connected) {
      console.log("连接丢失");
      // console.log("重新连接中...");
      //this.init();
    }
  }
  console(msg) {
    if (this.debug) {
      console.log(msg);
    }
  }
}

3.使用方法

按需引入Websocket后,在mounted钩子里调用,使用new websocket().sub()方法 传入两个参数

第一个参数:数据格式为字符串,可传与后端约定好的标识,确定是进入的页面,推与之匹配的数据

第二个参数:传递一个函数,此函数的第一个参数即后端返回的数据

注意事项:工具函数内还有许多方法,比如取消订阅,可自行按需使用

优点:1.自动识别wss与https,ws与http的对应关系,无需再写 wss协议开头的地址 ; 2.websocket调试本地时只需更改工具函数内的地址

缺点:1.需要接入外部websocket时,由于没有与其约定,则需要使用原生格式

import { Websocket } from "@/utils/stomp";
mounted() {
    let stomp = new Websocket();
    // 初始化
    // 初始化成功 就执行订阅
    stomp.sub("/topic/orderlyCharger", (res) => {
      console.log(res,"这个是后端推的数据"
      );
    });
  },

取消订阅

 
beforeDestroy() {
    let stomp = new Websocket();
    stomp.unSub("/topic/publicCharger")
 
},

websocket页面之间的切换可能会造成数据污染,因此最好在组件销毁之前取消订阅

学习更多vue知识请关注CRMEB。文章来源地址https://www.toymoban.com/news/detail-595294.html

到了这里,关于vue项目业务实现,视频监控-文件流,大屏适配方案(v-scale-screen),websocket前端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中使用TcPlayer实现视频监控-代码

    1、引入js文件 在index.html头部引入引入播放器的cdn  2、主要代码 这里主要是监控画面的布局通过点击按钮使用grid布局进行切换,tcplayer.js的初始化就不展示了  3、视频监控-效果图

    2024年02月09日
    浏览(32)
  • 安防监控项目---mjpeg-streamer视频图像显示(实时视频流实现)

    书接上期,我们已经实现了许多功能了,但是对于视频流的实时上传还未实现,本期主要分享的就是如何具体实现网页实时显示摄像头采集到的视频,从而实现安防中监控的功能,这个功能完成后呢,就只剩下一个功能需求了,那就是GPRS模块,能够实现危险报警的功能,也能

    2024年02月06日
    浏览(47)
  • vue+flv.js+SpringBoot+websocket实现视频监控与回放

    需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服

    2024年02月02日
    浏览(36)
  • 视频监控业务平台羚通视频智能分析平台无人机统计人数算法在人数统计中的应用策略

    随着科技的飞速发展,视频监控业务平台在各个领域的应用越来越广泛。其中,羚通视频智能分析平台凭借其先进的人工智能技术,为监控视频的智能化分析和处理提供了强大的支持。在众多应用中,无人机统计人数算法在人数统计方面的表现尤为突出。本文将深入探讨视频

    2024年02月03日
    浏览(48)
  • VUE+webrtc-streamer 实现实时视频播放(监控设备-rtsp)

    下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面 地址:https://github.com/mpromonet/webrtc-streamer/releases 注意:第三步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1端口可 文章参考链接:https://blog.csdn.net/liona_koukou/article/details/126605137

    2024年02月02日
    浏览(55)
  • VUE+webrtc-streamer实现实时视频播放(监控设备-rtsp)

    首先说明目前我只完成了本地测试,因还没确定技术选型所以暂无项目应用,先做一下储备,后续项目应用的话这篇文章会持续更新。 监控设备播放效果如下:基于公司环境测试了大华和海康的监控设备(H264编码)可以正确播放 1、下载webrtc-streamer,本机测试我下载的最新

    2024年02月01日
    浏览(36)
  • LiveNVR Onvif/RTSP流媒体软件接入监控摄像头后如何获取直播流地址进行大屏展示、播放端拉流、网页播放监控视频等...

    LiveNVR的安防监控的视频直播,可以按标准的Onvif/RTSP协议接入监控设备,也可以通过海康、大华、天地伟业等厂家私有SDK接入监控,实现web页面的播放和录像回放。 可以分发HTTP-FLV、WS-FLV、WebRTC、RTMP、HLS(M3U8)、RTSP等多中视频流 2.1.1、接口说明 http://192.168.2.135:10800 是示例的i

    2024年02月16日
    浏览(49)
  • SpringBoot+vue 实现监控视频rtsp播放(java+Nginx+ffmpeg+flv.js)

    其实原理就是: 将监控通过FFMPEG,推送给Nginx,前端通过Nginx地址拉取视频,就可以播放了。 1:安装FFMPEG. 2:下载并且配置nginx. 3:使用java代码实现调用cmd或者linux窗口,并且运行操作FFMPEG的命令,进行监控视频rtsp格式的推送,推送给nginx. 4:前端写一个video标签就可以,Src写nginx的固定地

    2023年04月16日
    浏览(84)
  • VUE3+TS+VITE+webrtc-streamer实现实时视频播放(监控设备-rtsp,进来保你成)

    目录 1、下载webrtc-streamer,下载最新window版本  2、解压下载包  3、双击webrtc-streamer.exe启动服务  4、引入webrtc-streamer         1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 2、在index.html文件里引入这两个js文件 5、使

    2024年02月05日
    浏览(38)
  • 项目解决方案: 视频融合(实时监控视频和三维建模进行融合)设计方案

    目                 录 一、需求描述 1、视频接入和控制要求 2、视频播放需求 3、提供其他应用的调用 二、方案设计 (一)系统设计图 (二)产品实现方案 三、产品和功能描述 (一)总体描述 (二)视频综合平台服务器 1、概述 2、视频浏览及控制 3、数据信息管理 4、

    2024年01月24日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包