无关文件删除
This commit is contained in:
@@ -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>
|
||||
@@ -1,332 +0,0 @@
|
||||
<template>
|
||||
|
||||
<!-- 绑定父组件class:videoWindow -->
|
||||
<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-UDP,1-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-UDP,1-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>
|
||||
@@ -1,397 +0,0 @@
|
||||
<template>
|
||||
|
||||
<!-- 绑定父组件class:videoWindow -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user