Recently, I have sorted out previous business scenarios and solutions. The specific tools implemented are as follows:
Monitoring-video file stream==>video.js + videojs-contrib-hls
large screen adaptation solution==> v-scale-screen
websocket==>sockjs-client+ webstomp-client
Video Surveillance-File Streaming
Instructions
Download the video plug-in,
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
Instructions
(1) Import
//导入 css 与 videojs (可全局，可只在使用的页面)
import "video.js/dist/video-js.css";
import videojs from "video.js";
(2) Write tags in the template
<video ref="videoPlayer" style="width: 100%; height: 100%" class="video-js videoNmae"></video>
(3) Call the function when rendering the page to render the video
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 is the configuration of the video. For other configurations, please check the official website portal.
When the component is destroyed, the instance of the video needs to be destroyed to avoid memory leaks.
Large screen adaptation solution (v-scale-screen)
1. In the early stage of the project, we were looking for a solution for large screen adaptation. After comparing various solutions, we decided to use the v-scale-screen solution. This plug-in adapts the page according to the scale scaling function of CSS3 (it is not subject to browser scaling) Impact)
Disadvantages: When the page size is too large, details cannot be seen clearly on the computer screen during development, and you need to use the touchpad to enlarge.
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>
For details, please see the npm official website portal
websocket frontend
2. Use the plug-ins sockjs-client, webstomp-client (final use plan)
1.yarn add sockjs-client webstomp-client 或者 npm i sockjs-client webstomp-client
2. Create stomp.js file
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. How to use
After introducing Websocket on demand, call it in the mounted hook and use the new websocket().sub() method to pass in two parameters
The first parameter: The data format is a string. You can pass the identifier agreed with the backend. Make sure it is the entered page and push the data that matches it.
Second parameter: Pass a function. The first parameter of this function is the data returned by the backend.
Note: There are many methods in the tool function, such as canceling subscription, which can be used as needed.
Advantages: 1. Automatically identify the correspondence between wss and https, ws and http, no need to write the address at the beginning of the wss protocol; 2. When debugging local websocket, you only need to change the address in the tool function
Disadvantages: 1. When you need to access external websocket, because there is no agreement with it, you need to use the native format
import {
Websocket } from "@/utils/stomp";
mounted() {
let stomp = new Websocket();
// 初始化
// 初始化成功 就执行订阅
stomp.sub("/topic/orderlyCharger", (res) => {
console.log(res,"这个是后端推的数据"
);
});
},
unsubscribe
beforeDestroy() {
let stomp = new Websocket();
stomp.unSub("/topic/publicCharger")
},
Switching between websocket pages may cause data pollution, so it is better to unsubscribe before the component is destroyed
To learn more about vue, please pay attention to CRMEB .