‘daijinzheng@xingtongworld.com’
3 years ago
3 changed files with 1564 additions and 1351 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,258 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
<!-- <video id="playWnd" autoplay></video> --> |
|||
<!--预览界面--> |
|||
<!-- <div id="operate" class="operate"> |
|||
<div class="module" style="color:#fff;"> |
|||
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""> |
|||
</div> |
|||
<div class="item" style="margin-top: 20px;margin-left: -20px;color:#fff;"> |
|||
|
|||
<button style="width:20px;padding:0;margin:0;color:#fff;" id="startPreview" class="btn">预览</button> |
|||
|
|||
<button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!--视频窗口展示--> |
|||
<video id="playWnd" autoplay></video> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
import $ from "jquery"; |
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
|
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
const oWebControl = new window.WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
console.log('111111111111'); |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
_that.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
console.log('启动插件服务失败'); |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose(bNormalClose) { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "28730366"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = _that.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填 |
|||
var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs: buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log(oData); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
getPubKey(callback) { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
if (oData.responseMsg.data) { |
|||
this.pubKey = oData.responseMsg.data; |
|||
console.log(this.pubKey); |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
//RSA加密 |
|||
setEncrypt(value) { |
|||
var encrypt = new window.JSEncrypt(); |
|||
encrypt.setPublicKey(this.pubKey); |
|||
return encrypt.encrypt(value); |
|||
}, |
|||
//视频预览功能 |
|||
getVideoFun(Code) { |
|||
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 |
|||
var cameraIndexCode = Code; //获取输入的监控点编号值，必填 |
|||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流 |
|||
var transMode = 1; //传输协议：0-UDP，1-TCP |
|||
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用 |
|||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
console.log(cameraIndexCode); |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode, //监控点编号 |
|||
streamMode: streamMode, //主子码流标识 |
|||
transMode: transMode, //传输协议 |
|||
gpuMode: gpuMode, //是否开启GPU硬解 |
|||
wndId: wndId, //可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
console.log(res); |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
}); |
|||
}, |
|||
//停止全部预览 |
|||
stopVideoFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， |
|||
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， |
|||
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 |
|||
destroyVideoDiv() { |
|||
this.oWebControl2.JS_DestroyWnd() |
|||
.then((data) => { |
|||
console.log("销毁窗口成功"); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("销毁窗口失败"); |
|||
}); |
|||
}, |
|||
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 |
|||
zhuaPicFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "snapShot", |
|||
argument: { |
|||
name: "D:\test.jpg", // 窗口布局 |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue