最近把以前的業(yè)務(wù)場(chǎng)景及解決方案整理了一下，具體實(shí)現(xiàn)的工具如下：

監(jiān)控-視頻文件流==>video.js + videojs-contrib-hls
大屏適配方案==> v-scale-screen
websocket==>sockjs-client+ webstomp-client

視頻監(jiān)控-文件流

使用方法

下載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）導(dǎo)入

//導(dǎo)入 css 與 videojs (可全局，可只在使用的頁(yè)面)
import "video.js/dist/video-js.css";
import videojs from "video.js";

（2）模板中寫(xiě)入標(biāo)簽

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

（3）頁(yè)面渲染時(shí)調(diào)用函數(shù)，渲染視頻

data(){
    return {
      optionc: {
        autoplay: true,
        controls: true,
        muted: true,
        sources: [
          {
            src: "視頻地址",
            type: "application/x-mpegURL", // 監(jiān)控類(lèi)直播視頻流為此格式
            // src: '',
            // type: "video/mp4", // 本地video視頻播放為此格式
          },
        ],
      },}
}



 mounted() {
    // 將方法包裝成異步
    this.$nextTick(() => {
      setTimeout(() => {
        this.playerd = videojs(   // playerd 為data中的變量，初始值可設(shè)置為null
          this.$refs.videoPlayer,  // this.$refs.videoPlayer為放置視頻的dom
          this.options,   // this.options為視頻的配置，可根據(jù)官方文檔自行配置，下面有我的配置項(xiàng)
          function onPlayerReady() {
            console.log("onPlayerReady", this);
          }
        );
        this.playerda = videojs(
          this.$refs.videoPlayera,
          this.optionc,
          function onPlayerReady() {
            console.log("onPlayerReady", this);
          }
        );
      });
    })
 }

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

optionc為視頻的配置，具體其他配置可查看官網(wǎng)傳送門(mén)
組件銷(xiāo)毀時(shí)需要將視頻的實(shí)例銷(xiāo)毀，避免內(nèi)存泄漏

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

1、在項(xiàng)目初期，尋找大屏適配的方案，在比較多種方案后，決定使用v-scale-screen的方案，此插件根據(jù)CSS3的scale縮放功能對(duì)頁(yè)面進(jìn)行適配（不受瀏覽器縮放的影響）

缺點(diǎn) : 頁(yè)面尺寸過(guò)大時(shí)，開(kāi)發(fā)時(shí)電腦屏幕無(wú)法看清楚細(xì)節(jié)，需要使用觸控板進(jìn)行放大

npm i  v-scale-screen

// main.js中注冊(cè)
import VScaleScreen from 'v-scale-screen';

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

Vue.use(VScaleScreen, {
  designWidth: 750, // 設(shè)計(jì)稿寬度
  designHeight: 1334, // 設(shè)計(jì)稿高度
});

// 使用

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

詳情可見(jiàn)npm官網(wǎng)傳送門(mén)

websocket前端

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

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

2.創(chuàng)建stomp.js文件

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

export class Websocket {
  ar = new Array();
  debug = false;
  // 客戶(hù)端連接信息
  stompClient = {};
  constructor() {
    console.log("aaaaaaaaaa");
    //首次使用構(gòu)造器實(shí)例
    if (!Websocket.instance) {
      console.log("bbbbbbb");
      this.init();
      //將this掛載到Websocket這個(gè)類(lèi)的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請(qǐng)求地址
      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("已連接成功,無(wú)需重復(fù)創(chuàng)建===========================>");
        callBack();
      }
    }
  }
  // 訂閱
  sub(address, callBack) {
    console.log(address + "-->" + this.stompClient);
    if (!this.stompClient.connected) {
      this.ar.push({
        addres: address,
        fun: callBack,
      });
      console.log("沒(méi)有連接,無(wú)法訂閱", 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("沒(méi)有連接,無(wú)法取消訂閱 -> " + 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);
  }
  // 斷開(kāi)連接
  disconnect(callBack) {
    if (!this.stompClient.connected) {
      console.log("沒(méi)有連接,無(wú)法斷開(kāi)連接");
      return;
    }
    this.stompClient.disconnect(() => {
      console.log("斷開(kāi)成功");
      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鉤子里調(diào)用,使用new websocket().sub()方法 傳入兩個(gè)參數(shù)

第一個(gè)參數(shù)：數(shù)據(jù)格式為字符串，可傳與后端約定好的標(biāo)識(shí)，確定是進(jìn)入的頁(yè)面，推與之匹配的數(shù)據(jù)

第二個(gè)參數(shù)：傳遞一個(gè)函數(shù)，此函數(shù)的第一個(gè)參數(shù)即后端返回的數(shù)據(jù)

注意事項(xiàng)：工具函數(shù)內(nèi)還有許多方法，比如取消訂閱，可自行按需使用

優(yōu)點(diǎn)：1.自動(dòng)識(shí)別wss與https,ws與http的對(duì)應(yīng)關(guān)系，無(wú)需再寫(xiě) wss協(xié)議開(kāi)頭的地址 ； 2.websocket調(diào)試本地時(shí)只需更改工具函數(shù)內(nèi)的地址

缺點(diǎn)：1.需要接入外部websocket時(shí)，由于沒(méi)有與其約定，則需要使用原生格式

import { Websocket } from "@/utils/stomp";
mounted() {
    let stomp = new Websocket();
    // 初始化
    // 初始化成功 就執(zhí)行訂閱
    stomp.sub("/topic/orderlyCharger", (res) => {
      console.log(res,"這個(gè)是后端推的數(shù)據(jù)"
      );
    });
  },

取消訂閱

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

websocket頁(yè)面之間的切換可能會(huì)造成數(shù)據(jù)污染，因此最好在組件銷(xiāo)毀之前取消訂閱

學(xué)習(xí)更多vue知識(shí)請(qǐng)關(guān)注CRMEB。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-595294.html

到了這里，關(guān)于vue項(xiàng)目業(yè)務(wù)實(shí)現(xiàn)，視頻監(jiān)控-文件流，大屏適配方案(v-scale-screen)，websocket前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！