kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

构建版本修改

Browse Source
This commit is contained in:
aixianling
2022-08-12 11:20:51 +08:00
parent c3f6fbbffe
commit 98946c1e28
167 changed files with 845 additions and 3473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/AiMonitor/AiMonitor.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<section class="AiMonitor">
<template v-if="type=='cmcc'">
<iframe :src="src" allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency
allowusermedia frameBorder="no"/>
</template>
<hikversion-monitor v-else-if="type=='hik'" :src="src"/>
<dhVideo v-else-if="type=='dahua'" :src="src"/>
<slwVideo v-else-if="type=='slw'" :src="src"/>
</section>
</template>
<script>
import HikversionMonitor from "./hikversionMonitor";
import dhVideo from "./dhVideo";
import slwVideo from "./slwVideo";
export default {
name: "AiMonitor",
components: {HikversionMonitor, dhVideo, slwVideo},
props: {
/**
* 视频源
*/
src: {default: ""},
/**
* 组件类型
* cmcc 中移物联,hik 海康威视
* @values cmcc,hik
*/
type: {default: "cmcc"},
}
}
</script>
<style lang="scss" scoped>
.AiMonitor {
width: 100%;
height: 100%;
min-width: 100px;
min-height: 60px;
iframe {
width: 100%;
height: 100%;
}
}
</style>

