vue前端对接监控视频 FLV格式 （分屏的操作 单屏 ，四平 ，六屏）
•
Jave
系列文章目录
vue前端对接监控视频 FLV格式
提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档
西瓜视频
- 系列文章目录
- 前言
- 一、准备工作
-
-
-
- 下好以后在 package.json 检查一下
-
-
- 二、引入到index的文件当中
-
- 1.引入库、介绍
- 2.开始绘制页面
-
- 定义的变量
- css样式
- 三核心代码的书写
- ` 到此也就结束，使用代码片段的时候需要将图片替换一下不然会出现路径的问题`
前言
接触智慧园区，智慧工地，水泵站等项目之后，发现都有实时监控的对接，并且是可以多屏进行，就研究了相关的技术栈，找到了这个强大的播放器对前端还是很友好的，话不多说上干货！！！
提示：代码片段里有博主对的接口，读代码的时候注意
一、准备工作
1. 使用npm 、cnpm、yarn 下载如下插件 2. npm install xgplayer 3. npm install xgplayer-flv 4. npm install xgplayer-flv.js
下好以后在 package.json 检查一下
二、引入到index的文件当中
1.引入库、介绍
代码如下（示例）：
import Player from "xgplayer"; // 这是他的一个方法
import FlvPlayer from "xgplayer-flv"; // 这个是搭配上面哪个使用的
import 'xgplayer/dist/index.min.css' // 这个是播放器的样式 ，可以在当前页面使用，也可以放全局
let a = new Player({
id: this.playList[0].id,// 对应
isLive: true, // 是否是直播，
plugins: [FlvPlayer], // 视频播放的方式
url: '你的视屏地址', // 地址
autoplay: true, //
lang: "zh-cn", // 是否自动播放，
autoplayMuted: true,//是否自动静音自动播放
screenShot: true, //是否使用截图插件
rotate:false,//是否使用旋转插件
download:false,//是否使下载按钮
pip:false,//是否使用画中画插件
mini:false,//是否启用mini小窗插件
playbackRate:[0.5, 0.75, 1, 1.5, 2],//倍速插件显示列表
});
2.开始绘制页面
提示 ：这里用到了Element-ui的tree组件，还有博主自己写一些样式就直接拿过来的 取自己用的即可
代码如下（示例）：
设备分组
![vue前端对接监控视频 FLV格式 （分屏的操作 单屏 ，四平 ，六屏）]()
{{ data.channelName }}
{{ data.channelName }}
云台控制
云台控制
实时监控
录像回放
-
{{ item.name }}
定义的变量
data() {
return {
FenPingCenType: null, //
mouType: null,
destroyType: null,// 判断是否销毁
zheDielist: false, // 左侧云台控制显示
uuidv4: '',// uuid 视频放大时使用
treeData: [ // 左侧 tree 的数据
{
id: 1,
channelName: "全部",
children: [
],
},
],
// 图标
IconFontNumber: 1,
IconFontTypenumber: 1,
IconFont: [
{
className: 'iconfont icontiFenPingOne',
number: 1,
},
{
className: 'iconfont icontiFenPingSi',
number: 4,
},
{
className: 'iconfont icontiFenPingLiu',
number: 6,
},
],
operationArray: [ // 分屏数据
// {
// name: '抓拍',
// image: require('../../../assets/carmear/zhuapai.png')
// },
// {
// name: '放大',
// image: require('../../../assets/carmear/BigList.png')
// },
// {
// name: '录像',
// image: require('../../../assets/carmear/luxiang.png')
// },
// {
// name: '音频',
// image: require('../../../assets/carmear/yinpin.png')
// },
// {
// name: '对讲',
// image: require('../../../assets/carmear/duijiang.png')
// },
// {
// name: '全屏',
// image: require('../../../assets/carmear/qaunping.png')
// },
],
// tree 重置 数据的属性名
defaultProps: {
children: 'children',
label: 'channelName'
},
// 部门名称
deptName: undefined, // 用于筛选tree 数据
selectArry: '',
playList: [], // 所有视频的 实例
cameraName: null, // 判断是否选中视频
checkchannelId: null // 调取视频接口 接收 其他页面传过来的数据
};
},
css样式
.list {
width: 100%;
padding: 20px;
height: 90vh;
display: flex;
overflow-y: auto;
background-color: #040c1e;
.lsieqqwe {
width: 20%;
border: 1px solid #13355a;
.boseList {
padding: 5px;
padding-left: 20px;
font-size: 17px;
}
.bgImg {
background-size: 100%, 100%;
background-image: url("../../../assets/carmear/reight.png");
}
}
.control {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
border-top: 2px solid #409eff;
height: 10%;
padding: 5px;
color: #fff;
background: linear-gradient(180deg, #246ab1 0%, #183a74 100%);
img {
width: 30px;
}
}
.control_list {
width: 100%;
height: 210px;
background-image: url("../../../assets/carmear/yuanpan.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.ShArrows {
position: absolute;
top: 0;
left: 0;
margin-top: 9%;
margin-left: 42%;
}
.XArrows {
position: absolute;
top: 0;
left: 0;
margin-top: 58%;
margin-left: 42%;
}
.ZArrows {
position: absolute;
top: 0;
left: 0;
margin-top: 28%;
margin-left: 17%;
}
.YArrows {
position: absolute;
top: 0;
right: 0;
margin-top: 28%;
margin-right: 18%;
}
.YSArrows {
position: absolute;
top: 0;
right: 0;
margin-top: 15%;
margin-right: 28%;
}
.YXArrows {
position: absolute;
top: 0;
right: 0;
margin-top: 50%;
margin-right: 28%;
}
.ZXArrows {
position: absolute;
top: 0;
left: 0;
margin-top: 50%;
margin-left: 28%;
}
.ZSArrows {
position: absolute;
top: 0;
left: 0;
margin-top: 16%;
margin-left: 28%;
}
}
.footerLsitStyle_why {
padding: 5px;
display: flex;
justify-content: space-between;
div {
text-align: center;
flex: 1;
background-color: #183a74;
img {
width: 2rem;
}
}
}
.carStyle {
width: 100%;
height: 50px;
.shexinag {
width: 100%;
height: 100%;
display: flex;
background-size: 100%, 100%;
background-repeat: no-repeat;
background-image: url("../../../assets/carmear/left.png");
}
.tableLIstStyle {
color: #54c0ff;
border-top: 3px solid #54c0ff;
}
.table_hui {
border-top: 3px solid #54c0ff00;
}
}
.footer_box {
display: flex;
padding: 10px;
align-items: center;
border: 1px solid #1d4a92;
justify-content: space-between;
.operationUl {
display: flex;
li {
margin-right: 10px;
text-align: center;
}
img {
width: 30px;
}
}
}
.iconFlist_box {
display: flex;
font-size: 20px;
.iconFlist {
color: #239de7;
font-size: 25px;
margin-right: 15px;
}
.iconStyle {
color: #6e809c;
font-size: 25px;
margin-right: 15px;
}
}
}
.footer {
bottom: 0;
right: 0;
position: absolute;
width: 100%;
height: 45px;
}
.toplst {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 45px;
}
.FenPingCenter_box {
width: 100%;
height: 80%;
display: flex;
flex-wrap: wrap;
background-color: #ce9292;
.FenPingCenter_li {
border: 1px solid #25a9f6;
background-color: #0c3781;
position: relative;
overflow: hidden;
}
.FenPingCenter_Ui {
border: 2px solid #d18109;
background-color: #0c3781;
position: relative;
overflow: hidden;
}
.FenPingLise {
position: absolute;
z-index: 99999;
}
}
::v-deep.FenPingCenter_list_box:first-child {
width: 66% !important;
border: 10px solid red !important;
}
.FenPingCenter_list_box {
height: 80%;
display: flex;
flex-wrap: wrap;
background-color: #ce9292;
.FenPingCenter_li {
border: 1px solid #25a9f6;
background-color: #0c3781;
position: relative;
overflow: hidden;
}
.FenPingCenter_Ui {
border: 2px solid #d18109;
background-color: #0c3781;
position: relative;
overflow: hidden;
}
.FenPingLise {
position: absolute;
z-index: 99999;
}
}
// .leftbox {
.treeDataLsit {
height: 48%;
// height: 78%;
border: 1px solid #1e5494;
overflow-y: auto;
::v-deep .el-tree {
color: rgba(255, 255, 255, 0.7);
.el-tree-node__content:hover {
background-color: #0c3781 !important;
}
&.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #0c3781 !important;
}
}
}
.el-tree--highlight-current {
background-color: #040c1e !important;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #0c3781 !important;
}
.el-tree-node__content {
background-color: red !important;
}
::v-deep .el-input--small .el-input__inner {
background-color: #040c1e !important;
border: none;
}
.divVide {
width: 100% !important;
position: relative !important;
height: 100%;
// border: 1px solid red;
}
::v-deep video {
height: 50% !important;
}
.player-content {
width: 100%;
height: 10%;
position: absolute;
display: block;
}
// .iconqingxiLOGO {
// display: none !important;
// }
#FenPingCenter_li0,
#FenPingCenter_li1,
#FenPingCenter_li2,
#FenPingCenter_li3,
#FenPingCenter_li4,
#FenPingCenter_li5,
#FenPingCenter_li6,
#FenPingCenter_li7,
#FenPingCenter_li8 {
height: 100% !important;
}
// .xgplayer-fullscreen,
.xgplayer-cssfullscreen,
.xgplayer-volume,
.icon-text {
display: none !important;
}
三核心代码的书写
- video 划入事件
// video 划入事件
mouseenteBtn(value) {
this.mouType = value;
console.log(11111)
},
- video 划出事件
// video 划入事件
mouseout() {
setTimeout(() => {
this.mouType = null
}, 1000)
},
提示:视频出来后 显示 全屏或者 抓拍的 按钮 这个块不需要 如果是就一个平并且需要写自己的全屏抓拍样式的话可以用道 这个播放器本身带这些功能 只是样式不好看
FooterBtn(FooterObj) {
console.log(FooterObj.name)
if (FooterObj.name == '全屏') {
//
this.playList[this.FenPingCenType - 1].ShiLi.getFullscreen()
} else if (FooterObj.name == '抓拍') {
let aasd = ""
// 这格式掉后端的接口
xxxx({ id: this.defaultPropsBtnBjc.deviceCode }).then(res => {
aasd = res.msg
window.open(aasd).download()
})
}
},
- 分屏按钮 分别为 单屏 、四平、六平
// 分屏按钮
FenPing(value) {
/*
1.当你点击下方的三个图标的时候，分别获取 4 ，3 ，1三个值
对应下面的三个判断
2. 将对应的盒子添加上是shili：'' ,id（对应的上每一个盒子）,当前视频的状态
*/
this.IconFontNumber = value.number
console.log(value.number)
if (value.number == 4) {
this.IconFontTypenumber = 2
for (let index = 1; index < 4; index++) {
this.playList.push({ ShiLi: null, id: `${'FenPingCenter_li' + index}`, type: 0, flg: false })
}
} else {
this.IconFontTypenumber = 3
for (let index = 1; index < 6; index++) {
this.playList.push({ ShiLi: null, id: `${'FenPingCenter_li' + index}`, type: 0, flg: false })
}
}
if (value.number == 1) {
this.IconFontTypenumber = 1
this.playList = this.playList.splice(0, 1)
this.$forceUpdate()
}
},
- 每个分屏 的 实例销毁 按钮
playerBtnItem(index) {
console.log(index); // 这个index是下标
/**
1.实例销毁调用.ShiLi.destroy();这个方法
2.初始化当前的数据的状态
*/
this.mouType = null;
this.destroyType = true;
// // 视频的销毁
this.playList[index].ShiLi.destroy();
this.playList[index].ShiLi = null;
this.playList[index].flg = true;
this.playList[index].type = 0;
},
- 联合tree node-click事件
handleNodeClick(value) {
this.defaultPropsBtnBjc = value
console.log(value)
let a = []
/**
* 判断是否是tree的最里层的数据
*/
if (!value.children) {
this.playList.forEach(item => {
if (item.type == 1) {
a.push(item.type)
}
})
// 接口
xxxxx({ channelId: value.channelCode || this.checkchannelId }).then(res => {
let b = a.length
/**
* 判断是否是 选中 容器
* 如果选择容器
* 判断他是否为null 查找到他的下标
* 拿容器ID 生成 播放器实例
* 并且插入到 实例的数据组中
* 将播放状态 改为 1
* */
if (this.cameraName && !this.destroyType) {
let player = new Player({
id: this.cameraName,
isLive: true,
plugins: [FlvPlayer],
url: res.data.url,
autoplay: true,
lang: "zh-cn",
autoplayMuted: true,
"screenShot": true
});
this.playList[this.FenPingCenType - 1].ShiLi = player
this.playList[this.FenPingCenType - 1].type = 1
} else {
/**
* 判断是否是 是否是 销毁实例后
* 判断他是否为null 查找到他的下标
* 拿容器ID 生成 播放器实例
* 并且插入到 实例的数据组中
* 将播放状态 改为1
* */
if (this.destroyType) {
let iB = this.playList.findIndex(item => { return item.ShiLi == null })
console.log(iB, 'ppppppp', this.FenPingCenType)
if (this.FenPingCenType) {
this.playList[this.FenPingCenType - 1].ShiLi = new Player({
id: this.cameraName,
isLive: true,
plugins: [FlvPlayer],
url: res.data.url,
autoplay: true,
lang: "zh-cn",
autoplayMuted: true,
"screenShot": true
});
this.playList[this.FenPingCenType - 1].type = 1
this.destroyType = !this.playList.every(item => item.type == 1)
// this.classLList()
} else {
this.playList[iB].ShiLi = new Player({
id: this.playList[iB].id,
isLive: true,
plugins: [FlvPlayer],
url: res.data.url,
autoplay: true,
lang: "zh-cn",
autoplayMuted: true,
"screenShot": true
});
this.playList[iB].type = 1
this.destroyType = !this.playList.every(item => item.type == 1)
}
} else {
for (let i = 0; i < this.playList.length; i++) {
if (this.IconFontTypenumber == 1) {
this.playList.forEach(item => {
if (item.ShiLi != null) {
item.ShiLi.destroy();
item.ShiLi = null;
item.type = 0;
let a = new Player({
id: this.playList[0].id,
isLive: true,
plugins: [FlvPlayer],
url: res.data.url,
autoplay: true,
lang: "zh-cn",
autoplayMuted: true,
"screenShot": true,
});
item.ShiLi = a
}
return item
})
}
console.log(9999)
if (this.playList[i].ShiLi == null) {
this.playList[b].ShiLi = new Player({
id: this.playList[b].id,
isLive: true,
plugins: [FlvPlayer],
url: res.data.url,
autoplay: true,
lang: "zh-cn",
autoplayMuted: true,
"screenShot": true,
playsinline: true,
height: window.innerHeight,
width: window.innerWidth
});
this.playList[b].type = 1
break;
}
}
}
}
})
}
},
- 下面的代码是防止报错加的
// 云台控制必须是球机-上下左右转动
cameraBtn(value) {},
// 停止事件xx`q
mouseup(value) {},
// 放大开始事件
BigCamera(value) {},
// 放大结束事件
BigCameraMouseup(value) {}
到此也就结束，使用代码片段的时候需要将图片替换一下不然会出现路径的问题
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/5bb112a468.html
赞 (0)
谷粒商城【成神路】-【4】——分类维护
« 上一篇
1天前
Add Secure PDF Signing to .NET
下一篇 »
1天前
相关推荐
-
RabbitMQ的延迟队列实现[死信队列](笔记一)
关于死信队列的使用场景不再强调，只针对服务端配置 注意： 本文只针对实现死信队列的rabbitMQ基本配置步骤进行阐述和实现 目录 1、docker-compose 安装rabbi…
-
NC6X单点登录设计文档说明
前言 因为业务场景需要，第三方系统有些工作需要经常到NC系统里做，如果每次去NC系统做业务单据，都需要反复登录，导致客户使用体验不是很好，所以需要开发实现从第三方系统单点登录…
-
域名停靠(域名抢注的几种形式)
域名停靠,又叫域名停放。简单来说,就是将具有一定流量的优质域名交给域名停靠服务商管理,让他们在你的域名上面投放广告。 “域名停靠”来自于英文Domain Name Parking，…
-
【node.js从入门到精通】使用express创建web服务器，路由，进行中间件的创建链接路由及其他中间件
目录 前言 初识express 使用express创建基本的web服务器 初识express路由 路由匹配概念 路由模块化 中间件 中间件和路由的区别 定义中间件函数 中间件作用 …
-
rosbag命令 | EVO工具 的使用
目录 一 rosbag录制及查看 1 rosbag话题录制 2 rosbag信息查看 3 rosbag转换格式（bag2txt） 4 rosbag截取录制时间 二 EVO工具使用…
-
JS设置和读取全局变量的9种方式
vue2项目我遇到了这个问题：public文件夹下的文件需要获取用户Token 直接上代码： 使用html5中的localStorage (localStorage对象中存储的数据…
-
前端错误收集与处理
前言 做好错误监控，将用户使用时的错误日志上报，可以帮助我们更快的解决一些问题。 那前端监控是怎么实现的呢？要想了解这个，需要知道前端错误大概分为哪些以及如何捕获处理。 前端错误分…
-
ERR
项目场景： 提示：这里简述项目相关背景： ERR_FAILED 200 解决方案 问题描述 提示：这里描述项目中遇到的问题： 在chrome的网络调试器中，我可以读到文件大小估计为…
-
Java | interface 和 implements关键字【接口，看这篇就够了】
学完继承、学完多态，但面对汹涌而来🌊的接口，相信很多同学都不知所措，因此我耗费几天几夜的时间，搜寻大量书籍资料，苦心闭关钻研，写出了一篇关于Java的接口从入门小白…
-
第五章 数据结构与算法——八大排序
目录 一、排序的概念及其运用 二、八大排序的原理及其实现（升序为例） （一）、直接插入排序 （二）、希尔排序（也叫缩小增量排序）（重要） 1.原理： 2.该排序一般分为两个步骤： …
](/img/cf/9da9423e499c4bc788a2119b5ba44f5a.png)
