无关文件删除

This commit is contained in:
2025-12-31 17:26:28 +08:00
parent 0bd3629190
commit a8b781d48a
3 changed files with 0 additions and 839 deletions

View File

@@ -1,110 +0,0 @@
<template>
<!-- flv视频流播放 -->
<div>
<video
v-if="show"
id="videoElement"
:controls="true"
autoplay
style="width: 100%; height: 100%; object-fit: fill;">
</video>
<el-empty v-else :image="getAssetsFile('lbtmenu/icon-UAV-inner.png')" description="无人机暂未起飞" />
</div>
</template>
<script setup>
import {
ref, defineExpose, nextTick
} from 'vue'
import flvjs from 'flv.js'
import { getAssetsFile } from '@/utils/common.js'
const emit = defineEmits([ 'toggleShow' ])
let flvPlayer = null
const show = ref(false)
const clear = () => {
if (flvPlayer) {
flvPlayer.unload()
flvPlayer.detachMediaElement()
flvPlayer = null
}
}
const onPlay = (url) => {
show.value = true
nextTick(() => {
if (flvjs.isSupported()) {
const videoElement = document.getElementById('videoElement')
clear()
flvPlayer = flvjs.createPlayer(
{
type: 'flv',
isLive: true,
hasAudio: false,
url
},
{
// 启用IO隐藏缓冲区
// 如果需要实时(最小延迟)来进行实时流播放,则设置为false
// 但是如果网络抖动,则可能会停顿
enableStashBuffer: false,
// 之时IO暂存缓冲区的初始大小,默认值为384kb,指出合适的尺寸可以改善视频负载/搜索时间
stashInitialSize: 128
}
)
flvPlayer.attachMediaElement(videoElement)
flvPlayer.load()
flvPlayer.play()
emit('toggleShow', show.value)
flvPlayer.on('error', () => {
console.log('errorrrrrrrrrrrrrrrrrrrrrrrr')
show.value = false
flvPlayer.pause()
if (flvPlayer) {
flvPlayer = null
}
emit('toggleShow', show.value)
})
}
})
}
defineExpose({
onPlay
})
</script>
<style scoped>
:deep .el-empty__image{
width: 60px;
height: 60px;
}
:deep .el-empty__description p{
color:#fff;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {
display: none;
}
/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display{
display: none;
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
display: none;
}
/* 音量按钮 */
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
display: none;
}
</style>

View File

@@ -1,332 +0,0 @@
<template>
<!-- 绑定父组件classvideoWindow -->
<div
:id="playWndId"
ref="video-preview">
</div>
</template>
<script>
/* eslint-disable */
export default {
name: 'video-preview',
data() {
return {
width: 0,
height: 0,
secret: '',
oWebControl: null,
initCount: 0,
appkey: import.meta.env.VITE_APP_HAIKANG_APPKEY,
ip: import.meta.env.VITE_APP_HAIKANG_IP,
port: parseInt(import.meta.env.VITE_APP_HAIKANG_PORT),
playMode: 1,
pubKey: '',
isInit: false
}
},
props: {
layout: {
type: String,
default: () => '1x1'
},
cameraIndexCode: {},
timeOut: {
type: Number,
default: () => 500
},
videoWindowClassName: {
type: String,
default: "videoWindow",
required: false
},
playWndId: {
type: String,
default: "playWnd",
required: false
}
},
mounted() {
var that = this
this.$nextTick(function() {
that.windowChange()
setTimeout(() => {
that.initPlugin()
}, that.timeOut)
window.addEventListener('resize', function() {
that.onResize()
})
})
},
destroyed() {
this.uninit()
},
methods: {
onResize(change=true){
let that = this
if (that.oWebControl) {
if(change){
that.windowChange()
}
that.oWebControl.JS_Resize(that.width, that.height)
}
},
wait (fn, timeout, tick) {
timeout = timeout || 5000;
tick = tick || 250;
var timeoutTimer = null;
var execTimer = null;
return new Promise(function(resolve, reject) {
timeoutTimer = setTimeout(function() {
clearTimeout(execTimer);
reject(new Error('polling fail because timeout'));
}, timeout);
tickHandler(fn);
function tickHandler(fn) {
var ret = fn();
if (!ret) {
execTimer = setTimeout(function() {
tickHandler(fn);
}, tick)
} else {
clearTimeout(timeoutTimer);
resolve();
}
}
});
},
// 初始化plugin
initPlugin() {
let that = this
this.oWebControl = new WebControl({
szPluginContainer: this.playWndId,
iServicePortStart: 15900,
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() {
that.setCallbacks();
//实例创建成功后需要启动服务
that.oWebControl
.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
})
.then(
function() {
that.oWebControl
.JS_CreateWnd(that.playWndId, that.width, that.height)
.then(function() {
//JS_CreateWnd创建视频播放窗口宽高可设定
that.init(); //创建播放实例成功后初始化
});
},
function() {}
);
},
cbConnectError: function() {
that.oWebControl = null;
$("#" + that.playWndId).html("插件未启动,正在尝试启动,请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数采用wakeup来启动程序
initCount++;
if (initCount < 3) {
setTimeout(function() {
that.initPlugin();
}, 2000);
} else {
$("#" + that.playWndId).html("插件启动失败,请检查插件是否安装!");
}
},
cbConnectClose: function(bNormalClose) {
that.oWebControl = null
}
})
},
init() {
let that = this;
that.getPubKey(function() {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
var snapDir = "d:\\SnapDir"; //抓图存储路径
var videoDir = "d:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互是为1否为0
var encryptedFields = "secret"; //加密字段默认加密领域为secret
var showToolbar = 1; //是否显示工具栏0-不显示非0-显示
var showSmart = 1; //是否显示智能信息如配置移动侦测后画面上的线框0-不显示非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,515,516,517,768,769"; //自定义工具条按钮
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
that.secret = that.setEncrypt(import.meta.env.VITE_APP_HAIKANG_SECRET);
that.oWebControl
.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: that.appkey, //API网关提供的appkey
secret: that.secret, //API网关提供的secret
ip: that.ip, //API网关IP地址
playMode: that.playMode, //播放模式(决定显示预览还是回放界面)
port: that.port, //端口
snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs //自定义工具条按钮
})
})
.then(function(oData) {
that.oWebControl.JS_Resize(that.width, that.height); // 初始化后resize一次规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
},
// 获取公钥
getPubKey(callback) {
var that = this
this.oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
}).then(function(oData) {
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data
that.isInit = true
callback()
}
})
},
// 设置窗口控制回调
setCallbacks() {
let that = this;
that.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: function (oData) {
if(oData.responseMsg.msg.result === 816){
that.$emit('close')
}
}
});
},
// RSA加密
setEncrypt(value) {
let that = this;
var encrypt = new JSEncrypt();
encrypt.setPublicKey(that.pubKey);
return encrypt.encrypt(value);
},
ready() {
let that = this;
return new Promise((resolve, reject) => {
this.wait(
function() {
return that.isInit;
},
6000 + that.timeOut || 500,
100
)
.then(function() {
resolve();
})
.catch(function(err) {
// that.$Message.info({
// content: "视频控件加载超时,请检查:" + err,
// duration: 3
// });
// reject("视频控件加载超时,请检查:" + err);
});
});
},
playBack(codes, startTime, endTime) {
let that = this;
const startTimeStamp = this.timrStr2Stamp(startTime) + "";
const endTimeStamp = this.timrStr2Stamp(endTime) + "";
var recordLocation = 0; //录像存储位置0-中心存储1-设备存储
var transMode = 1; //传输协议0-UDP1-TCP
var gpuMode = 0; //是否启用GPU硬解0-不启用1-启用
var wndId = -1; //播放窗口序号在2x2以上布局下可指定播放窗口
that.oWebControl
.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: codes, //监控点编号
startTimeStamp: startTimeStamp, //录像查询开始时间戳,单位:秒
endTimeStamp: endTimeStamp, //录像结束开始时间戳,单位:秒
recordLocation: recordLocation, //录像存储类型0-中心存储1-设备存储
transMode: transMode, //传输协议0-UDP1-TCP
gpuMode: gpuMode, //是否启用GPU硬解0-不启用1-启用
wndId: wndId //可指定播放窗口
})
})
.then(res => {
console.log("回放的参数", res);
});
},
timrStr2Stamp(str) {
let date = new Date(str);
let time = date.getTime();
return time / 1000;
},
stopPlayBack() {
this.oWebControl.JS_RequestInterface({
funcName: "stopAllPlayback"
});
},
uninit() {
console.log(999);
let that = this;
if (that.oWebControl != null) {
that.oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
});
that.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
that.oWebControl.JS_Disconnect().then(
function() {
// 断开与插件服务连接成功
},
function() {
// 断开与插件服务连接失败
console.log("oWebControl close error");
}
);
that.oWebControl = null;
}
},
windowChange() {
//列表选项在下方
this.width = document.getElementsByClassName(
this.videoWindowClassName
)[0].scrollWidth;
var btnHeight = 0;
if (document.getElementsByClassName("playBtn").length > 0) {
btnHeight = document.getElementsByClassName("playBtn")[0].clientHeight;
this.height =
document.getElementsByClassName(this.videoWindowClassName)[0]
.scrollHeight -
btnHeight -
10;
} else {
this.height = document.getElementsByClassName(
this.videoWindowClassName
)[0].scrollHeight;
}
if (document.getElementById(this.playWndId)) {
document.getElementById(this.playWndId).style.height = this.height + "px";
document.getElementById(this.playWndId).style.width = this.width + "px";
}
}
}
}
</script>
<style scoped>
</style>

View File

@@ -1,397 +0,0 @@
<template>
<!-- 绑定父组件classvideoWindow -->
<div
:id="`playWnd${item}`"
ref="video-preview">
</div>
</template>
<script>
/* eslint-disable */
export default {
name: 'video-preview',
data() {
return {
index: 0,
width: 0,
height: 0,
secret: import.meta.env.VITE_APP_HAIKANG_SECRET,
streamMode: 0, // 主子码流标识 1:子码流 0:主码流
transMode: 1, // 传输协议 1:TCP 0:UDP
gpuMode: 0, // 是否启用GPU硬解
oWebControl: {},
initCount: 0,
appkey: import.meta.env.VITE_APP_HAIKANG_APPKEY,
ip: import.meta.env.VITE_APP_HAIKANG_IP,
port: parseInt(import.meta.env.VITE_APP_HAIKANG_PORT),
snapDir: 'D:\\SnapDir',
videoDir: 'D:\\VideoDir',
playMode: 0,
szShowToolbar: 1, // 显示工具栏,
szShowSmart: 1, // 显示智能信息=
btIds: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', // 工具条按钮ID集
pubKey: '',
enableHttps: 1, // 是否启用https
showToolbar: 1,
showSmart: 1,
specialCodes: [
],
encryptedFields: 'secret',
isInit: false
}
},
props: {
layout: {
type: String,
default: () => '1x1'
},
cameraIndexCode: {},
timeOut: {
type: Number,
default: () => 500
},
item:{
type: String,
default: () => '0'
},
iframe:{
type: Object,
default: () => {}
}
},
mounted() {
var that = this
this.$nextTick(function() {
that.windowChange()
setTimeout(() => {
that.initPlugin()
}, that.timeOut)
window.addEventListener('resize', function() {
that.onResize()
})
})
},
destroyed() {
this.uninit()
},
methods: {
onResize(change=true){
let that = this
if (that.oWebControl) {
if(change){
that.windowChange()
}
that.oWebControl.JS_Resize(that.width, that.height)
}
},
wait (fn, timeout, tick) {
timeout = timeout || 5000;
tick = tick || 250;
var timeoutTimer = null;
var execTimer = null;
return new Promise(function(resolve, reject) {
timeoutTimer = setTimeout(function() {
clearTimeout(execTimer);
reject(new Error('polling fail because timeout'));
}, timeout);
tickHandler(fn);
function tickHandler(fn) {
var ret = fn();
if (!ret) {
execTimer = setTimeout(function() {
tickHandler(fn);
}, tick)
} else {
clearTimeout(timeoutTimer);
resolve();
}
}
});
},
setLayout(layout = '1x1') {
return new Promise((resolve, reject) => {
if (!this.isInit) {
reject('未完成视频插件初始化')
}
this.oWebControl.JS_RequestInterface({
funcName: 'setLayout',
argument: JSON.stringify({
'layout': layout
})
}).then(function(oData) {
resolve()
})
})
},
// 初始化plugin
initPlugin() {
let that = this
this.oWebControl = new WebControl({
szPluginContainer: `playWnd${that.item}`,
iServicePortStart: 15900,
iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function() {
that.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: function (oData) {
if(oData.responseMsg.msg.result === 1024){
that.oWebControl.JS_HideWnd();
}
if(oData.responseMsg.msg.result === 1025){
that.oWebControl.JS_ShowWnd();
}
if(oData.responseMsg.msg.result === 816){
that.$emit('close',oData,that.item)
}
}
});
that.oWebControl.JS_StartService('window', {
dllPath: './VideoPluginConnect.dll'
}).then(function() {
that.oWebControl.JS_CreateWnd(`playWnd${that.item}`, that.width, that.height).then(function() {
console.log('视频plugin创建成功,进行interface初始化')
// ue嵌入页面视频窗口偏移
if(that.iframe){
that.oWebControl.JS_SetDocOffset ({
left: that.iframe.left,
top: that.iframe.top
})
}
that.initInterface()
})
})
},
cbConnectError: function() {
console.log('cbConnectError')
this.oWebControl = null
WebControl.JS_WakeUp('VideoWebPlugin://')
that.initCount++
if (that.initCount < 3) {
setTimeout(that.initPlugin, 2000)
} else {
that.isInit = false
that.$message.error('插件启动失败请检查VideoWebPlugin.exe插件是否安装')
}
},
cbConnectClose: function(bNormalClose) {
console.log('cbConnectClose')
that.isInit = false
that.oWebControl = null
}
})
},
setEncrypt(value) {
// RSA加密
var encrypt = new JSEncrypt()
encrypt.setPublicKey(this.pubKey)
return encrypt.encrypt(value)
},
//初始化interface
initInterface() {
let that = this
this.btIds = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'
this.getPubKey(function() {
that.oWebControl.JS_RequestInterface({
funcName: 'init',
argument: JSON.stringify({
appkey: that.appkey,
secret: that.secret,
ip: that.ip,
playMode: that.playMode, // 预览
port: that.port,
snapDir: that.snapDir,
videoDir: that.videoDir,
layout: that.layout,
enableHTTPS: that.enableHttps,
showToolbar: that.showToolbar,
showSmart: that.showSmart,
buttonIDs: that.btIds,
//encryptedFields: that.encryptedFields
})
}).then(function(oData) {
that.isInit = true
that.oWebControl.JS_Resize(that.width, that.height) // 初始化后resize一次规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
that.handlePreview(that.cameraIndexCode)
})
})
},
// 获取公钥
getPubKey(callback) {
var that = this
this.oWebControl.JS_RequestInterface({
funcName: 'getRSAPubKey',
argument: JSON.stringify({
keyLength: 1024
})
}).then(function(oData) {
if (oData.responseMsg.data) {
that.pubKey = oData.responseMsg.data
callback()
}
})
},
multiVideos(videos) {
let that = this
let last = videos[videos.length - 1]
return new Promise((resole, reject) => {
let intervalVideo = (clips) => {
if (clips instanceof Array && clips.length > 0) {
let clipLength = clips.length
let clip = clips[0]
// 子码流特殊处理
let streamMode = that.streamMode
if(that.specialCodes.indexOf(clip) > -1) streamMode = 1
console.log(clip)
that.oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: clip,
streamMode: streamMode,
transMode: that.transMode,
gpuMode: that.gpuMode,
wndId: -1
})
}).then(function(oData) {
clips.shift()
if (oData.responseMsg.code == 0) {
if (clips.length) {
setTimeout(() => {
intervalVideo(clips)
}, 1000)
}
}else{
console.log(oData)
}
})
} else {
resole
}
}
intervalVideo(videos)
})
},
handlePreview(codes, startIdx = 1) { //startIdx 如果是多个 从第几个窗口开始加载
console.log(codes)
let that = this
if (!codes || codes=='' || codes.length==0)
return
if (Array.isArray(codes) && codes.length > 0) {
// let confs = codes.map((code, index) => {
// return {
// cameraIndexCode: code,
// streamMode: that.streamMode,
// transMode: that.transMode,
// gpuMode: that.gpuMode,
// wndId: startIdx + index //设置不对会报错
// }
// })
// that.oWebControl.JS_RequestInterface({
// funcName: 'startMultiPreviewByCameraIndexCode',
// argument: JSON.stringify({
// list: confs
// })
// })
this.onLoading = true
this.multiVideos(codes).then(()=>{
this.onLoading = false
})
} else if (typeof codes == 'string') {
// 子码流特殊处理
let streamMode = that.streamMode
if(that.specialCodes.indexOf(codes)>-1) streamMode = 1
that.oWebControl.JS_RequestInterface({
funcName: 'startPreview',
argument: JSON.stringify({
cameraIndexCode: codes,
streamMode: streamMode,
transMode: that.transMode,
gpuMode: that.gpuMode,
wndId: -1
})
})
}
},
uninit() {
let oWebControl = this.oWebControl
if (oWebControl != null) {
oWebControl.JS_RequestInterface({
funcName: 'stopAllPreview'
})
oWebControl.JS_HideWnd() // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_Disconnect()
.then(function() {
// 断开与插件服务连接成功
},
function() { // 断开与插件服务连接失败
console.log('oWebControl close error')
})
oWebControl = null
}
},
windowChange() {
//列表选项在左侧
// this.height = document.getElementsByClassName('videoWindow')[0].scrollHeight
// var btnWidth = 0
// if (document.getElementsByClassName('playBtn').length > 0) {
// btnWidth = document.getElementsByClassName('playBtn')[0].clientWidth
// this.width = document.getElementsByClassName('videoWindow')[0].scrollWidth - btnWidth - 5
// } else {
// this.width = document.getElementsByClassName('videoWindow')[0].scrollWidth
// }
//列表选项在下方
this.width = document.getElementsByClassName(`video-window${this.item}`)[0].scrollWidth
var btnHeight = 0
if (document.getElementsByClassName('playBtn').length > 0) {
btnHeight = document.getElementsByClassName('playBtn')[0].clientHeight
this.height = document.getElementsByClassName(`video-window${this.item}`)[0].scrollHeight - btnHeight - 10
} else {
this.height = document.getElementsByClassName(`video-window${this.item}`)[0].scrollHeight
}
if (document.getElementById(`playWnd${this.item}`)) {
document.getElementById(`playWnd${this.item}`).style.height = this.height + 'px'
document.getElementById(`playWnd${this.item}`).style.width = this.width + 'px'
}
},
hidePlugin() {
this.oWebControl.JS_HideWnd()
},
showPlugin() {
this.oWebControl.JS_ShowWnd()
},
ready() {
let that = this
return new Promise((resolve, reject) => {
this.wait(function() {
return that.isInit
}, 6000 + that.timeOut || 500, 100).then(function() {
resolve()
}).catch(function(err) {
that.$message.error({
content: '视频控件加载超时,请检查',
duration: 3
})
reject('视频控件加载超时,请检查')
})
})
}
}
}
</script>
<style scoped>
</style>