85
components/AiMonitor/dhVideo.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<div class="dh-video" style="height: 100%;">
<video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
<source :src="src">
</video>
</div>
</template>
<script>
export default {
props: ['src'],
data() {
return {
id: `video-${Math.ceil(Math.random() * 1000000)}`
}
},
methods: {
loadLib() {
const promise = url => new Promise(resolve => this.$injectLib(url, () => resolve())),
promiseCss = url => new Promise(resolve => this.$injectCss(url, () => resolve()))
return Promise.all([
promiseCss("//cdn.cunwuyun.cn/videojs/video-js.min.css"),
promise("//cdn.cunwuyun.cn/videojs/video.min.js"),
promise("//cdn.cunwuyun.cn/videojs/videojs-contrib-hls.js"),
])
},
initVideoJs(count = 0) {
if (!!videojs) {
videojs(this.id, {
autoplay: true
}, function () {
console.log('videojs播放器初始化成功')
})
} else if (count < 10) {
setTimeout(() => this.initVideoJs(), 200)
} else console.error("videojs加载失败!")
}
},
watch: {
src: {
handler(val) {
if (val) {
this.initVideoJs()
}
},
immediate: true,
deep: true
}
},
created() {
this.loadLib()
},
}
</script>
<style lang="scss" scoped>
.dh-video {
width: 100%;
height: 100%;
.video-js {
width: 100% !important;
height: 100% !important;
}
::v-deep .video-js {
width: 100% !important;
height: 100% !important;
.vjs-big-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
& > div {
width: 100% !important;
height: 100% !important;
}
}
</style>

169
components/AiMonitor/hikversionMonitor.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<section class="hikversionMonitor">
<div id="monitorIns">
<el-link v-if="needSetupPlugin" href="https://cdn.cunwuyun.cn/wsr/lib/VideoWebPlugin.exe" type="primary">
请检查是否安装视频插件,如果没有请点击下载视频插件并安装
</el-link>
<div v-else>视频插件未启动，正在尝试启动，请稍候...</div>
</div>
</section>
</template>
<script>
export default {
name: "hikversionMonitor",
props: {
src: {default: ""},
list: {default: () => []}
},
data() {
return {
monitorIns: null,
initCount: 0
}
},
computed: {
needSetupPlugin() {
return this.initCount >= 3
}
},
methods: {
getMonitorWidth() {
let {width} = document.querySelector("#monitorIns")?.getBoundingClientRect()
return width
},
getMonitorHeight() {
let {height} = document.querySelector("#monitorIns")?.getBoundingClientRect()
return height
},
initSDK() {
this.$nextTick(() => {
let width = this.getMonitorWidth(), height = this.getMonitorHeight()
if (width) {
this.monitorIns = new WebControl({
szPluginContainer: "monitorIns", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: () => { // 创建WebControl实例成功
this.monitorIns.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(() => { // 启动插件服务成功
this.monitorIns.JS_CreateWnd("monitorIns", width, height).then(() => { //JS_CreateWnd创建视频播放窗口，宽高可设定
this.monitorIns.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then((oData) => {
if (oData.responseMsg.data) {
let encrypt = new JSEncrypt();
encrypt.setPublicKey(oData.responseMsg.data);
let secret = encrypt.encrypt("JSqHo9JUgPLQxfCIjsmQ");
this.monitorIns.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: "23335895", //API网关提供的appkey
secret, //API网关提供的secret
ip: "124.128.246.74", //API网关IP地址
playMode: 0, //初始播放模式：0-预览，1-回放
port: 1443, //端口
snapDir: ".", //抓图存储路径
videoDir: ".", //紧急录像或录像剪辑存储路径
layout: "1x1", //布局
enableHTTPS: 1, //是否启用HTTPS协议
encryptedFields: "secret", //加密字段
showToolbar: 1, //是否显示工具栏
showSmart: 1, //是否显示智能信息
buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769" //自定义工具条按钮
})
}).then(() => {
this.monitorIns.JS_Resize(width, height); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
this.startPreview()
})
}
})
});
}, (...args) => {
// 启动插件服务失败
console.log(args)
})
},
cbConnectError: () => {
this.monitorIns = null
WebControl.JS_WakeUp("VideoWebPlugin://");
this.initCount++
if (!this.needSetupPlugin) {
setTimeout(() => {
this.initSDK()
}, 3000)
}
}
})
}
})
},
startPreview() {
const layout = len =>
len <= 1 ? '1x1' :
len == 2 ? '1x2' :
len == 3 ? '1+2' :
len == 4 ? '2x2' :
len < 6 ? '1+5' :
len == 7 ? '3+4' :
len == 8 ? '1+7' :
len == 9 ? '3x3' :
len == 10 ? '1+9' :
len <= 16 ? '4x4' : '4x6'
let list = this.src?.split(",")
this.monitorIns?.JS_RequestInterface({
funcName: "setLayout",
argument: JSON.stringify({layout: layout(list.length)})
}).then(() => {
this.monitorIns?.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: JSON.stringify({
list: list.map((cameraIndexCode, i) => ({
cameraIndexCode, //监控点编号
streamMode: 0, //主子码流标识
transMode: 1, //传输协议
gpuMode: 0, //是否开启GPU硬解
wndId: i + 1 //可指定播放窗口
}))
})
})
})
},
},
watch: {
src(v) {
v && this.monitorIns?.JS_RequestInterface({funcName: "stopAllPreview"}).then(() => this.startPreview())
}
},
mounted() {
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsencrypt.min.js")
this.$injectLib("https://cdn.cunwuyun.cn/wsr/lib/jsWebControl-1.0.0.min.js", () => {
this.initSDK()
})
},
beforeDestroy() {
this.monitorIns?.JS_DestroyWnd()
}
}
</script>
<style lang="scss" scoped>
.hikversionMonitor {
color: #fff;
height: 100%;
#monitorIns {
height: 100%;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

90
components/AiMonitor/slwVideo.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div class="slw">
<iframe
v-if="isShow"
:id="id"
allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
style="width: 100%; height: 100%;"
:src="`https://cdn.cunwuyun.cn/jssdk/slw/index.html?url=${src}`"></iframe>
</div>
</template>
<script>
export default {
props: ['src'],
name: 'slwVideo',
data () {
return {
isShow: true,
id: `video-${new Date().getTime()}`
}
},
watch: {
src: {
handler (val) {
if (val) {
this.isShow = false
this.$nextTick(() => {
this.isShow = true
})
}
},
immediate: true,
deep: true
}
},
mounted () {
window.addEventListener('message', e => {
if (e.data.type && e.data.name === 'fullscreen') {
this.requestFullScreen(document.getElementById(this.id))
}
if (!e.data.type && e.data.name === 'fullscreen') {
this.exitFullscreen()
}
}, false)
},
methods: {
exitFullscreen () {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
},
requestFullScreen (element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== 'undefined') {
var wscript = new ActiveXObject('WScript.Shell')
if (wscript !== null) {
wscript.SendKeys('{F11}')
}
}
}
}
}
</script>
<style lang="scss" scoped>
.slw {
width: 100%;
height: 100%;
iframe {
border: none;
}
}
</style>