453530270@qq.com
2 years ago
22 changed files with 5177 additions and 1330 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
File diff suppressed because one or more lines are too long
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div class="h5video" id="playerDiv1" style="float: left;"></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 { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
var url_1 = 'rtmp://192.168.12.187:1935/live/1'; |
|||
var oPlayerDiv1 = document.getElementById('playerDiv1'); |
|||
oPlayerDiv1.setAttribute("data-rtmp", url_1); |
|||
oPlayerDiv1.setAttribute("href", url_1); |
|||
|
|||
var swfStr = "./js/flowplayer-3.2.18.swf" |
|||
var obj_1 = { |
|||
clip: { |
|||
provider: 'rtmp', |
|||
bufferLength: 0, |
|||
bufferTime: 0, |
|||
autoPlay: true, |
|||
live: true |
|||
}, |
|||
plugins: { |
|||
rtmp: { |
|||
url: "js/flowplayer.rtmp-3.2.13.swf", |
|||
netConnectionUrl: url_1 |
|||
} |
|||
} |
|||
}; |
|||
// JSON.stringify(obj_1) |
|||
flowplayer('playerDiv1', swfStr, obj_1); |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> |
|||
<!-- <LivePlayer class="videostr1" @snapOutside="snapOutside" ref="player2" :videoUrl="flvURL" live /> --> |
|||
<!-- <LivePlayer class="videostr1" :videoUrl="mp4URL" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import LivePlayer from '@liveqing/liveplayer' |
|||
|
|||
export default { |
|||
// props: { |
|||
// msg: String |
|||
// }, |
|||
|
|||
components: { |
|||
LivePlayer |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' |
|||
// mp4URL() { |
|||
// return "http://999.222.444.533/sdk/file/2022-11-29/15047_20221129_103705140/CHN06.mp4" |
|||
// }, |
|||
// flvURL() { |
|||
// return "http://live.hkstv.hk.lxdns.com/flv/hks.flv" |
|||
// }, |
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -0,0 +1,146 @@ |
|||
<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' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initPlayer() |
|||
}) |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: '/static/', |
|||
|
|||
// // 当容器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 = 'ws://192.168.66.13:559/openUrl/jazXRGE' |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 0 |
|||
// } |
|||
// 当前播放窗口下标 |
|||
let index = 0 |
|||
let mode = 0 |
|||
// console.log(this.playerArr) |
|||
console.log(this.player); |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, { preUrl, mode }, index).then( |
|||
() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
console.log('1111111111'); |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
} |
|||
) |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<input v-model="code" placeholder="输入监控点编码" @change="onChangeCode" /> |
|||
<button @click="onSubmit">默认预览</button> |
|||
<button @click="onTwoSubmit(2)">4分屏</button> |
|||
<button @click="onTwoSubmit(4)">16分屏</button> |
|||
<button @click="onTwoSubmit(8)">64分屏</button> |
|||
<div id="player" style="width: 800px;height: 800px;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import http from '@/http/http2.js' |
|||
import '@/utils/h5player.min.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 监控点编码 |
|||
code: '', |
|||
// 播放器对象 |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initPlayer() |
|||
this.play() |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: './static/util', |
|||
|
|||
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
iWidth: 600, |
|||
iHeight: 400, |
|||
|
|||
// 分屏播放，默认最大分屏4*4 |
|||
iMaxSplit: 16, |
|||
iCurrentSplit: 1, |
|||
|
|||
// 样式 |
|||
oStyle: { |
|||
border: '#343434', |
|||
borderSelect: '#FFCC00', |
|||
background: '#000' |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 获取取流连接 |
|||
* @returns {*} |
|||
*/ |
|||
// getPreviewUrl() { |
|||
// let tempCode = '61077001001320000018' |
|||
// if (this.code) { |
|||
// tempCode = this.code |
|||
// } |
|||
// const param = { |
|||
// 'cameraIndexCode': tempCode, |
|||
// 'streamType': 0, |
|||
// 'protocol': 'ws', |
|||
// 'transmode': 1 |
|||
// } |
|||
// // 这里 |
|||
// return http.post('/ay-video-manage/video/monitor/getRealTimeMonitorVideo', param) |
|||
// }, |
|||
|
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
const _this = this |
|||
let preUrl = 'wss://cloud.liveqing.com:1443/ws-flv/hls/LiveGBS0013402000000132000026434020000001320000264.flv?k=LiveGBS0013402000000132000026434020000001320000264.d4d1ee3b8644b53101' |
|||
const param = { |
|||
preUrl: preUrl, |
|||
// 1：高级模式 0：普通模式，高级模式支持所有 |
|||
mode: 0 |
|||
} |
|||
// 索引默认0 |
|||
let index = 0 |
|||
console.log(preUrl); |
|||
console.log(param); |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
}, |
|||
(err) => { |
|||
console.log('播放失败',err) |
|||
}) |
|||
|
|||
// this.getPreviewUrl().then(res => { |
|||
// if (res.status !== 200) { |
|||
// _this.$message.warning('获取视频流失败！') |
|||
// return |
|||
// } |
|||
// let preUrl = res.data.data.url |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 1 |
|||
// } |
|||
// // 索引默认0 |
|||
// if (!index) { |
|||
// index = 0 |
|||
// } |
|||
// _this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// // 播放成功回调 |
|||
// console.log('播放成功') |
|||
// }, |
|||
// (err) => { |
|||
// console.log('播放失败') |
|||
// }) |
|||
// }) |
|||
}, |
|||
|
|||
/** |
|||
* 监控点更新 |
|||
* @param data |
|||
*/ |
|||
onChangeCode(data) { |
|||
console.log(data); |
|||
this.code = data |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 默认预览 |
|||
*/ |
|||
onSubmit() { |
|||
this.play() |
|||
}, |
|||
|
|||
/** |
|||
* 分屏，这里我太懒了，就循环了一个视频流 |
|||
*/ |
|||
onTwoSubmit(num) { |
|||
const _this = this |
|||
// 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格 |
|||
this.player.JS_ArrangeWindow(num).then( |
|||
() => { |
|||
// 循环取流 |
|||
for (let i = 0; i < num * num; i++) { |
|||
_this.play(i) |
|||
} |
|||
}, |
|||
e => { console.error(e) } |
|||
) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,335 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div ref="playWndBox"> |
|||
<!-- 视频数据站位 --> |
|||
<div id="playWnd" class="playWnd" :style="{ |
|||
height: playWndHeight + 'px', |
|||
width: playWndWidth + 'px', |
|||
}"></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' |
|||
|
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
// 视频盒子的高度 |
|||
playWndHeight: "", |
|||
// 视频盒子的宽度 |
|||
playWndWidth: "", |
|||
oWebControl: null, |
|||
initCount: 0, |
|||
pubKey: "", |
|||
cameraIndexCode: "05edddc148b141c5930301af43154942", // 监控点编号 |
|||
objData: { |
|||
appkey: "29940726", |
|||
ip: "192.168.66.13", |
|||
port: 554, |
|||
playMode: 0, // 0 预览 1回放 |
|||
layout: "2x2", //页面展示的模块数【16】 |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.getTreeList(); |
|||
// 首次加载时的到父容器的高度 |
|||
this.playWndHeight = this.$refs.playWndBox.clientHeight; |
|||
// 首次加载时的到父容器的宽度 |
|||
this.playWndWidth = this.$refs.playWndBox.clientWidth - 140; |
|||
// 初始化摄像头 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
}); |
|||
console.log(this._data); |
|||
|
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", () => { |
|||
console.log( |
|||
this.$refs.playWndBox.clientHeight, |
|||
this.$refs.playWndBox.clientWidth |
|||
); |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize( |
|||
this.$refs.playWndBox.clientWidth - 140, |
|||
this.$refs.playWndBox.clientHeight |
|||
); |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取左侧树列表 |
|||
// getTreeList() { |
|||
// getVideoRegionTree().then((res) => { |
|||
// this.treeData = res.data; |
|||
// }); |
|||
// }, |
|||
// handleNodeClick(data) { |
|||
// console.log(data); |
|||
// if (!data.children) { |
|||
// getVideoInfo({ videoId: data.id }) |
|||
// .then((res) => { |
|||
// this.previewVideo(res.data); |
|||
// }) |
|||
// .catch((err) => { |
|||
// console.log(err, "-------"); |
|||
// }); |
|||
// } |
|||
// }, |
|||
|
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let that = this; |
|||
this.oWebControl = null; |
|||
that.oWebControl = new WebControl({ |
|||
szPluginContainer: "playWnd", // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess: () => { |
|||
// 创建WebControl实例成功 |
|||
console.log('1111111'); |
|||
console.log(that.oWebControl); |
|||
that.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
// 值"./VideoPluginConnect.dll"写死 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then( |
|||
function () { |
|||
// 设置消息回调 |
|||
that.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: that.cbIntegrationCallBack, |
|||
}); |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
that.oWebControl |
|||
.JS_CreateWnd("playWnd", 1000, 600) |
|||
.then(function () { |
|||
// 创建播放实例成功后初始化 |
|||
that.init(); |
|||
that.previewVideo(that._data); |
|||
}); |
|||
}, |
|||
function () { |
|||
// 启动插件服务失败 |
|||
} |
|||
); |
|||
}, |
|||
// 创建WebControl实例失败 |
|||
cbConnectError: function () { |
|||
that.oWebControl = null; |
|||
that.$message.warning("插件未启动，正在尝试启动，请稍候..."); |
|||
// 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
window.WebControl.JS_WakeUp("VideoWebPlugin://"); |
|||
that.initCount++; |
|||
if (that.initCount < 3) { |
|||
setTimeout(function () { |
|||
that.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
that.$message.warning("插件启动失败，请检查插件是否安装！"); |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log("cbConnectClose"); |
|||
that.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 初始化 |
|||
init(callback) { |
|||
let that = this; |
|||
that.getPubKey(() => { |
|||
let appkey = that.objData.appkey; //综合安防管理平台提供的appkey，必填 |
|||
let secret = that.setEncrypt('PSkTCnQdFbNW4Z2suNj8'); //综合安防管理平台提供的secret，必填 |
|||
let ip = that.objData.ip; //综合安防管理平台IP地址，必填 |
|||
let playMode = that.objData.playMode; //初始播放模式：0-预览，1-回放 |
|||
let port = that.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
let snapDir = "D:\\SnapDir"; //抓图存储路径 |
|||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
let layout = that.objData.layout; //playMode指定模式的布局 |
|||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
let encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示 |
|||
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
let buttonIDs = |
|||
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮 |
|||
that.oWebControl |
|||
.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, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
// 隐藏 |
|||
// that.oWebControl.JS_HideWnd() |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
let that = this; |
|||
console.log(that.oWebControl); |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
if (oData.responseMsg.data) { |
|||
that.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// RSA 加密 |
|||
setEncrypt(value) { |
|||
let that = this; |
|||
let encrypt = new window.JSEncrypt(); |
|||
encrypt.setPublicKey(that.pubKey); |
|||
return encrypt.encrypt(value); |
|||
}, |
|||
// 回调的消息 |
|||
cbIntegrationCallBack(oData) { |
|||
let { responseMsg: type } = oData; |
|||
if (type === "error") { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} else { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} |
|||
}, |
|||
// 视频预览功能 |
|||
previewVideo(data) { |
|||
let that = this; |
|||
console.log(data); |
|||
console.log(data.cameraIndexCode); |
|||
let cameraIndexCode = data.cameraIndexCode; // 获取输入的监控点编号值，必填 |
|||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流 |
|||
let transMode = 0; // 传输协议：0-UDP，1-TCP |
|||
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用 |
|||
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
console.log(cameraIndexCode, "-------cameraIndexCode-"); |
|||
// that.initPlugin() |
|||
console.log(that.oWebControl); |
|||
// console.log(this.oWebControl); |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
that.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号 |
|||
streamMode: streamMode, // 主子码流标识 |
|||
transMode: transMode, // 传输协议 |
|||
gpuMode: gpuMode, // 是否开启GPU硬解 |
|||
wndId: wndId, // 可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
}); |
|||
|
|||
}, |
|||
// 停止全部预览 |
|||
stopAllPreview() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 格式化时间 |
|||
dateFormat(oDate, fmt) { |
|||
let o = { |
|||
"M+": oDate.getMonth() + 1, //月份 |
|||
"d+": oDate.getDate(), //日 |
|||
"h+": oDate.getHours(), //小时 |
|||
"m+": oDate.getMinutes(), //分 |
|||
"s+": oDate.getSeconds(), //秒 |
|||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度 |
|||
S: oDate.getMilliseconds(), //毫秒 |
|||
}; |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
(oDate.getFullYear() + "").substr(4 - RegExp.$1.length) |
|||
); |
|||
} |
|||
for (let k in o) { |
|||
if (new RegExp("(" + k + ")").test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
RegExp.$1.length == 1 |
|||
? o[k] |
|||
: ("00" + o[k]).substr(("" + o[k]).length) |
|||
); |
|||
} |
|||
} |
|||
return fmt; |
|||
}, |
|||
}, |
|||
// 组件销毁后 |
|||
destroyed() { |
|||
if (this.oWebControl != null) { |
|||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 |
|||
this.oWebControl.JS_HideWnd(); |
|||
// 销毁当前播放的视频 |
|||
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); |
|||
// 断开与插件服务连接 |
|||
this.oWebControl.JS_Disconnect(); |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue