758 lines
31 KiB
JavaScript
758 lines
31 KiB
JavaScript
/**
|
||
* 该播放器支持H5stream、hls、rtmp
|
||
* 需要引用以下JS
|
||
*
|
||
<!-- VUE依赖 -->
|
||
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
|
||
<!-- 请求依赖 -->
|
||
<script src="https://cdn.makalu.cc/js/axios/axios.min.js"></script>
|
||
<!-- rtmp 支持依赖 -->
|
||
<script src="https://cdn.makalu.cc/js/videojs/5.19/video.min.js"></script>
|
||
<!-- hls 支持依赖 -->
|
||
<script src="https://cdn.makalu.cc/js/hls/hls.min.js"></script>
|
||
<!-- h5steam 支持依赖 -->
|
||
<script src="https://cdn.makalu.cc/js/platform/1.3.5/platform.js"></script>
|
||
<script src="https://cdn.makalu.cc/js/h5splayer/h5splayer.js"></script>
|
||
<script src="https://cdn.makalu.cc/js/h5splayer/h5splayerhelper.js"></script>
|
||
|
||
* 使用：
|
||
* <mkl-video-play></mkl-video-play>
|
||
* param：
|
||
* token: 视频token
|
||
* type: 类型h5s/hls/rtmp
|
||
* width: 播放界面宽，当宽度小于600时不启用云台控制
|
||
* height: 播放界面高
|
||
* outTime: 超时检测时间（单位：秒），用于hls和rtmpm默认是10秒，
|
||
*/
|
||
|
||
Vue.component("mkl-video-play", {
|
||
template: `
|
||
<div :style="playDivCss">
|
||
<video v-if="type != 'hk' && type != 'hzhk' && !exception" ref="playDiv"
|
||
style="height: 100%;width: 100%"
|
||
@click="play"
|
||
controls
|
||
autoplay
|
||
muted
|
||
webkit-playsinline
|
||
playsinline></video>
|
||
|
||
<div v-if="(type == 'hk' || type == 'hzhk') && !exception" id="HKPlayWindowControl" style="height: 100%;width: 100%;text-align: center;background-color: #000000;color: #FFFFFF"">
|
||
<div v-show="restartInit"><br/><br/><br/>插件未启动，正在尝试启动，请稍候...</div>
|
||
<div v-show="initError">
|
||
<br/><br/><br/>
|
||
<p>插件启动失败，请检查插件是否安装！</p>
|
||
<p>该插件只能用于window系统！</p>
|
||
<el-link type="primary" href="https://file-other.makalu.cc/%E6%8F%92%E4%BB%B6/VideoWebPlugin.exe">
|
||
点击这里下载播放组件
|
||
</el-link>
|
||
<p>插件安装成功后刷新当前页面！</p>
|
||
</div>
|
||
</div>
|
||
<!-- <video v-else-if="type === 'hls' && !exception" ref="playDiv"
|
||
@click="play"
|
||
style="height: 100%;width: 100%"
|
||
autoplay
|
||
muted
|
||
controls="true"></video>
|
||
<video v-else-if="type === 'rtmp' && !exception" ref="playDiv"
|
||
style="height: 100%;width: 100%"
|
||
class="video-js vjs-default-skin vjs-big-play-centered" controls
|
||
preload="auto"
|
||
@click="play"
|
||
muted
|
||
autoplay="autoplay"
|
||
data-setup='{}'>
|
||
</video>-->
|
||
|
||
<div v-if="exception" :style="exStyle">
|
||
<img style="width: 100%;height: 100%" src="http://file-other.makalu.cc/icon/videoEx.jpg"/>
|
||
</div>
|
||
|
||
<div style="
|
||
position: absolute;
|
||
right: 0px;
|
||
top: 10px;
|
||
background-color: black;
|
||
color: azure;
|
||
padding: 10px;
|
||
border-top-left-radius: 5px;
|
||
border-bottom-left-radius: 5px;
|
||
font-size: 12px" v-if="ptz">
|
||
<span @click="openPTZ = !openPTZ" style="cursor: pointer;margin-right: 10px">云台控制</span>
|
||
<img style="width: 15px;height: 15px;cursor: pointer" @click="fullScreenFun"
|
||
:src="'http://file-other.makalu.cc/icon' + (fullScreenShow ? '/no-full-screen-icon.png':'/full-screen-icon.png')"/>
|
||
</div>
|
||
|
||
<div v-show="openPTZ" style="position: absolute;bottom: 0px;right: 0px;">
|
||
<div :style="PTZDiv">
|
||
<div :style="PTZTop" @mousedown="tripodHandle('UP')" @mouseup="stop"></div>
|
||
<div :style="PTZBottom" @mousedown="tripodHandle('DOWN')" @mouseup="stop"></div>
|
||
<div :style="PTZLeft" @mousedown="tripodHandle('LEFT')" @mouseup="stop"></div>
|
||
<div :style="PTZRight" @mousedown="tripodHandle('RIGHT')" @mouseup="stop"></div>
|
||
</div>
|
||
<br/>
|
||
<div>
|
||
<button :style="VIBtnCss" @mousedown="tripodHandle('zoomout')" @mouseup="stop">-
|
||
</button>
|
||
<button :style="zoomViewCss"> 焦 距</button>
|
||
<button :style="VIBtnCss" @mousedown="tripodHandle('zoomin')" @mouseup="stop">+</button>
|
||
</div>
|
||
<br/>
|
||
<!-- <div>
|
||
<button :style="VIBtnCss" onclick="tripodHandle('ZOOM_OUT')">-
|
||
</button>
|
||
<button :style="zoomViewCss"> 微 距</button>
|
||
<button :style="VIBtnCss" onclick="tripodHandle('ZOOM_IN')">+</button>
|
||
</div>-->
|
||
</div>
|
||
<mkl-video-play
|
||
v-if="fullScreen && fullScreenShow"
|
||
@fullScreenFun="fullScreenCloseFun"
|
||
style="position: fixed;top:0;left: 0;z-index: 998"
|
||
:token="token" :type="type"
|
||
:width="fullScreenWidth"
|
||
:height="fullScreenHeight" :ptz="true" :fullScreen="false"></mkl-video-play>
|
||
</div>
|
||
|
||
`,
|
||
props: {
|
||
//视频token
|
||
"token": {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
//播放器类型
|
||
"type": {
|
||
type: String,
|
||
default: "hls"
|
||
},
|
||
//播放器宽
|
||
"width": {
|
||
type: Number / String,
|
||
default: 320
|
||
},
|
||
//播放器高
|
||
"height": {
|
||
type: Number / String,
|
||
default: 240
|
||
},
|
||
//超时时间
|
||
"outTime": {
|
||
type: Number,
|
||
default: 10
|
||
},
|
||
//是否显示云台控制
|
||
"ptz": {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
//是否启用全屏
|
||
"fullScreen": {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
//是否启用自动重连
|
||
"restart": {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
"openOrClose": {
|
||
type: String,
|
||
default: "open"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
isplay: true,
|
||
videoHost: "http://video.makalu.cc",
|
||
h5s: "",
|
||
hls: new Hls(),
|
||
hlsvideo: undefined,
|
||
rtmpVideo: "",
|
||
exception: false,
|
||
exMsg: "数据加载异常，请刷新重试...",
|
||
openPTZ: false,
|
||
fullScreenShow: false,
|
||
fullScreenWidth: "0px",
|
||
fullScreenHeight: "0px",
|
||
timeoutDetection: undefined,
|
||
timeoutDetectionInit: undefined,
|
||
initCount: 0,
|
||
pubKey: "",
|
||
restartInit: false,
|
||
initError: false,
|
||
oWebControl: undefined
|
||
}
|
||
},
|
||
methods: {
|
||
clearContext() {
|
||
try{
|
||
if (this.oWebControl && this.oWebControl != null) {
|
||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
this.oWebControl.JS_Disconnect().then(function () {
|
||
// 断开与插件服务连接成功
|
||
},
|
||
function () {
|
||
// 断开与插件服务连接失败
|
||
}
|
||
);
|
||
}
|
||
}catch(e){console.log(e)}
|
||
if (this.$refs.playDiv) {
|
||
this.$refs.playDiv.removeAttribute("poster")
|
||
}
|
||
try {
|
||
if (this.hls) {
|
||
this.hls.destroy()
|
||
}
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
try {
|
||
if (this.h5s) {
|
||
H5sPlayerWS.prototype.disconnect
|
||
this.h5s.disconnect()
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
this.hls = new Hls()
|
||
},
|
||
initH5sPlay() {
|
||
let that = this
|
||
let host = window.location.protocol == "https:" ? "47.106.234.91:8443" :"47.106.234.91:8080"
|
||
axios.post(that.videoHost + "/mkl/api/h5sLogin", {}).then(res => {
|
||
let conf = {
|
||
videodom: that.$refs.playDiv,
|
||
protocol: window.location.protocol,
|
||
host: "h5s.makalu.cc",
|
||
rootpath: '/',
|
||
token: that.token,
|
||
hlsver: 'v1',
|
||
session: res.data
|
||
}
|
||
that.$refs.playDiv.setAttribute("autoplay", "autoplay")
|
||
that.h5s = H5sPlayerCreate(conf)
|
||
that.h5s.connect()
|
||
that.timeoutDetectionFun()
|
||
})
|
||
},
|
||
initHlsPlay() {
|
||
this.hlsvideo = this.$refs.playDiv;
|
||
this.hls.destroy()
|
||
this.hls = new Hls()
|
||
let that = this
|
||
axios.post(this.videoHost + "/ca/isc/info/getPlay", {
|
||
protocol: "hls",
|
||
playAdder: that.token
|
||
}).then(res => {
|
||
if (res.data.code != "200") {
|
||
that.exception = true
|
||
setTimeout(function () {
|
||
that.init()
|
||
}, 2000)
|
||
} else {
|
||
that.hls.loadSource(eval("(" + res.data.data + ")").url);
|
||
that.hls.attachMedia(that.hlsvideo);
|
||
that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||
that.hlsvideo.play();
|
||
})
|
||
}
|
||
that.timeoutDetectionFun()
|
||
}).catch(err => {
|
||
that.exception = true
|
||
})
|
||
},
|
||
initRtmpPlay() {
|
||
let that = this
|
||
let video = this.$refs.playDiv
|
||
axios.post(this.videoHost + "/ca/isc/info/getPlay", {
|
||
protocol: "rtmp",
|
||
playAdder: that.token
|
||
}).then(res => {
|
||
if (res.data.code != "200") {
|
||
that.exception = true
|
||
setTimeout(function () {
|
||
that.init()
|
||
}, 2000)
|
||
} else {
|
||
const videoParam = [{
|
||
type: "video/rtmp",
|
||
src: eval("(" + res.data.data + ")").url
|
||
}];
|
||
that.rtmpVideo = videojs(video)
|
||
that.rtmpVideo.ready(function () {
|
||
that.rtmpVideo.src(videoParam)
|
||
that.rtmpVideo.load()
|
||
that.rtmpVideo.play()
|
||
})
|
||
that.timeoutDetectionFun()
|
||
}
|
||
}).catch(err => {
|
||
that.exception = true
|
||
})
|
||
},
|
||
play() {
|
||
if (this.type === "h5s") {
|
||
if (this.isplay) {
|
||
this.h5s.disconnect()
|
||
} else {
|
||
this.h5s.connect();
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
if (this.type === "hls") {
|
||
if (this.isplay) {
|
||
this.hlsvideo.stop()
|
||
} else {
|
||
this.hlsvideo.play()
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
if (this.type === "rtmp") {
|
||
if (this.isplay) {
|
||
this.rtmpVideo.pause()
|
||
} else {
|
||
this.rtmpVideo.play()
|
||
}
|
||
this.isplay = !this.isplay
|
||
}
|
||
},
|
||
guid() {
|
||
function S4() {
|
||
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
||
}
|
||
|
||
return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
|
||
},
|
||
settingVideoHost() {
|
||
this.videoHost = window.location.protocol + "//video.makalu.cc"
|
||
},
|
||
init() {
|
||
let that = this
|
||
this.exception = false
|
||
this.clearContext()
|
||
this.$nextTick(function () {
|
||
switch (that.type) {
|
||
case "h5s":
|
||
that.initH5sPlay()
|
||
break
|
||
case "hls":
|
||
that.initHlsPlay()
|
||
break
|
||
case "rtmp":
|
||
that.initRtmpPlay()
|
||
break
|
||
case "hk":
|
||
that.initPlugin("24476525","hrFzLaMbo60QDvwazqdH","8.129.144.255",1443);
|
||
that.windowInitFun();
|
||
break
|
||
case "hzhk":
|
||
that.initPlugin("21332599","772SPtFNM1BHMyKHq4xh","39.101.132.124",443);
|
||
that.windowInitFun();
|
||
break
|
||
}
|
||
})
|
||
|
||
},
|
||
tripodHandle(order) {
|
||
axios.post(this.videoHost + "/mkl/api/moveCamera", {
|
||
token: this.token,
|
||
action: this.type === "h5s" ? order.toLowerCase() : order,
|
||
h5s: this.type == "h5s"
|
||
})
|
||
console.log("按下")
|
||
},
|
||
stop() {
|
||
axios.post(this.videoHost + "/mkl/api/moveCamera", {
|
||
token: this.token,
|
||
action: "stop",
|
||
h5s: this.type == "h5s"
|
||
})
|
||
console.log("松开")
|
||
},
|
||
fullScreenCss() {
|
||
this.fullScreenWidth = (document.body.scrollWidth - 10) + "px"
|
||
this.fullScreenHeight = (document.body.scrollHeight - 10) + "px"
|
||
},
|
||
fullScreenFun() {
|
||
this.fullScreenShow = true
|
||
this.$emit("fullScreenFun")
|
||
},
|
||
fullScreenCloseFun() {
|
||
this.fullScreenShow = false
|
||
},
|
||
timeoutDetectionFun() {
|
||
let that = this
|
||
//超时时间检测是否正常获取到数据流默认为5秒
|
||
this.timeoutDetection = setTimeout(function () {
|
||
if (parseInt(that.hlsvideo.currentTime.toFixed(1)) == 0) {
|
||
that.hls.destroy()
|
||
that.exception = true
|
||
if (that.restart) {
|
||
that.timeoutDetectionInit = setTimeout(function () {
|
||
that.init()
|
||
}, 2000)
|
||
}
|
||
}
|
||
}, this.outTime * 1000)
|
||
},
|
||
//海康插件开始
|
||
// 创建播放实例
|
||
initPlugin(appkey,secret,ip,port) {
|
||
let that = this
|
||
that.oWebControl = new WebControl({
|
||
szPluginContainer: "uuid", // 指定容器id
|
||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||
iServicePortEnd: 15909,
|
||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||
that.oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||
}).then(function () { // 启动插件服务成功
|
||
that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||
cbIntegrationCallBack: that.cbIntegrationCallBack
|
||
});
|
||
|
||
that.oWebControl.JS_CreateWnd("HKPlayWindowControl", Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px",""))).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||
that.initHKPlay(appkey,secret,ip,port); // 创建播放实例成功后初始化
|
||
});
|
||
}, function () { // 启动插件服务失败
|
||
});
|
||
},
|
||
cbConnectError: function () { // 创建WebControl实例失败
|
||
this.oWebControl = null;
|
||
that.restartInit = true
|
||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||
that.initCount++;
|
||
if (that.initCount < 3) {
|
||
setTimeout(function () {
|
||
that.initPlugin(appkey,secret,ip,port);
|
||
}, 3000)
|
||
} else {
|
||
that.restartInit = false
|
||
that.initError = true
|
||
that.initCount = 0
|
||
}
|
||
},
|
||
cbConnectClose: function (bNormalClose) {
|
||
// 异常断开：bNormalClose = false
|
||
// JS_Disconnect正常断开：bNormalClose = true
|
||
console.log("cbConnectClose");
|
||
this.oWebControl = null;
|
||
}
|
||
});
|
||
},
|
||
// 设置窗口控制回调
|
||
setCallbacks() {
|
||
let that = this
|
||
that.oWebControl.JS_SetWindowControlCallback({
|
||
cbIntegrationCallBack: that.cbIntegrationCallBack
|
||
});
|
||
},
|
||
// 推送消息
|
||
cbIntegrationCallBack(oData) {
|
||
console.log(JSON.stringify(oData.responseMsg));;
|
||
},
|
||
//初始化
|
||
initHKPlay(Appkey,Secret,Ip,Port) {
|
||
let that = this
|
||
this.getPubKey(function () {
|
||
|
||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||
let appkey = Appkey; //综合安防管理平台提供的appkey，必填
|
||
let secret = that.setEncrypt(Secret); //综合安防管理平台提供的secret，必填
|
||
let ip = Ip; //综合安防管理平台IP地址，必填
|
||
let playMode = 0; //初始播放模式：0-预览，1-回放
|
||
let port = Port; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||
let snapDir = "D:\\SnapDir"; //抓图存储路径
|
||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||
let layout = "1x1"; //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"; //自定义工具条按钮
|
||
let toolBarButtonIDs = "4098";
|
||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||
|
||
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: buttonIDs, //自定义工具条按钮
|
||
toolBarButtonIDs:toolBarButtonIDs
|
||
})
|
||
}).then(function (oData) {
|
||
that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px",""))); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||
that.startPreviewFun()
|
||
});
|
||
});
|
||
},
|
||
//获取公钥
|
||
getPubKey(callback) {
|
||
let that = this
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "getRSAPubKey",
|
||
argument: JSON.stringify({
|
||
keyLength: 1024
|
||
})
|
||
}).then(function (oData) {
|
||
console.log(oData);
|
||
if (oData.responseMsg.data) {
|
||
that.pubKey = oData.responseMsg.data;
|
||
callback()
|
||
}
|
||
})
|
||
},
|
||
//RSA加密
|
||
setEncrypt(value) {
|
||
let encrypt = new JSEncrypt();
|
||
encrypt.setPublicKey(this.pubKey);
|
||
return encrypt.encrypt(value);
|
||
},
|
||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||
setWndCover() {
|
||
let that = this
|
||
let iWidth = $(window).width();
|
||
let iHeight = $(window).height();
|
||
let oDivRect = document.getElementById("HKPlayWindowControl").getBoundingClientRect();
|
||
|
||
let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
|
||
let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
|
||
let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||
let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||
|
||
iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
|
||
iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
|
||
iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
|
||
iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;
|
||
|
||
that.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
|
||
if (iCoverLeft != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
|
||
}
|
||
if (iCoverTop != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||
}
|
||
if (iCoverRight != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
|
||
}
|
||
if (iCoverBottom != 0) {
|
||
that.oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
|
||
}
|
||
},
|
||
windowInitFun() {
|
||
let that = this
|
||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||
$(window).resize(function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px","")));
|
||
that.setWndCover();
|
||
}
|
||
});
|
||
|
||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||
$(window).scroll(function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_Resize(Number(that.width.replaceAll("px","")), Number(that.height.replaceAll("px","")));
|
||
that.setWndCover();
|
||
}
|
||
});
|
||
|
||
// 标签关闭
|
||
window.onunload = function () {
|
||
if (that.oWebControl != null) {
|
||
that.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
that.oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功
|
||
},
|
||
function () { // 断开与插件服务连接失败
|
||
});
|
||
}
|
||
}
|
||
|
||
},
|
||
//视频预览功能
|
||
startPreviewFun() {
|
||
let that = this
|
||
let streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||
let transMode = 1; //传输协议：0-UDP，1-TCP
|
||
let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||
let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||
let cameraIndexCode = this.token
|
||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||
|
||
that.oWebControl.JS_RequestInterface({
|
||
funcName: "startPreview",
|
||
argument: JSON.stringify({
|
||
cameraIndexCode: cameraIndexCode, //监控点编号
|
||
streamMode: streamMode, //主子码流标识
|
||
transMode: transMode, //传输协议
|
||
gpuMode: gpuMode, //是否开启GPU硬解
|
||
wndId: wndId //可指定播放窗口
|
||
})
|
||
})
|
||
},
|
||
//停止全部预览
|
||
stopAllPreviewFun() {
|
||
this.oWebControl.JS_RequestInterface({
|
||
funcName: "stopAllPreview"
|
||
});
|
||
},
|
||
closeHk(){
|
||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
this.oWebControl.JS_Disconnect().then(function(){}, function() {});
|
||
}
|
||
},
|
||
mounted() {
|
||
console.log(this.openOrClose)
|
||
|
||
},
|
||
computed: {
|
||
playDivCss() {
|
||
return {
|
||
width: (this.width + "").replace("px", "") + "px",
|
||
height: (this.height + "").replace("px", "") + "px",
|
||
position: "relative"
|
||
}
|
||
},
|
||
exStyle() {
|
||
return {
|
||
textAlign: "center",
|
||
width: (this.width + "").replace("px", "") + "px",
|
||
height: (this.height + "").replace("px", "") + "px"
|
||
}
|
||
},
|
||
PTZDiv() {
|
||
let W = parseInt((this.width + "").replace("px", ""))
|
||
let H = parseInt((this.height + "").replace("px", ""))
|
||
if (W < 400) {
|
||
W = "100px"
|
||
H = "100px"
|
||
} else {
|
||
W = "150px"
|
||
H = "150px"
|
||
}
|
||
return {
|
||
backgroundImage: "url('http://video.makalu.cc/img/jt.png')",
|
||
width: W,
|
||
height: H,
|
||
backgroundSize: "100%",
|
||
position: "relative"
|
||
}
|
||
},
|
||
PTZTop() {
|
||
return {
|
||
width: "33%",
|
||
height: "25%",
|
||
position: "absolute",
|
||
top: "0px",
|
||
left: "33%",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZBottom() {
|
||
return {
|
||
width: "33%",
|
||
height: "25%",
|
||
position: "absolute",
|
||
bottom: "0px",
|
||
left: "33%",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZLeft() {
|
||
return {
|
||
width: "25%",
|
||
height: "33%",
|
||
position: "absolute",
|
||
top: "33%",
|
||
left: "0px",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
PTZRight() {
|
||
return {
|
||
width: "25%",
|
||
height: "33%",
|
||
position: "absolute",
|
||
top: "33%",
|
||
right: "0px",
|
||
cursor: "pointer"
|
||
}
|
||
},
|
||
VIBtnCss() {
|
||
return {
|
||
width: "30px",
|
||
height: "30px",
|
||
background: "#38314b",
|
||
border: "1px solid #38314b",
|
||
fontSize: "20px",
|
||
outline: "0",
|
||
color: "#FFFFFF"
|
||
}
|
||
},
|
||
zoomViewCss() {
|
||
return {
|
||
width: "75px",
|
||
height: "30px",
|
||
color: "#dddddd",
|
||
background: "rgba(65, 63, 70, 0.5)",
|
||
textAlign: "center",
|
||
border: "0px solid rgba(65, 63, 70, 0.5)",
|
||
outline: "0",
|
||
fontSize: "14px"
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
token: function (now, old) {
|
||
console.log(now)
|
||
if (this.timeoutDetection) {
|
||
clearTimeout(this.timeoutDetection)
|
||
clearTimeout(this.timeoutDetectionInit)
|
||
}
|
||
if (!now) {
|
||
if (this.oWebControl != null) {
|
||
this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||
this.oWebControl.JS_Disconnect().then(function () { // 断开与插件服务连接成功
|
||
},
|
||
function () { // 断开与插件服务连接失败
|
||
});
|
||
}
|
||
}else{
|
||
this.init()
|
||
}
|
||
},
|
||
openOrClose:function (n,o) {
|
||
console.log(n)
|
||
if(n == 'close'){
|
||
this.closeHk()
|
||
}else{
|
||
if (this.type != "hk") {
|
||
this.settingVideoHost()
|
||
this.init()
|
||
this.fullScreenCss()
|
||
} else {
|
||
this.initPlugin();
|
||
this.windowInitFun();
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|