‘daijinzheng@xingtongworld.com’
2 years ago
9 changed files with 815 additions and 100 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div id="player" class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<!-- <video class="demo-video" ref="player" muted autoplay></video> --> |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src2" :poster="poster" /> --> |
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src3" :poster="poster" /> --> |
|||
</div> |
|||
<!-- <div class="item"></div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initPlayer() |
|||
}) |
|||
this.getVideo() |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new window.JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: '../../../src/utils/h5player.min.js' |
|||
|
|||
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
// iWidth: 600, |
|||
// iHeight: 400, |
|||
|
|||
// // 分屏播放，默认最大分屏4*4 |
|||
// iMaxSplit: 16, |
|||
// iCurrentSplit: 1, |
|||
|
|||
// // 样式 |
|||
// oStyle: { |
|||
// border: '#343434', |
|||
// borderSelect: '#FFCC00', |
|||
// background: '#000' |
|||
// } |
|||
}) |
|||
this.initPlugin() |
|||
}, |
|||
/** |
|||
* 事件初始化 |
|||
*/ |
|||
initPlugin() { |
|||
this.player.JS_SetWindowControlCallback({ |
|||
windowEventSelect(iWindIndex) { |
|||
// 插件选中窗口回调 |
|||
console.log('windowSelect callback: ', iWindIndex) |
|||
}, |
|||
pluginErrorHandler(iWindIndex, iErrorCode, oError) { |
|||
// 插件错误回调 |
|||
console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError) |
|||
}, |
|||
windowEventOver(iWindIndex) { |
|||
// 鼠标移过回调 |
|||
console.log('鼠标移过回调', iWindIndex) |
|||
}, |
|||
windowEventOut(iWindIndex) { |
|||
// 鼠标移出回调 |
|||
console.log('鼠标移出回调', iWindIndex) |
|||
}, |
|||
windowFullCcreenChange(bFull) { |
|||
// 全屏切换回调 |
|||
console.log('全屏切换回调', bFull) |
|||
}, |
|||
firstFrameDisplay(iWndIndex, iWidth, iHeight) { |
|||
// 首帧显示回调 |
|||
console.log('首帧显示回调', iWndIndex, iWidth, iHeight) |
|||
}, |
|||
performanceLack(iWndIndex) { |
|||
// 性能不足回调 |
|||
console.log('性能不足回调', iWndIndex) |
|||
} |
|||
}) |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
let preUrl = 'rtsp://192.168.66.13:554/openUrl/5jhuK3e' // 播放地址 |
|||
const param = { |
|||
playURL: preUrl, |
|||
// 1：高级模式 0：普通模式，高级模式支持所有 |
|||
mode: 1 |
|||
} |
|||
// 当前播放窗口下标 |
|||
let index = 0 |
|||
console.log(this.playerArr) |
|||
console.log(this.player); |
|||
this.player.JS_Play(preUrl, param, index).then( |
|||
() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
} |
|||
) |
|||
}, |
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,348 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd" |
|||
v-html="oWebControl === null ? playText : ''"></div> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
export default { |
|||
props: { |
|||
// 内网、公网 4个配置 |
|||
// appkey: { |
|||
// type: "String", |
|||
// default: "29940726", |
|||
// }, |
|||
// secret: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// ip: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// port: { |
|||
// type: "Number", |
|||
// default: 8888, |
|||
// }, |
|||
// 视频布局 |
|||
// layout: { |
|||
// type: "String", |
|||
// default: "1x1", |
|||
// }, |
|||
// 初始播放模式：0-预览，1-回放 |
|||
// playMode: { |
|||
// type: "Number", |
|||
// default: 0, |
|||
// }, |
|||
// 是否显示工具栏，0-不显示，非0-显示 |
|||
showToolbar: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 工具栏按钮 |
|||
toolBarButtonIDs: { |
|||
type: String, |
|||
default: "4098,4097", |
|||
}, |
|||
// 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
showSmart: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 自定义工具条按钮 |
|||
buttonIDs: { |
|||
type: String, |
|||
default: "0,16,256,257,258,259,260,512,515,516,517,768,769", |
|||
}, |
|||
// 相机编号 |
|||
cameraIndexCode: { |
|||
type: [String, Number], |
|||
}, |
|||
// 销毁并重新初始化海康插件 |
|||
refresh: { |
|||
type: Number, |
|||
}, |
|||
// 视频播放容器id |
|||
containerId: { |
|||
type: String, |
|||
default: "playWnd", |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
oWebControl: null, |
|||
plugKey: "", |
|||
// 视频相关参数 |
|||
videoParams: { |
|||
cameraIndexCode: "", //监控点编号 |
|||
streamMode: 0, //主子码流标识：0-主码流，1-子码流 |
|||
transMode: 1, //传输协议：0-UDP，1-TCP |
|||
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 |
|||
wndId: 1, //播放窗口序号 |
|||
}, |
|||
videoWidth: null, |
|||
videoHeight: null, |
|||
playText: "启动中...", |
|||
initCount: 0, // 启动次数 |
|||
href: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getPluginUrl(); |
|||
this.createdVideo(); |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
}); |
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", this.windowResize); |
|||
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 |
|||
window.addEventListener("scroll", this.windowScroll); |
|||
}, |
|||
watch: { |
|||
// 监听相机编码 |
|||
cameraIndexCode(value) { |
|||
if (value) { |
|||
this.videoParams.cameraIndexCode = value.trim(); |
|||
this.videoParams.wndId = -1; |
|||
if (this.oWebControl) { |
|||
this.previewVideo(); |
|||
} else { |
|||
this.createdVideo(); |
|||
} |
|||
} |
|||
}, |
|||
// 刷新 |
|||
refresh() { |
|||
this.destroyeWnd(); |
|||
setTimeout(() => { |
|||
this.createdVideo(); |
|||
}, 0); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取海康插件下载地址 |
|||
getPluginUrl() { |
|||
return '' |
|||
// getList(1, 999).then(res => { |
|||
// if (res.data.code === 200) { |
|||
// const data = res.data.data.records; |
|||
// data.length |
|||
// if (data.length) { |
|||
// let existArr = data.filter(item => item.paramKey === ""); |
|||
// if (existArr.length) { |
|||
// this.href = existArr[0].paramValue; |
|||
// } |
|||
// } |
|||
// } |
|||
// }).catch(err => { |
|||
// // 报错 |
|||
// console.log(err) |
|||
// }) |
|||
; |
|||
}, |
|||
// 初始化+预览 |
|||
createdVideo() { |
|||
this.initPlugin(() => { |
|||
this.previewVideo(); |
|||
}); |
|||
}, |
|||
// 创建播放实例 |
|||
initPlugin(callback) { |
|||
this.oWebControl = new WebControl({ |
|||
szPluginContainer: this.containerId, // 指定容器id |
|||
iServicePortStart: 15900, |
|||
iServicePortEnd: 15909, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
// 创建WebControl实例成功 |
|||
cbConnectSuccess: () => { |
|||
this.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then(() => { |
|||
// 启动插件服务成功 |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
this.oWebControl |
|||
.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight) |
|||
.then(() => { |
|||
this.getVersion(callback); |
|||
}); |
|||
}); |
|||
}, |
|||
cbConnectError: () => { |
|||
// 创建WebControl实例失败 |
|||
this.oWebControl = null; |
|||
this.playText = "插件未启动，正在尝试启动，请稍候..."; |
|||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(() => { |
|||
this.initPlugin(); |
|||
}, 2000); |
|||
} else { |
|||
this.playText = ` |
|||
插件启动失败，请检查插件是否安装！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
this.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 消息回调 |
|||
cbIntegrationCallBack() { }, |
|||
// 初始化 |
|||
init(callback) { |
|||
this.getPubKey(() => { |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: '29940726', //API网关提供的appkey |
|||
secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret |
|||
ip: this.ip, //API网关IP地址z |
|||
playMode: this.playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: this.port, //端口 |
|||
snapDir: "C:\\SnapDir", //抓图存储路径 |
|||
videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径 |
|||
layout: this.layout, //布局 |
|||
enableHTTPS: 1, //是否启用HTTPS协议 |
|||
encryptedFields: "secret", //加密字段 |
|||
showToolbar: this.showToolbar, //是否显示工具栏 |
|||
toolBarButtonIDs: this.toolBarButtonIDs, |
|||
showSmart: this.showSmart, //是否显示智能信息 |
|||
buttonIDs: this.buttonIDs, //自定义工具条按钮 |
|||
protocol: "hls", |
|||
}), |
|||
}) |
|||
.then(() => { |
|||
// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
const params = { |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ keyLength: 1024 }), |
|||
}; |
|||
this.oWebControl.JS_RequestInterface(params).then((res) => { |
|||
if (res.responseMsg.data) { |
|||
this.plugKey = res.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// 视频流RSA加密 |
|||
// setEncrypt(value) { |
|||
// const encrypt = new JSEncrypt(); |
|||
// encrypt.setPublicKey(this.plugKey); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
// 视频预览 |
|||
previewVideo() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify(this.videoParams), |
|||
}); |
|||
}, |
|||
// 显示全屏 |
|||
showFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "setFullScreen", |
|||
}); |
|||
}, |
|||
// 退出全屏 |
|||
exitFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "exitFullScreen", |
|||
}); |
|||
}, |
|||
windowScroll() { |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
windowResize() { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
// 销毁海康插件 |
|||
destroyeWnd() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl.JS_Disconnect().then(() => { }); |
|||
} |
|||
}, |
|||
// 获取海康插件版本号 |
|||
getVersion(callback) { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "getVersion", |
|||
}).then(res => { |
|||
if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
this.init(callback); // 创建播放实例成功后初始化 |
|||
console.log("启动插件成功！"); |
|||
} else { |
|||
this.destroyeWnd(); |
|||
this.playText = ` |
|||
插件版本不正确，请重新下载版本安装覆盖！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl |
|||
.JS_DestroyWnd({ |
|||
funcName: "destroyeWnd", |
|||
}) |
|||
.then(() => { }); |
|||
} |
|||
document.removeEventListener("resize", this.windowResize); |
|||
document.removeEventListener("scroll", this.windowScroll); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue