vue中使用HKPlayer播放器连接摄像头监控

效果图可以控制摄像头移动

代码

<template><div style="user-select: none;"><a-alert type="error" v-if="showErrorTips" :message="errorMessage" banner /><div :id="playerContainerId" :style="{ width: width + 'px', height: height + 'px' }"></div></div>
</template><script>
/* eslint-disable */
import * as JsEncryptModule from 'jsencrypt'
import UUID from '../../utils/UUID'import HKPlayerResize from './common/hkplayer-resize'import HKPlayerInitArgs from './common/hkplayer-init-args'export default {name: 'HKPlayer',mixins: [HKPlayerResize],props: {width: {type: Number,default: 984,},height: {type: Number,default: 600,},cameraIndexCodes: {type: Array,default: () => {return []},},},data() {return {playerContainerId: new UUID().id,oWebControl: undefined,showErrorTips: false,errorMessage: '',pubKey: undefined,initSuccess: false,playInterval: undefined,initCount: 0,currentCameraIndexCodes: this.cameraIndexCodes,defaultInitArgs: {//API网关提供的appkeyappkey: '27339437',//API网关提供的secretsecretKey: 'zATVBCzPOAAiHtnWBzAz',//API网关IP地址ip: '202.100.100.50',// ip: '172.168.101.31',//播放模式（决定显示预览还是回放界面）playMode: 0,//端口port: 4443,//抓图存储路径snapDir: 'D:\\SnapDir',//紧急录像或录像剪辑存储路径videoDir: 'D:\\VideoDir',//布局layout: '1x1',//是否启用HTTPS协议enableHTTPS: 1,//加密字段encryptedFields: 'secret',//是否显示工具栏showToolbar: 1,//是否显示智能信息showSmart: 1,//自定义工具条按钮buttonIDs: '0,256,257,258,259,260,512,513,514,515,516,517,768,769',},}},watch: {cameraIndexCodes(value) {this.currentCameraIndexCodes = value},},methods: {initPlugin() {const { playerContainerId, width, height } = thisthis.oWebControl = new WebControl({szPluginContainer: this.playerContainerId, // 指定容器idiServicePortStart: 15900, // 指定起止端口号，建议使用该值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: () => {// 创建WebControl实例成功this.oWebControl.JS_StartService('window', {// WebControl实例创建成功后需要启动服务dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死}).then(() => {// 启动插件服务成功this.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: this.cbIntegrationCallBack,})this.oWebControl.JS_CreateWnd(playerContainerId, width, height).then(() => {//JS_CreateWnd创建视频播放窗口，宽高可设定this.init() // 创建播放实例成功后初始化})},() => {// 启动插件服务失败this.showErrorTipsHandle('视频播放插件启动失败，未知错误！')})},cbConnectError: () => {// 创建WebControl实例失败this.oWebControl = undefinedthis.showErrorTipsHandle('插件未启动，正在尝试启动，请稍候...')WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序this.initCount++if (this.initCount < 3) {setTimeout(() => {this.initPlugin()}, 3000)} else {this.showErrorTipsHandle('插件启动失败，请检查插件是否安装！（安装插件后，请刷新当前页面）')}},cbConnectClose: function (bNormalClose) {// 异常断开：bNormalClose = false// JS_Disconnect正常断开：bNormalClose = truethis.oWebControl = undefined},})},init() {const { width, height } = thisthis.getPubKey(() => {const args = Object.assign(HKPlayerInitArgs, this.defaultInitArgs)args.secret = this.setEncrypt(this.defaultInitArgs.secretKey)//通过传入设备，设置播放窗口布局args.layout = this.getHKPlayLayout()this.oWebControl.JS_RequestInterface({funcName: 'init',argument: JSON.stringify(args),}).then((oData) => {this.oWebControl.JS_Resize(width, height) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题this.initSuccess = true})})},/*** 播放*/play() {this.clearPlayInterval()// 验证是否已经启动插件if (!this.oWebControl) {this.initPlugin()// 设置计时器 1s执行一次 验证初始化是否执行成功，this.playInterval = setInterval(() => {if (this.initSuccess) {this.clearPlayInterval()this.startPlay()}}, 1000)} else {// 需要判断播放流数量是否一致，不一致需要重设布局setTimeout(() => {this.setLayout()this.showWnd()this.startPlay()}, 300)}},setLayout() {this.oWebControl.JS_RequestInterface({funcName: 'setLayout',argument: JSON.stringify({layout: this.getHKPlayLayout(),}), // 窗口布局})},startPlay() {this.currentCameraIndexCodes.forEach((x, index) => {var cameraIndexCode = x.cameraIndexCode //获取输入的监控点编号值，必填var streamMode = 0 //主子码流标识：0-主码流，1-子码流var transMode = 1 //传输协议：0-UDP，1-TCPvar gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用var wndId = index + 1 //播放窗口序号（在2x2以上布局下可指定播放窗口）cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')this.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId, //可指定播放窗口}),})})},/*** 显示错误提示*/showErrorTipsHandle(message) {this.showErrorTips = truethis.errorMessage = message},/*** 消息回调*/cbIntegrationCallBack(oData) {//  console.log(oData)/*showCBInfo(JSON.stringify(oData.responseMsg))*/},/*** 获取公钥* @param callback*/getPubKey(callback) {this.oWebControl.JS_RequestInterface({funcName: 'getRSAPubKey',argument: JSON.stringify({keyLength: 1024,}),}).then((oData) => {if (oData.responseMsg.data) {this.pubKey = oData.responseMsg.datacallback()}})},/*** RSA加密* @param value*/setEncrypt(value) {var encrypt = new JsEncryptModule.JSEncrypt()encrypt.setPublicKey(this.pubKey)return encrypt.encrypt(value)},/*** 关闭播放链接*/disconnect() {if (this.oWebControl != null) {// this.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题this.oWebControl.JS_Disconnect().then(() => {// 断开与插件服务连接成功console.log('断开与插件服务连接成功')},() => {// 断开与插件服务连接失败console.log('断开与插件服务连接失败')})}},/*** 清楚播放监听任务*/clearPlayInterval() {if (this.playInterval) {clearInterval(this.playInterval)this.playInterval = undefined}},/*** 获取播放器layout*/getHKPlayLayout() {const length = this.currentCameraIndexCodes.lengthswitch (length) {case 0:return '1x1'case 1:return '1x1'case 2:return '1x2'case 3:return '1+2'case 4:return '2x2'case 5:return '1x4'case 6:return '1+5'case 7:return '3+4'case 8:return '1+7'case 9:return '3x3'case 10:return '1+9'default:return '4x4'}},/*** 弹窗关闭*/closeHandle() {this.clearPlayInterval()if (this.oWebControl) {this.hideWnd()// 停止所有预览this.oWebControl.JS_RequestInterface({funcName: 'stopAllPreview',})}},/*** 显示播放窗口*/showWnd() {this.oWebControl.JS_ShowWnd()},/*** 隐藏播放窗口*/hideWnd() {this.oWebControl.JS_HideWnd()},},beforeDestroy() {this.disconnect()this.clearPlayInterval()//  console.log('>>>>>>beforeDestroy')},
}
</script>

其中引入的文件 UUID.js

// On creation of a UUID object, set it's initial value
function UUID() {this.id = this.createUUID();
}// When asked what this Object is, lie and return it's value
UUID.prototype.valueOf = function () {return this.id;
}
UUID.prototype.toString = function () {return this.id;
}//
// INSTANCE SPECIFIC METHODS
//UUID.prototype.createUUID = function () {//// Loose interpretation of the specification DCE 1.1: Remote Procedure Call// described at// http://www.opengroup.org/onlinepubs/009629399/apdxa.htm#tagtcjh_37// since JavaScript doesn't allow access to internal systems, the last 48// bits// of the node section is made up using a series of random numbers (6 octets// long).//const dg = new Date(1582, 10, 15, 0, 0, 0, 0);const dc = new Date();const t = dc.getTime() - dg.getTime();const tl = UUID.getIntegerBits(t, 0, 31);const tm = UUID.getIntegerBits(t, 32, 47);const thv = UUID.getIntegerBits(t, 48, 59) + '1'; // version 1, security version is 2const csar = UUID.getIntegerBits(UUID.rand(4095), 0, 7);const csl = UUID.getIntegerBits(UUID.rand(4095), 0, 7);// since detection of anything about the machine/browser is far to buggy,// include some more random numbers here// if NIC or an IP can be obtained reliably, that should be put in// here instead.const n = UUID.getIntegerBits(UUID.rand(8191), 0, 7)+ UUID.getIntegerBits(UUID.rand(8191), 8, 15)+ UUID.getIntegerBits(UUID.rand(8191), 0, 7)+ UUID.getIntegerBits(UUID.rand(8191), 8, 15)+ UUID.getIntegerBits(UUID.rand(8191), 0, 15); // this last number is two octets longreturn tl + tm + thv + csar + csl + n;
}//
// GENERAL METHODS (Not instance specific)
//// Pull out only certain bits from a very large integer, used to get the time
// code information for the first part of a UUID. Will return zero's if there
// aren't enough bits to shift where it needs to.
UUID.getIntegerBits = function (val, start, end) {const base16 = UUID.returnBase(val, 16);let quadArray = [];let quadString = '';let i = 0;for (i = 0; i < base16.length; i++) {quadArray.push(base16.substring(i, i + 1));}for (i = Math.floor(start / 4); i <= Math.floor(end / 4); i++) {if (!quadArray[i] || quadArray[i] === '')quadString += '0';elsequadString += quadArray[i];}return quadString;
}// Replaced from the original function to leverage the built in methods in
// JavaScript. Thanks to Robert Kieffer for pointing this one out
UUID.returnBase = function (number, base) {return (number).toString(base).toUpperCase();
}// pick a random number within a range of numbers
// int b rand(int a); where 0 <= b <= a
UUID.rand = function (max) {return Math.floor(Math.random() * (max + 1));
}// end of UUID class fileexport default UUID;

rsa加密文件jsencrypt.js 可以npm install jsencrypt 引入

hkplayer-resize.js

/* eslint-disable */const hkPlayerResize = {mounted () {const { playerContainerId, width, height } = this// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化$(window).resize(() => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(width, height)if ($('#' + playerContainerId).get(0)) {this.setWndCover()}}})// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动$(window).scroll(() => {if (this.oWebControl != null) {this.oWebControl.JS_Resize(width, height)if ($('#' + playerContainerId).get(0)) {this.setWndCover()}}})},methods: {setWndCover () {const { oWebControl, playerContainerId, width, height } = thisvar iWidth = $(window).width()var iHeight = $(window).height()var oDivRect = $('#' + playerContainerId).get(0).getBoundingClientRect()var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0var iCoverRight = oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0var iCoverBottom = oDivRect.bottom - iHeight > 0 ? Math.round(oDivRect.bottom - iHeight) : 0iCoverLeft = iCoverLeft > 1000 ? 1000 : iCoverLeftiCoverTop = iCoverTop > 600 ? 600 : iCoverTopiCoverRight = iCoverRight > 1000 ? 1000 : iCoverRightiCoverBottom = iCoverBottom > 600 ? 600 : iCoverBottomoWebControl.JS_RepairPartWindow(0, 0, 1001, 600) // 多1个像素点防止还原后边界缺失一个像素条if (iCoverLeft !== 0) {oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600)}if (iCoverTop !== 0) {oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条}if (iCoverRight !== 0) {oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600)}if (iCoverBottom !== 0) {oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom)}}}
}export default hkPlayerResize

hkplayer-init-args.js 文件

const args = () => {return {//API网关提供的appkeyappkey: undefined,//API网关提供的secretsecret: undefined,//API网关IP地址ip: undefined,//播放模式（决定显示预览还是回放界面）playMode: undefined,//端口port: undefined,//抓图存储路径snapDir: undefined,//紧急录像或录像剪辑存储路径videoDir: undefined,//布局layout: undefined,//是否启用HTTPS协议enableHTTPS: undefined,//加密字段encryptedFields: undefined,//是否显示工具栏showToolbar: undefined,//是否显示智能信息showSmart: undefined,//自定义工具条按钮buttonIDs: undefined,}
}export default args()

vant 组件弹出框把视频弹出

<a-modal:title="'视频监控-' + modalTitle"@cancel="detailClose":maskClosable="false"width="1048px":footer="null":visible="detailDrawer"><h-k-player ref="hkPlayerRef" :cameraIndexCodes="testCameraIndexCodes"></h-k-player></a-modal>

这样就可以了，没有测试过，有需要的自己在摸索一下吧！！！

vue中使用HKPlayer播放器连接摄像头监控相关推荐

vue - vue中使用西瓜播放器xgplayer
1,安装 # 最新稳定版 $ npm install xgplayer对于已有项目也可以通过 CDN 引入,代码如下: <script src="//unpkg.byted-stati ...
Vue中使用Ckplayer播放器
1.官方下载地址:http://www.ckplayer.com/down/ 下载最新的即可. 2.解压后可以看到 ckplayer这个目录,将它复制到项目中的static目录下. 3.在index. ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
直播平台软件开发中选择点播播放器哪家强？
直播平台软件开发中选择点播播放器哪家强? 太长不看版这里选择了开源播放器IjkPlayer和直播云厂商播放器PLDroidPlayer作为测试样本. 数据统计软硬编码 IjkPlayer PLDr ...
react项目中集成ckplayer播放器插件
最近在学习ckplayer播放器,想把它用于web上播放公司的摄像头监控视频.下面记录一下 1.下载ckplayer包下载地址 2.把下载后的包解压后把ckplayer文件夹及里面的内容一起复制到需要 ...
vue+express实现音乐播放器
vue+express实现音乐播放器效果图因为html中的audio的样式不能更改,所以我们自己制作UI,做成自己想要的样子,这样要实现滑动条跟audio的双向绑定,滑动条使用了vant的组件sl ...
怎样在html中加入音乐播放器,如何在网页中添加音乐播放器
小编其实一个很痴迷音乐的人,每当我用电脑工作的时候,都会打开播放器播放音乐的,然后顿时觉得很舒适,如果我们在别人浏览网页的时候加个音乐播放器播放音乐的话,那么我们的网页就会给别人带来很舒适的感觉.DW ...
opencv播放器和摄像头视频播放
2019独角兽企业重金招聘Python工程师标准>>> 在看<学习opencv>这本书,按着其中的例子和写了一个播放器和摄像头播放,代码如下 #include <o ...

vue中使用HKPlayer播放器连接摄像头监控

vue中使用HKPlayer播放器连接摄像头监控

效果图可以控制摄像头移动

rsa加密文件jsencrypt.js 可以npm install jsencrypt 引入

vue中使用HKPlayer播放器连接摄像头监控相关推荐

最新文章

热门文章

vue中使用HKPlayer播放器连接摄像头监控

vue中使用HKPlayer播放器连接摄像头监控

效果图 可以控制摄像头移动

rsa加密文件jsencrypt.js 可以npm install jsencrypt 引入

vue中使用HKPlayer播放器连接摄像头监控相关推荐

最新文章

热门文章

效果图可以控制摄像头移动