@ -68,8 +68,9 @@
< / div >
< div class = "blockContent" style = "height: 260px" >
<!-- < img src = "@/assets/images/hzImg/xm/video.png" alt = "" width = "100%" height = "100%" / > -- >
< video style = "width: 100%; height: 100%; object-fit: fill" controls :src = "videoData.videoUrl" > < / video >
<!-- < video style = "width: 100%; height: 100%; object-fit: fill" controls :src = "videoData.videoUrl" > < / video > -- >
<!-- < div id = "playWnd" class = "playWnd" > < / div > -- >
< div id = "play_window" ref = "playWndBox" class = "main" style = "width: 100%; height: 100%" > < / div >
< / div >
< / div >
< / div >
@ -169,58 +170,23 @@ import { getpreviewURL, getConfigInfo } from "@/api/modules/common";
import { GlobalStore } from "@/stores" ;
const store = GlobalStore ( ) ;
const playWndBox = ref ( null ) ;
/ / 获 取 项 目 信 息
const projectData = ref ( {
latitude : "" ,
longitude : "" ,
totalDay : ""
} ) ;
const playWndBox = ref ( null ) ;
let playWndHeight = ref ( "" ) ;
let playWndWidth = ref ( "" ) ;
let oWebControl = ref ( null ) ;
let pubKey = ref ( "" ) ;
let objData = ref ( {
appkey : "29560841" , / / 海 康 提 供 的 a p p k e y
ip : "120.236.122.37:442" , / / 海 康 提 供 的 i p
secret : "8RPzFJX4h0POasG5v9AU" , / / 海 康 提 供 的 s e c r e t
port : 18443 ,
playMode : 0 , / / 0 预 览 1 回 放
layout : "4x6" / / 页 面 展 示 的 模 块 数 【 1 6 】
} ) ;
let cameraIndexCode = ref < Array < string > > ( [ ] ) ;
let myPlugin = ref ( "" ) ;
let cameraIndexCode = ref < string > ( "" ) ;
let playUrl = ref ( "" ) ;
let playIndex = ref ( 0 ) ;
const getProjectData = ( data : any ) => {
projectData . value = data ;
} ;
const videoData = ref ( {
videoUrl : ""
} ) ;
const dataObj = ref ( { } ) ;
const videoPlay = ( ) => {
console . log ( 666 ) ;
/ / 视 频 播 放
getVideo ( ) ;
previewVideo ( "33ab35b2724b49b4936060c39858d795" ) ;
} ;
/ / 获 取 视 频 流
const getVideo = async ( ) => {
/ / a w a i t s e n d R e q u e s t ( { c o d e : c a m e r a I n d e x C o d e . v a l u e } ) ;
await getpreviewURL ( { cameraIndexCode : cameraIndexCode . value } ) ;
} ;
/ / 获 取 视 频 配 置 信 息
const getVideoConfig = async ( ) => {
/ / a w a i t s e n d R e q u e s t ( { c o d e : c a m e r a I n d e x C o d e . v a l u e } ) ;
const res = await getConfigInfo ( { } ) ;
objData . value = reactive ( {
appkey : res . result . appKey , / / 海 康 提 供 的 a p p k e y
ip : res . result . ip + ":" + res . result . port , / / 海 康 提 供 的 i p
secret : res . result . appSecret , / / 海 康 提 供 的 s e c r e t
port : 18443 ,
playMode : 0 , / / 0 预 览 1 回 放
layout : "4x6" / / 页 面 展 示 的 模 块 数 【 1 6 】
} ) ;
console . log ( objData . value ) ;
} ;
const getPayMentData = async ( ) => {
const res = await screenPayment ( { } ) ;
console . log ( res ) ;
@ -307,190 +273,93 @@ const getInspect = async () => {
/ / o W e b C o n t r o l . J S _ D i s c o n n e c t ( ) ;
/ / }
/ / } ) ;
/ / 播 放 视 频 流
const playVideo = async ( ) => {
let url = playUrl . value ;
let newMyplugin = myPlugin . value ;
console . log ( url ) ;
console . log ( playIndex . value ) ;
newMyplugin
. JS _Play (
url ,
{
playURL : url , / / 流 媒 体 播 放 时 必 传
mode : 1 / / 解 码 类 型 ： 0 = 普 通 模 式 ; 1 = 高 级 模 式 默 认 为 0
/ / 设 置 直 连 时 的 认 证 参 数 等
/ / . . .
} ,
playIndex . value / / 当 前 窗 口 下 标
)
. then (
( ) => {
console . info ( "JS_Play success" ) ;
playIndex . value += 1 ;
/ / d o y o u w a n t . . .
} ,
( ) => {
console . info ( "JS_Play failed:" ) ;
/ / p l a y I n d e x . v a l u e + = 1 ;
/ / d o y o u w a n t . . .
}
) ;
} ;
/ / 获 取 视 频 流
const getVideo = async ( ) => {
/ / a w a i t s e n d R e q u e s t ( { c o d e : c a m e r a I n d e x C o d e . v a l u e } ) ;
const res = await getpreviewURL ( { cameraIndexCode : "a4badb0f00d2443d9bcf270654c8efc1" , protocol : "ws" } ) ;
playUrl . value = res . result ;
playVideo ( ) ;
console . log ( res ) ;
} ;
const BeginPlayer = ( ) => {
console . log ( 666 , "-----------------" ) ;
/ / 初 始 化 插 件
myPlugin . value = new JSPlugin ( {
szId : "play_window" , / / 需 要 英 文 字 母 开 头 必 填
szBasePath : "/public/h5player" , / / 必 填 , 引 用 H 5 p l a y e r . m i n . j s 的 j s 相 对 路 径
/ / s z B a s e P a t h : " / h 5 p l a y e r " , / / 打 包 后 的 地 址
/ / s z B a s e P a t h : " . / " , / / 必 填 , 引 用 H 5 p l a y e r . m i n . j s 的 j s 相 对 路 径
iWidth : playWndWidth . value + "px" ,
iHeight : playWndHeight . value + "px" ,
iMaxSplit : 4 ,
iCurrentSplit : 1 ,
openDebug : true
} ) ;
} ;
onMounted ( async ( ) => {
await getInspect ( ) ;
await getPayMentData ( ) ;
/ / 获 取 视 频 插 件 配 置 信 息
await getVideoConfig ( ) ;
/ / 初 始 化 播 放 器 插 件
nextTick ( ( ) => {
initPlugin ( ) ;
} ) ;
} ) ;
const initPlugin = ( ) => {
console . log ( 666 ) ;
oWebControl = new WebControl ( {
szPluginContainer : "playWnd" , / / 指 定 容 器 i d
iServicePortStart : 15900 , / / 指 定 起 止 端 口 号 ， 建 议 使 用 该 值
iServicePortEnd : 15900 ,
szClassId : "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11" , / / 用 于 I E 1 0 使 用 A c t i v e X 的 c l s i d
cbConnectSuccess : ( ) => {
console . log ( 666 , "=======成功" ) ;
/ / 创 建 W e b C o n t r o l 实 例 成 功
oWebControl
. JS _StartService ( "window" , {
/ / W e b C o n t r o l 实 例 创 建 成 功 后 需 要 启 动 服 务
/ / 值 " . / V i d e o P l u g i n C o n n e c t . d l l " 写 死
dllPath : "./VideoPluginConnect.dll"
} )
. then (
function ( ) {
/ / 设 置 消 息 回 调
oWebControl . JS _SetWindowControlCallback ( {
/ / c b I n t e g r a t i o n C a l l B a c k : c b I n t e g r a t i o n C a l l B a c k ,
} ) ;
/ / J S _ C r e a t e W n d 创 建 视 频 播 放 窗 口 ， 宽 高 可 设 定
oWebControl
. JS _CreateWnd ( "playWnd" , 1000 , 600 , { bEmbed : true } ) / / 这 一 部 分 很 重 要 ， 两 个 参 数 为 你 盒 子 的 宽 高 ， 这 样 是 写 死 是 防 止 组 件 加 载 之 前 出 现 白 屏 ； b E m b e d : t r u e 防 止 窗 口 闪 烁
. then ( function ( ) {
/ / 创 建 播 放 实 例 成 功 后 初 始 化
init ( ) ;
} ) ;
} ,
function ( ) {
/ / 启 动 插 件 服 务 失 败
}
) ;
} ,
/ / 创 建 W e b C o n t r o l 实 例 失 败
cbConnectError : function ( ) {
console . log ( 666 , "=======失败" ) ;
/ / c o n s o l e . l o g ( 0 ) ;
/ / o W e b C o n t r o l . v a l u e = n u l l ;
/ / / / 程 序 未 启 动 时 执 行 e r r o r 函 数 ， 采 用 w a k e u p 来 启 动 程 序
/ / w i n d o w . W e b C o n t r o l . J S _ W a k e U p ( " V i d e o W e b P l u g i n : / / " ) ;
/ / i n i t C o u n t + + ;
/ / i f ( i n i t C o u n t < 3 ) {
/ / s e t T i m e o u t ( f u n c t i o n ( ) {
/ / i n i t P l u g i n ( ) ;
/ / } , 3 0 0 0 ) ;
/ / } e l s e {
/ / s e t T i m e o u t ( f u n c t i o n ( ) {
/ / s e t T i m e o u t ( f u n c t i o n ( ) {
/ / $ r o u t e r . p u s h ( ' / h o m e / P l u g D o w n ' )
/ / } , 4 0 0 0 )
/ / } , 4 0 0 0 )
/ / }
/ / i f ( i n i t C o u n t . v a l u e < 2 ) {
/ / o W e b C o n t r o l . v a l u e = n u l l ;
/ / E l M e s s a g e . w a r n i n g ( " 插 件 未 启 动 ， 正 在 尝 试 启 动 ， 请 稍 候 . . . " ) ;
/ / / / 程 序 未 启 动 时 执 行 e r r o r 函 数 ， 采 用 w a k e u p 来 启 动 程 序
/ / w i n d o w . W e b C o n t r o l . J S _ W a k e U p ( " V i d e o W e b P l u g i n : / / " ) ;
/ / s e t T i m e o u t ( ( ) = > {
/ / i n i t P l u g i n ( ) ;
/ / } , 3 0 0 0 ) ;
/ / i n i t C o u n t . v a l u e + + ;
/ / } e l s e {
/ / w i n d o w . l o c a t i o n . h r e f = t h i s . v i d e o W e b P l u g i n U r l ;
/ / }
} ,
cbConnectClose : ( ) => {
console . log ( 666 , "=======断开" ) ;
/ / 异 常 断 开 ： b N o r m a l C l o s e = f a l s e
/ / J S _ D i s c o n n e c t 正 常 断 开 ： b N o r m a l C l o s e = t r u e
/ / c o n s o l e . l o g ( " c b C o n n e c t C l o s e " ) ;
oWebControl . value = null ;
await BeginPlayer ( ) ;
/ / 获 取 页 面 的 实 例 对 象 e e
const pageInstance = getCurrentInstance ( ) ;
/ / 获 取 d o m 节 点 对 象
const tagDomObj = pageInstance ? . refs . playWndBox ;
playWndHeight . value = tagDomObj ? . clientHeight ;
playWndWidth . value = tagDomObj ? . clientWidth ;
/ / 监 听 s c r o l l 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
window . addEventListener ( "scroll" , ( ) => {
if ( myPlugin . value == undefined ) {
setTimeout ( function ( ) {
myPlugin . value . JS _Resize ( tagDomObj ? . clientWidth , tagDomObj ? . clientHeight ) ;
} , 500 ) ;
/ / s e t W n d C o v e r ( ) ;
}
} ) ;
oWebControl . JS _ShowWnd ( ) ;
console . log ( 777 ) ;
/ / o W e b C o n t r o l . J S _ C u t t i n g P a r t W i n d o w ( 5 0 0 , 5 0 0 , 5 0 0 , 5 0 0 ) ;
} ;
/ / 初 始 化
const init = ( callback : ( ( ) => void ) | undefined ) => {
console . log ( objData . value , "6666666" ) ;
getPubKey ( ( ) => {
let appkey = objData . value . appkey ; / / 综 合 安 防 管 理 平 台 提 供 的 a p p k e y ， 必 填
let secret = setEncrypt ( objData . value . secret ) ; / / 综 合 安 防 管 理 平 台 提 供 的 s e c r e t ， 必 填
let ip = objData . value . ip ; / / 综 合 安 防 管 理 平 台 I P 地 址 ， 必 填
let playMode = objData . value . playMode ; / / 初 始 播 放 模 式 ： 0 - 预 览 ， 1 - 回 放
let port = objData . value . port ; / / 综 合 安 防 管 理 平 台 端 口 ， 若 启 用 H T T P S 协 议 ， 默 认 4 4 3
let snapDir = "D:\\SnapDir" ; / / 抓 图 存 储 路 径
let videoDir = "D:\\VideoDir" ; / / 紧 急 录 像 或 录 像 剪 辑 存 储 路 径
let layout = objData . value . layout ; / / p l a y M o d e 指 定 模 式 的 布 局
let enableHTTPS = 1 ; / / 是 否 启 用 H T T P S 协 议 与 综 合 安 防 管 理 平 台 交 互 ， 这 里 总 是 填 1
let encryptedFields = "secret" ; / / 加 密 字 段 ， 默 认 加 密 领 域 为 s e c r e t
let showToolbar = 1 ; / / 是 否 显 示 工 具 栏 ， 0 - 不 显 示 ， 非 0 - 显 示
let showSmart = 0 ; / / 是 否 显 示 移 动 框 线 框 ， 0 - 不 显 示 ， 非 0 - 显 示
let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769" ; / / 自 定 义 工 具 条 按 钮
/ / v a r t o o l B a r B u t t o n I D s = " 2 0 4 9 , 2 3 0 4 " / / 工 具 栏 上 自 定 义 按 钮
oWebControl
. JS _RequestInterface ( {
funcName : "init" ,
argument : JSON . stringify ( {
appkey : appkey , / / A P I 网 关 提 供 的 a p p k e y
secret : secret , / / A P I 网 关 提 供 的 s e c r e t
ip : ip , / / A P I 网 关 I P 地 址
playMode : playMode , / / 播 放 模 式 （ 决 定 显 示 预 览 还 是 回 放 界 面 ）
port : port , / / 端 口
snapDir : snapDir , / / 抓 图 存 储 路 径
videoDir : videoDir , / / 紧 急 录 像 或 录 像 剪 辑 存 储 路 径
layout : layout , / / 布 局
enableHTTPS : enableHTTPS , / / 是 否 启 用 H T T P S 协 议
encryptedFields : encryptedFields , / / 加 密 字 段
showToolbar : showToolbar , / / 是 否 显 示 工 具 栏
showSmart : showSmart , / / 是 否 显 示 智 能 信 息
buttonIDs / / 自 定 义 工 具 条 按 钮
} )
} )
. then ( function ( oData : any ) {
oWebControl . JS _Resize ( playWndWidth . value , playWndHeight . value ) ; / / 初 始 化 后 r e s i z e 一 次 ， 规 避 f i r e f o x 下 首 次 显 示 窗 口 后 插 件 窗 口 未 与 D I V 窗 口 重 合 问 题
if ( callback ) {
callback ( ) ;
}
/ / 隐 藏
/ / o W e b C o n t r o l . J S _ H i d e W n d ( )
} ) ;
/ / 监 听 r e s i z e 事 件 ， 使 插 件 窗 口 尺 寸 跟 随 D I V 窗 口 变 化
window . addEventListener ( "resize" , e => {
if ( myPlugin . value == undefined ) {
/ / c o n s o l e . l o g ( " w w w w w " , e ) ;
setTimeout ( function ( ) {
myPlugin . value . JS _Resize ( tagDomObj ? . clientWidth , tagDomObj ? . clientHeight ) ;
} , 500 ) ;
/ / o W e b C o n t r o l . J S _ R e s i z e ( p l a y W n d H e i g h t . v a l u e , p l a y W n d W i d t h . v a l u e ) ;
/ / s e t W n d C o v e r ( ) ;
}
} ) ;
} ;
/ / R S A 加 密
let setEncrypt = ( value : string ) => {
let encrypt = new window . JSEncrypt ( ) ;
encrypt . setPublicKey ( pubKey ) ;
return encrypt . encrypt ( value ) ;
} ;
/ / 获 取 公 钥
const getPubKey = ( callback : { ( ) : void ; ( ) : void } ) => {
oWebControl
. JS _RequestInterface ( {
funcName : "getRSAPubKey" ,
argument : JSON . stringify ( {
keyLength : 1024
} )
} )
. then ( function ( oData : { responseMsg : { data : Ref < string > } } ) {
if ( oData . responseMsg . data ) {
pubKey = oData . responseMsg . data ;
callback ( ) ;
}
} ) ;
} ;
/ / 调 用 这 个 函 数 可 进 行 视 频 播 放
/ / 视 频 预 览 功 能
const previewVideo = ( data : string | null ) => {
let cameraIndexCode = data ; / / 获 取 输 入 的 监 控 点 编 号 值 ， 必 填
let streamMode = 0 ; / / 主 子 码 流 标 识 ： 0 - 主 码 流 ， 1 - 子 码 流
let transMode = 1 ; / / 传 输 协 议 ： 0 - U D P ， 1 - T C P
let gpuMode = 0 ; / / 是 否 启 用 G P U 硬 解 ， 0 - 不 启 用 ， 1 - 启 用
let wndId = - 1 ; / / 播 放 窗 口 序 号 （ 在 2 x 2 以 上 布 局 下 可 指 定 播 放 窗 口 ）
oWebControl
. JS _RequestInterface ( {
funcName : "startPreview" ,
argument : JSON . stringify ( {
cameraIndexCode : cameraIndexCode , / / 监 控 点 编 号
streamMode : streamMode , / / 主 子 码 流 标 识
transMode : transMode , / / 传 输 协 议
gpuMode : gpuMode , / / 是 否 开 启 G P U 硬 解
wndId : wndId / / 可 指 定 播 放 窗 口
} )
} )
. then ( function ( ) {
oWebControl . JS _SetWindowControlCallback ( { } ) ;
} ) ;
} ;
getVideo ( ) ;
} ) ;
< / script >
< style scoped lang = "scss" >
@ import url ( "./style.scss" ) ;
kun