Récemment, j'ai fait le tri des scénarios et solutions business précédents. Les outils spécifiques mis en œuvre sont les suivants :
Flux de fichiers vidéo de surveillance ==>video.js + videojs-contrib-hls
solution d'adaptation grand écran ==> v-scale-screen
websocket==>sockjs-client+ webstomp-client
Vidéosurveillance – Streaming de fichiers
Instructions
Téléchargez le plug-in vidéo,
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) Importer
//导入 css 与 videojs (可全局，可只在使用的页面)
import "video.js/dist/video-js.css";
import videojs from "video.js";
(2) Écrivez des balises dans le modèle
<video ref="videoPlayer" style="width: 100%; height: 100%" class="video-js videoNmae"></video>
(3) Appelez la fonction lors du rendu de la page pour restituer la vidéo
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 est la configuration de la vidéo. Pour d'autres configurations, veuillez consulter le portail du site officiel.
Lorsque le composant est détruit, l'instance de la vidéo doit être détruite pour éviter les fuites de mémoire.
Solution d'adaptation grand écran (v-scale-screen)
1. Au début du projet, nous recherchions une solution d'adaptation sur grand écran. Après avoir comparé différentes solutions, nous avons décidé d'utiliser la solution v-scale-screen. Ce plug-in adapte la page en fonction de la mise à l'échelle de l'écran. fonction de CSS3 (il n'est pas soumis à la mise à l'échelle du navigateur) Impact)
Inconvénients : lorsque la taille de la page est trop grande, les détails ne sont pas clairement visibles sur l'écran de l'ordinateur pendant le développement et vous devez utiliser le pavé tactile pour agrandir.
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>
Pour plus de détails, veuillez consulter le portail du site officiel de npm
interface WebSocket
2. Utilisez les plug-ins sockjs-client, webstomp-client (plan d'utilisation finale)
1.yarn add sockjs-client webstomp-client et npm i sockjs-client webstomp-client
2. Créez le fichier 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. Comment utiliser
Après avoir introduit Websocket à la demande, appelez-le dans le hook monté et utilisez la nouvelle méthode websocket().sub() pour transmettre deux paramètres
Le premier paramètre : Le format des données est une chaîne. Vous pouvez transmettre l'identifiant convenu avec le backend. Assurez-vous qu'il s'agit bien de la page saisie et poussez les données qui y correspondent.
Deuxième paramètre : Passer une fonction. Le premier paramètre de cette fonction est les données renvoyées par le backend.
Remarque : Il existe de nombreuses méthodes dans la fonction outil, telles que l'annulation de l'abonnement, qui peuvent être utilisées selon les besoins.
Avantages : 1. Identifiez automatiquement la correspondance entre wss et https, ws et http, pas besoin d'écrire l'adresse au début du protocole wss ; 2. Lors du débogage du websocket local, il vous suffit de modifier l'adresse dans la fonction outil
Inconvénients : 1. Lorsque vous devez accéder à un websocket externe, car il n'y a aucun accord avec celui-ci, vous devez utiliser le format natif
import {
Websocket } from "@/utils/stomp";
mounted() {
let stomp = new Websocket();
// 初始化
// 初始化成功 就执行订阅
stomp.sub("/topic/orderlyCharger", (res) => {
console.log(res,"这个是后端推的数据"
);
});
},
Se désabonner
beforeDestroy() {
let stomp = new Websocket();
stomp.unSub("/topic/publicCharger")
},
Basculer entre les pages Websocket peut entraîner une pollution des données, il est donc préférable de se désinscrire avant que le composant ne soit détruit
Pour en savoir plus sur vue, veuillez prêter attention à CRMEB .