xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

播放接口调整

lite
453530270@qq.com 3 years ago
parent
8cc36b4265
commit
66ac3faeb8
22 changed files with 5177 additions and 1330 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 74
      public/haikang/jquery-1.12.4.min.js
  2. 1
      public/haikang/jsencrypt.min.js
  3. 2
      public/haikang/web-control_1.2.5.min.js
  4. 45
      public/index.html
  5. 1
      public/liveplayer-lib.min.js
  6. 424
      src/views/ty/index.vue
  7. 124
      src/views/ty/index10.vue
  8. 90
      src/views/ty/index11.vue
  9. 116
      src/views/ty/index12.vue
  10. 96
      src/views/ty/index15.vue
  11. 63
      src/views/ty/index18.vue
  12. 47
      src/views/ty/index19.vue
  13. 306
      src/views/ty/index2.vue
  14. 146
      src/views/ty/index20.vue
  15. 176
      src/views/ty/index21.vue
  16. 1124
      src/views/ty/index22.vue
  17. 335
      src/views/ty/index23.vue
  18. 502
      src/views/ty/index5.vue
  19. 694
      src/views/ty/index6.vue
  20. 128
      src/views/ty/index8.vue
  21. 180
      src/views/ty/index9.vue
  22. 1833
      yarn.lock

74
public/haikang/jquery-1.12.4.min.js
View File

File diff suppressed because one or more lines are too long

1
public/haikang/jsencrypt.min.js
View File

File diff suppressed because one or more lines are too long

2
public/haikang/web-control_1.2.5.min.js
View File

File diff suppressed because one or more lines are too long

45
public/index.html
View File

@ -1,21 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>宝安区公共文化体育服务中心智慧显示屏</title> <title>宝安区公共文化体育服务中心智慧显示屏</title>
<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script> <script src="./liveplayer-lib.min.js"></script>
</head> <script src="./haikang/jquery-1.12.4.min.js"></script>
<body> <script src="./haikang/jsencrypt.min.js"></script>
<noscript> <script src="./haikang/web-control_1.2.5.min.js"></script>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </head>
</noscript> <body>
<div id="app"></div> <noscript>
<script src="<%= BASE_URL %>static/h5player.min.js"></script> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<!-- built files will be auto injected --> <div id="app"></div>
</body> <script src="<%= BASE_URL %>static/h5player.min.js"></script>
</html>
<!-- built files will be auto injected -->
</body>
</html>

1
public/liveplayer-lib.min.js
View File

File diff suppressed because one or more lines are too long

424
src/views/ty/index.vue
View File

@ -1,168 +1,258 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<!-- <video id="playWnd" autoplay></video> -->
<div class="main"> <!--预览界面-->
<div class="center"> <!-- <div id="operate" class="operate">
<div id="player" class="item"> <div class="module" style="color:#fff;">
<!-- <Video :src="src1" :poster="poster" /> --> <div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value="">
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> </div>
<!-- <video class="demo-video" ref="player" muted autoplay></video> --> <div class="item" style="margin-top: 20px;margin-left: -20px;color:#fff;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div> <button style="width:20px;padding:0;margin:0;color:#fff;" id="startPreview" class="btn">预览</button>
<div class="item"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!-- <Video :src="src2" :poster="poster" /> --> <button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button>
</div> </div>
<div class="item"> </div>
<!-- <Video :src="src3" :poster="poster" /> --> </div> -->
</div> <!--视频窗口展示-->
<!-- <div class="item"></div> --> <video id="playWnd" autoplay></video>
</div>
</div> </div>
</v-scale-screen>
</div> </template>
</v-scale-screen> <script>
</template> // import flvjs from "flv.js";
<script> // import '@/utils/h5player.min.js'
// import flvjs from "flv.js"; // 引入api
import '@/utils/h5player.min.js' import * as homeApi from '@/api/home'
// 引入api import $ from "jquery";
import * as homeApi from '@/api/home' // import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation";
export default {
data() { export default {
return { data() {
player: null return {
} initCount: 0,
}, pubKey: '',
mounted() { oWebControl2: '',
this.$nextTick(() => { }
this.initPlayer() },
}) created() {
// this.getVideo() // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
}, this.$nextTick(() => {
methods: { this.initPlugin();
/**
* 初始化播放器 });
*/ },
initPlayer() { methods: {
this.player = new JSPlugin({ // 创建播放实例
// 需要英文字母开头 必填 initPlugin() {
szId: 'player', let _that = this;
// 必填,引用H5player.min.js的js相对路径 const oWebControl = new window.WebControl({
szBasePath: '/static/', szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 iServicePortEnd: 15900,
iWidth: 600, szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
iHeight: 400, cbConnectSuccess() {
console.log('创建WebControl实例成功');
// // 分屏播放，默认最大分屏4*4 oWebControl.JS_StartService('window', {
// iMaxSplit: 16, // WebControl实例创建成功后需要启动服务
// iCurrentSplit: 1, dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
})
// // 样式 .then(
// oStyle: { () => {
// border: '#343434', // // 启动插件服务成功
// borderSelect: '#FFCC00', oWebControl.JS_SetWindowControlCallback({
// background: '#000' // 设置消息回调
// } cbIntegrationCallBack: _that.cbIntegrationCallBack,
}) });
this.initPlugin() oWebControl.JS_CreateWnd('playWnd').then(() => {
}, //JS_CreateWnd创建视频播放窗口，宽高可设定
/** console.log('111111111111');
* 事件初始化 _that.init(); // 创建播放实例成功后初始化
*/ _that.getVideoFun('05edddc148b141c5930301af43154942')
initPlugin() { });
this.player.JS_SetWindowControlCallback({ },
windowEventSelect(iWindIndex) { () => {
// 插件选中窗口回调 // 启动插件服务失败
console.log('windowSelect callback: ', iWindIndex) console.log('启动插件服务失败');
}, }
pluginErrorHandler(iWindIndex, iErrorCode, oError) { )
// 插件错误回调 .catch((err) => {
console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError) console.log(err);
}, });
windowEventOver(iWindIndex) { },
// 鼠标移过回调 cbConnectError() {
console.log('鼠标移过回调', iWindIndex) // 创建WebControl实例失败
}, console.log('xxx');
windowEventOut(iWindIndex) { oWebControl = null;
// 鼠标移出回调 $('#playWnd').html('插件未启动，正在尝试启动，请稍候...');
console.log('鼠标移出回调', iWindIndex) window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
}, this.initCount++;
windowFullCcreenChange(bFull) { if (this.initCount < 3) {
// 全屏切换回调 setTimeout(function () {
console.log('全屏切换回调', bFull) this.initPlugin();
}, }, 3000);
firstFrameDisplay(iWndIndex, iWidth, iHeight) { } else {
// 首帧显示回调 $('#playWnd').html('插件启动失败，请检查插件是否安装！');
console.log('首帧显示回调', iWndIndex, iWidth, iHeight) }
}, },
performanceLack(iWndIndex) { cbConnectClose(bNormalClose) {
// 性能不足回调 // 异常断开：bNormalClose = false
console.log('性能不足回调', iWndIndex) // JS_Disconnect正常断开：bNormalClose = true
} console.log('cbConnectClose');
}) oWebControl = null;
this.play() },
}, });
/** this.oWebControl2 = oWebControl;
* 播放 },
*/ //初始化
play() { init() {
let preUrl = 'ws://192.168.2.135:10800/ws-flv/hls/stream_1.flv' let _that = this;
// const param = { this.getPubKey(function () {
// playURL: preUrl, // 请自行修改以下变量值
// // 1：高级模式 0：普通模式，高级模式支持所有 var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
// mode: 0 var secret = _that.setEncrypt("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填
// } var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
// 当前播放窗口下标 var playMode = 0; //初始播放模式：0-预览，1-回放
let index = 0 var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443
let mode = 0 var snapDir = ""; //抓图存储路径
// console.log(this.playerArr) var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
console.log(this.player.JS_Play); var layout = "1x1"; //playMode指定模式的布局
this.player.JS_Play(preUrl, { preUrl, mode }, index).then( var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
() => { var encryptedFields = "secret"; //加密字段，默认加密领域为secret
// 播放成功回调 var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
console.log('播放成功') var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
console.log('1111111111'); var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
}, // 请自行修改以上变量值
err => { _that.oWebControl2.JS_RequestInterface({
console.log('播放失败') funcName: "init",
console.log(preUrl); argument: JSON.stringify({
// console.info('JS_Play failed:', err) appkey: appkey, //API网关提供的appkey
console.info(err) secret: secret, //API网关提供的secret
} ip: ip, //API网关IP地址
) playMode: playMode, //播放模式（决定显示预览还是回放界面）
}, port: port, //端口
getVideo() { snapDir: snapDir, //抓图存储路径
let that = this videoDir: videoDir, //紧急录像或录像剪辑存储路径
console.log(that); layout: layout, //布局
homeApi.allGetVideo().then(res => { enableHTTPS: enableHTTPS, //是否启用HTTPS协议
// get allTimeData encryptedFields: encryptedFields, //加密字段
const tmpdata = res.data.returnData showToolbar: showToolbar, //是否显示工具栏
console.log(tmpdata); showSmart: showSmart, //是否显示智能信息
// this.day_num = tmpdata.day.noRepeatInNum buttonIDs: buttonIDs, //自定义工具条按钮
// this.week_num_num = tmpdata.week.noRepeatInNum }),
// this.mon_num = tmpdata.month.noRepeatInNum })
// this.year_num = tmpdata.year.noRepeatInNum .then((oData) => {
let width = document.querySelector("#playWnd").offsetWidth;
// let btdata = new Array(); let height = document.querySelector("#playWnd").offsetHeight;
// let bvdata = new Array(); _that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
// tmpdata.foreach(function(item,index){ console.log(oData);
// console.log(item); });
// console.log(index); });
// }); },
// 设置窗口控制回调
}); setCallbacks() {
}, this.oWebControl.JS_SetWindowControlCallback({
} cbIntegrationCallBack: this.cbIntegrationCallBack,
});
},
} // 推送消息
</script> cbIntegrationCallBack(oData) {
<style> //操作抓图录像时可以打印信息
.demo-video { console.log(oData);
max-width: 880px; },
max-height: 660px; //获取公钥
/* background-image: url(../../../src/utils/h5player.min.js); */ getPubKey(callback) {
} this.oWebControl2.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
})
.then((oData) => {
if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data;
console.log(this.pubKey);
callback();
}
});
},
//RSA加密
setEncrypt(value) {
var encrypt = new window.JSEncrypt();
encrypt.setPublicKey(this.pubKey);
return encrypt.encrypt(value);
},
//视频预览功能
getVideoFun(Code) {
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
var cameraIndexCode = Code; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
console.log(cameraIndexCode);
this.oWebControl2.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口
}),
})
.then((res) => {
// 播放成功回调
console.log('播放成功')
console.log(res);
},
err => {
console.log('播放失败')
console.log(preUrl);
// console.info('JS_Play failed:', err)
console.info(err)
});
},
//停止全部预览
stopVideoFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "stopAllPreview",
});
},
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
destroyVideoDiv() {
this.oWebControl2.JS_DestroyWnd()
.then((data) => {
console.log("销毁窗口成功");
})
.catch((err) => {
console.log("销毁窗口失败");
});
},
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
zhuaPicFun() {
this.oWebControl2.JS_RequestInterface({
funcName: "snapShot",
argument: {
name: "D:\test.jpg", // 窗口布局
},
});
},
},
}
</script>
<style>
.demo-video {
max-width: 880px;
max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */
}
</style> </style>

124
src/views/ty/index10.vue
View File

@ -1,63 +1,63 @@
<template> <template>
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"
:options="playerOptions"></video-player> :options="playerOptions"></video-player>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
// import videojs from "video.js"; // import videojs from "video.js";
// import "video.js/dist/video-js.css"; // import "video.js/dist/video-js.css";
// import "videojs-flash"; // import "videojs-flash";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
export default { export default {
data() { data() {
return { return {
playerOptions: { playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。 muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。 loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN', language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
techOrder: ['flash', 'html5'], // 兼容顺序 techOrder: ['flash', 'html5'], // 兼容顺序
flash: { flash: {
hls: { withCredentials: false }, hls: { withCredentials: false },
swf: 'static/video-js.swf' // 引入静态文件swf swf: 'static/video-js.swf' // 引入静态文件swf
}, },
html5: { hls: { withCredentials: false } }, html5: { hls: { withCredentials: false } },
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换 sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
type: 'rtmp/hls', type: 'rtmp/hls',
src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa'
}], }],
poster: "", //你的封面地址 poster: "", //你的封面地址
// width: document.documentElement.clientWidth, // width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: { controlBar: {
timeDivider: true, timeDivider: true,
durationDisplay: true, durationDisplay: true,
remainingTimeDisplay: false, remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮 fullscreenToggle: true //全屏按钮
} }
} }
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
} }
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

90
src/views/ty/index11.vue
View File

@ -1,46 +1,46 @@
<template> <template>
<div class='instance'> <div class='instance'>
<video id='video' class="video-js vjs-default-skin vjs-big-play-centered" /> <video id='video' class="video-js vjs-default-skin vjs-big-play-centered" />
</div> </div>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
// 引入api // 引入api
// import * as homeApi from '@/api/home' // import * as homeApi from '@/api/home'
export default { export default {
data() { data() {
return { return {
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1' nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1'
} }
}, },
mounted() { mounted() {
this.initVideoPlayer() this.initVideoPlayer()
}, },
methods: { methods: {
initVideoPlayer() { initVideoPlayer() {
// 第一个选中的要播放的video标签, 记得是video标签, // 第一个选中的要播放的video标签, 记得是video标签,
const currentInstance = this.$video(document.querySelector('video'), { const currentInstance = this.$video(document.querySelector('video'), {
autoplay: true, // 是否自动播放 autoplay: true, // 是否自动播放
controls: true, // 是否显示控件 controls: true, // 是否显示控件
}) })
currentInstance.src({ currentInstance.src({
src: this.nowPlayVideoUrl, src: this.nowPlayVideoUrl,
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频 type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
}) })
} }
}, },
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

116
src/views/ty/index12.vue
View File

@ -1,59 +1,59 @@
<template> <template>
<div class='instance'> <div class='instance'>
<view> <view>
<video id="dd" ref="rtmpPlayer2" :destroyOnClose="true" preload="auto" muted> <video id="dd" ref="rtmpPlayer2" :destroyOnClose="true" preload="auto" muted>
</video> </video>
</view> </view>
</div> </div>
</template> </template>
<script> <script>
import videojs from 'video.js' import videojs from 'video.js'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
export default { export default {
components: { components: {
}, },
mounted() { mounted() {
this.myPlayerRtmp = videojs('dd', { this.myPlayerRtmp = videojs('dd', {
sources: [{ sources: [{
type: 'rtmp/flv', type: 'rtmp/flv',
src: 'rtmp://ns8.indexforce.com/home/mystream' src: 'rtmp://ns8.indexforce.com/home/mystream'
}], }],
controls: true, controls: true,
muted: true, muted: true,
autoplay: true, autoplay: true,
preload: 'auto', preload: 'auto',
textTrackDisplay: false, textTrackDisplay: false,
errorDisplay: false, errorDisplay: false,
controlBar: false, controlBar: false,
bigPlayButton: false bigPlayButton: false
}) })
}, },
data() { data() {
return { return {
} }
}, },
methods: { methods: {
}, },
beforeDestroy() { beforeDestroy() {
if (this.myPlayerRtmp) { if (this.myPlayerRtmp) {
const myPlayerRtmp = this.$refs.rtmpPlayer2 // 不能用document 获取节点 const myPlayerRtmp = this.$refs.rtmpPlayer2 // 不能用document 获取节点
videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function
} }
} }
} }
</script> </script>
<style></style> <style></style>

96
src/views/ty/index15.vue
View File

@ -1,49 +1,49 @@
<template> <template>
<div class='instance'> <div class='instance'>
<div id="vs"></div> <div id="vs"></div>
</div> </div>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
// 引入api // 引入api
// import * as homeApi from '@/api/home' // import * as homeApi from '@/api/home'
import DemoPlugin from 'demoplugin' import DemoPlugin from 'demoplugin'
import Player from 'xgplayer' import Player from 'xgplayer'
export default { export default {
data() { data() {
return { return {
} }
}, },
mounted() { mounted() {
let player = new Player({ let player = new Player({
id: 'vs', id: 'vs',
url: 'rtmp://58.200.131.2:1935/livetv/hunantv', url: 'rtmp://58.200.131.2:1935/livetv/hunantv',
plugins: [DemoPlugin] plugins: [DemoPlugin]
}) })
const pipInstance = player.getPlugin('pip') const pipInstance = player.getPlugin('pip')
pipInstance.switchPIP() pipInstance.switchPIP()
player.registerPlugin(DemoPlugin) player.registerPlugin(DemoPlugin)
// const player = new Player({ // const player = new Player({
// ..., // ...,
// plugins: [DemoPlugin] // plugins: [DemoPlugin]
// }) // })
}, },
methods: { methods: {
}, },
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

63
src/views/ty/index18.vue
View File

@ -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>

47
src/views/ty/index19.vue
View File

@ -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>

306
src/views/ty/index2.vue
View File

@ -1,154 +1,154 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
<div class="center"> <div class="center">
<div class="item"> <div class="item">
<!-- <Video :src="src1" :poster="poster" /> --> <!-- <Video :src="src1" :poster="poster" /> -->
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> <!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> -->
<video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv"> <video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv">
<!-- <source src="" /> --> <!-- <source src="" /> -->
</video> </video>
</div> </div>
<div class="item"> <div class="item">
<!-- <Video :src="src2" :poster="poster" /> --> <!-- <Video :src="src2" :poster="poster" /> -->
</div> </div>
<div class="item"> <div class="item">
<!-- <Video :src="src3" :poster="poster" /> --> <!-- <Video :src="src3" :poster="poster" /> -->
</div> </div>
<!-- <div class="item"></div> --> <!-- <div class="item"></div> -->
</div> </div>
</div> </div>
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// 引入echarts // 引入echarts
// import * as echarts from "echarts"; // import * as echarts from "echarts";
import flvjs from "flv.js"; import flvjs from "flv.js";
// 引入api // 引入api
// import * as homeApi from '@/api/home' // import * as homeApi from '@/api/home'
// import Video from '../../components/btgym/Video.vue' // import Video from '../../components/btgym/Video.vue'
export default { export default {
// components: { // components: {
// Video // Video
// }, // },
data() { data() {
return { return {
player: null, player: null,
}; };
}, },
mounted() { mounted() {
// this.getVideo() // this.getVideo()
// var videoElement1 = document.getElementById('myFlvVideo'); // var videoElement1 = document.getElementById('myFlvVideo');
// this.$nextTick(() => { // this.$nextTick(() => {
// this.createVideo() // this.createVideo()
// }) // })
// this.createVideo() // this.createVideo()
this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4') this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4')
}, },
methods: { methods: {
// createVideo() { // createVideo() {
// if (flvjs.isSupported()) { // if (flvjs.isSupported()) {
// var videoElement = document.getElementById('myFlvVideo') // var videoElement = document.getElementById('myFlvVideo')
// console.log(videoElement); // console.log(videoElement);
// this.flvPlayer = flvjs.createPlayer( // this.flvPlayer = flvjs.createPlayer(
// { // {
// type: 'flv', // type: 'flv',
// isLive: true, // isLive: true,
// hasAudio: false, // hasAudio: false,
// url: // url:
// 'rtsp://192.168.66.13:554/openUrl/MXdnCG4' // 'rtsp://192.168.66.13:554/openUrl/MXdnCG4'
// }, // },
// { // {
// cors: true, // 是否跨域 // cors: true, // 是否跨域
// enableWorker: true, // 是否多线程工作 // enableWorker: true, // 是否多线程工作
// enableStashBuffer: false, // 是否启用缓存 // enableStashBuffer: false, // 是否启用缓存
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb // stashInitialSize: 128, // 缓存大小(kb) 默认384kb
// autoCleanupSourceBuffer: true // 是否自动清理缓存 // autoCleanupSourceBuffer: true // 是否自动清理缓存
// } // }
// ) // )
// this.flvPlayer.attachMediaElement(videoElement) // this.flvPlayer.attachMediaElement(videoElement)
// this.flvPlayer.load() // this.flvPlayer.load()
// // this.flvPlayer.play() // // this.flvPlayer.play()
// // 报错重连 // // 报错重连
// // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { // // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
// // console.log('errorType:', errType) // // console.log('errorType:', errType)
// // console.log('errorDetail:', errDetail) // // console.log('errorDetail:', errDetail)
// // if (this.flvPlayer) { // // if (this.flvPlayer) {
// // this.destoryVideo() // // this.destoryVideo()
// // this.createVideo() // // this.createVideo()
// // } // // }
// // }) // // })
// } // }
// }, // },
init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址 init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因 setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签 var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额 //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
if (this.player !== null) { if (this.player !== null) {
this.player.pause(); this.player.pause();
this.player.unload(); this.player.unload();
this.player.detachMediaElement(); this.player.detachMediaElement();
this.player.destroy(); this.player.destroy();
this.player = null; this.player = null;
} }
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去 this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
{ {
type: "flv", type: "flv",
url: val, //你的url地址 url: val, //你的url地址
isLive: true, //数据源是否为直播流 isLive: true, //数据源是否为直播流
hasAudio: false, //数据源是否包含有音频 hasAudio: false, //数据源是否包含有音频
hasVideo: true, //数据源是否包含有视频 hasVideo: true, //数据源是否包含有视频
enableStashBuffer: true, //是否启用缓存区 enableStashBuffer: true, //是否启用缓存区
}, },
{ {
enableWorker: false, //不启用分离线程 enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区 enableStashBuffer: false, //关闭IO隐藏缓冲区
autoCleanupSourceBuffer: true, //自动清除缓存 autoCleanupSourceBuffer: true, //自动清除缓存
lazyLoad: false, lazyLoad: false,
} }
); );
this.player.attachMediaElement(videoElement); //放到dom中去 this.player.attachMediaElement(videoElement); //放到dom中去
this.player.load();//准备完成 this.player.load();//准备完成
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放 //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
this.player.play();//播放 this.player.play();//播放
} }
}, 1000); }, 1000);
}, },
// destoryVideo() { // destoryVideo() {
// this.flvPlayer.pause() // this.flvPlayer.pause()
// this.flvPlayer.unload() // this.flvPlayer.unload()
// this.flvPlayer.detachMediaElement() // this.flvPlayer.detachMediaElement()
// this.flvPlayer.destroy() // this.flvPlayer.destroy()
// this.flvPlayer = null // this.flvPlayer = null
// } // }
}, },
beforeUnmount() { beforeUnmount() {
if (this.player) { if (this.player) {
this.player.pause(); this.player.pause();
this.player.unload(); this.player.unload();
this.player.detachMediaElement(); this.player.detachMediaElement();
this.player.destroy(); this.player.destroy();
this.player = null; this.player = null;
} }
}, },
// }, // },
}; };
</script> </script>

146
src/views/ty/index20.vue
View File

@ -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>

176
src/views/ty/index21.vue
View File

@ -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>

1124
src/views/ty/index22.vue
View File

File diff suppressed because it is too large

335
src/views/ty/index23.vue
View File

@ -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>

502
src/views/ty/index5.vue
View File

@ -1,252 +1,252 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
<div class="center"> <div class="center">
<!-- <el-button @click="begin"></el-button> --> <!-- <el-button @click="begin"></el-button> -->
<video id="playWnd" autoplay></video> <video id="playWnd" autoplay></video>
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> <!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到-->
</div> </div>
</div> </div>
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
// import '@/utils/h5player.min.js' // import '@/utils/h5player.min.js'
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S
import { WebControl } from 'web-control'; import { WebControl } from 'web-control';
export default { export default {
data() { data() {
return { return {
initCount: 0, initCount: 0,
pubKey: '', pubKey: '',
oWebControl2: '', oWebControl2: '',
//变量名随便命名的，不太会命名 //变量名随便命名的，不太会命名
} }
}, },
created() { created() {
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
this.$nextTick(() => { this.$nextTick(() => {
this.initPlugin(); this.initPlugin();
this.getVideoFun('05edddc148b141c5930301af43154942') this.getVideoFun('05edddc148b141c5930301af43154942')
}); });
}, },
methods: { methods: {
// 创建播放实例 // 创建播放实例
initPlugin() { initPlugin() {
let _that = this; let _that = this;
var oWebControl = new WebControl({ var oWebControl = new WebControl({
szPluginContainer: 'playWnd', // 指定容器id szPluginContainer: 'playWnd', // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909, iServicePortEnd: 15909,
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
cbConnectSuccess() { cbConnectSuccess() {
console.log('创建WebControl实例成功'); console.log('创建WebControl实例成功');
oWebControl.JS_StartService('window', { oWebControl.JS_StartService('window', {
// WebControl实例创建成功后需要启动服务 // WebControl实例创建成功后需要启动服务
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
}) })
.then( .then(
() => { () => {
// // 启动插件服务成功 // // 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({ oWebControl.JS_SetWindowControlCallback({
// 设置消息回调 // 设置消息回调
cbIntegrationCallBack: _that.cbIntegrationCallBack, cbIntegrationCallBack: _that.cbIntegrationCallBack,
}); });
oWebControl.JS_CreateWnd('playWnd').then(() => { oWebControl.JS_CreateWnd('playWnd').then(() => {
//JS_CreateWnd创建视频播放窗口，宽高可设定 //JS_CreateWnd创建视频播放窗口，宽高可设定
_that.init(); // 创建播放实例成功后初始化 _that.init(); // 创建播放实例成功后初始化
console.log('111111111111'); console.log('111111111111');
}); });
}, },
() => { () => {
// 启动插件服务失败 // 启动插件服务失败
} }
) )
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
}, },
cbConnectError() { cbConnectError() {
// 创建WebControl实例失败 // 创建WebControl实例失败
console.log('xxx'); console.log('xxx');
oWebControl = null; oWebControl = null;
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); $('#playWnd').html('插件未启动，正在尝试启动，请稍候...');
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++; this.initCount++;
if (this.initCount < 3) { if (this.initCount < 3) {
setTimeout(function () { setTimeout(function () {
this.initPlugin(); this.initPlugin();
}, 3000); }, 3000);
} else { } else {
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); $('#playWnd').html('插件启动失败，请检查插件是否安装！');
} }
}, },
cbConnectClose() { cbConnectClose() {
// 异常断开：bNormalClose = false // 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true // JS_Disconnect正常断开：bNormalClose = true
console.log('cbConnectClose'); console.log('cbConnectClose');
oWebControl = null; oWebControl = null;
}, },
}); });
this.oWebControl2 = oWebControl; this.oWebControl2 = oWebControl;
}, },
//初始化 //初始化
init() { init() {
let _that = this; let _that = this;
this.getPubKey(function () { this.getPubKey(function () {
// 请自行修改以下变量值 // 请自行修改以下变量值
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填 var appkey = "29940726"; //综合安防管理平台提供的appkey，必填
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填 var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填 var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放 var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443 var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = ""; //抓图存储路径 var snapDir = ""; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "1x1"; //playMode指定模式的布局 var layout = "1x1"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = "secret"; //加密字段，默认加密领域为secret var encryptedFields = "secret"; //加密字段，默认加密领域为secret
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
// 请自行修改以上变量值 // 请自行修改以上变量值
_that.oWebControl2.JS_RequestInterface({ _that.oWebControl2.JS_RequestInterface({
funcName: "init", funcName: "init",
argument: JSON.stringify({ argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret secret: secret, //API网关提供的secret
ip: ip, //API网关IP地址 ip: ip, //API网关IP地址
playMode: playMode, //播放模式（决定显示预览还是回放界面） playMode: playMode, //播放模式（决定显示预览还是回放界面）
port: port, //端口 port: port, //端口
snapDir: snapDir, //抓图存储路径 snapDir: snapDir, //抓图存储路径
videoDir: videoDir, //紧急录像或录像剪辑存储路径 videoDir: videoDir, //紧急录像或录像剪辑存储路径
layout: layout, //布局 layout: layout, //布局
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 enableHTTPS: enableHTTPS, //是否启用HTTPS协议
encryptedFields: encryptedFields, //加密字段 encryptedFields: encryptedFields, //加密字段
showToolbar: showToolbar, //是否显示工具栏 showToolbar: showToolbar, //是否显示工具栏
showSmart: showSmart, //是否显示智能信息 showSmart: showSmart, //是否显示智能信息
buttonIDs: buttonIDs, //自定义工具条按钮 buttonIDs: buttonIDs, //自定义工具条按钮
}), }),
}) })
.then((res) => { .then((res) => {
let width = document.querySelector("#playWnd").offsetWidth; let width = document.querySelector("#playWnd").offsetWidth;
let height = document.querySelector("#playWnd").offsetHeight; let height = document.querySelector("#playWnd").offsetHeight;
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 _that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。
console.log('22222222222'); console.log('22222222222');
console.log(res); console.log(res);
}); });
}); });
}, },
// 设置窗口控制回调 // 设置窗口控制回调
setCallbacks() { setCallbacks() {
this.oWebControl.JS_SetWindowControlCallback({ this.oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: this.cbIntegrationCallBack, cbIntegrationCallBack: this.cbIntegrationCallBack,
}); });
}, },
// 推送消息 // 推送消息
cbIntegrationCallBack(oData) { cbIntegrationCallBack(oData) {
//操作抓图录像时可以打印信息 //操作抓图录像时可以打印信息
console.log(oData); console.log(oData);
}, },
//获取公钥 //获取公钥
getPubKey(callback) { getPubKey(callback) {
this.oWebControl2.JS_RequestInterface({ this.oWebControl2.JS_RequestInterface({
funcName: "getRSAPubKey", funcName: "getRSAPubKey",
argument: JSON.stringify({ argument: JSON.stringify({
keyLength: 1024, keyLength: 1024,
}), }),
}) })
.then((oData) => { .then((oData) => {
console.log(oData); console.log(oData);
if (oData.responseMsg.data) { if (oData.responseMsg.data) {
this.pubKey = oData.responseMsg.data; this.pubKey = oData.responseMsg.data;
callback(); callback();
} }
}); });
}, },
//RSA加密 //RSA加密
// setEncrypt(value) { // setEncrypt(value) {
// var encrypt = new encrypt(); // var encrypt = new encrypt();
// encrypt.setPublicKey(this.pubKey); // encrypt.setPublicKey(this.pubKey);
// console.log(encrypt.encrypt(value)); // console.log(encrypt.encrypt(value));
// return encrypt.encrypt(value); // return encrypt.encrypt(value);
// }, // },
//视频预览功能 //视频预览功能
getVideoFun(Code) { getVideoFun(Code) {
let _that = this; let _that = this;
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 //因为我这里有很多监控点编号需要来回切换，所以用参数传递进来
var cameraIndexCode = Code; //获取输入的监控点编号值，必填 var cameraIndexCode = Code; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流 var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用 var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
console.log('44444444444'); console.log('44444444444');
console.log(cameraIndexCode); console.log(cameraIndexCode);
console.log( _that.oWebControl2); console.log( _that.oWebControl2);
console.log( _that.oWebControl2.JS_RequestInterface); console.log( _that.oWebControl2.JS_RequestInterface);
_that.oWebControl2.JS_RequestInterface({ _that.oWebControl2.JS_RequestInterface({
funcName: "startPreview", funcName: "startPreview",
argument: JSON.stringify({ argument: JSON.stringify({
cameraIndexCode: cameraIndexCode, //监控点编号 cameraIndexCode: cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识 streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议 transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解 gpuMode: gpuMode, //是否开启GPU硬解
wndId: wndId, //可指定播放窗口 wndId: wndId, //可指定播放窗口
}), }),
}) })
.then((res) => { .then((res) => {
console.log(res, "res"); console.log(res, "res");
console.log('3333333333'); console.log('3333333333');
}).catch((err) => { }).catch((err) => {
console.log(err); console.log(err);
}); });
}, },
//停止全部预览 //停止全部预览
stopVideoFun() { stopVideoFun() {
this.oWebControl2.JS_RequestInterface({ this.oWebControl2.JS_RequestInterface({
funcName: "stopAllPreview", funcName: "stopAllPreview",
}); });
}, },
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， // 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制，
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， // 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁，
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 // 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。
destroyVideoDiv() { destroyVideoDiv() {
this.oWebControl2.JS_DestroyWnd() this.oWebControl2.JS_DestroyWnd()
.then((data) => { .then((data) => {
console.log("销毁窗口成功"); console.log("销毁窗口成功");
console.log(data); console.log(data);
}) })
.catch((err) => { .catch((err) => {
console.log("销毁窗口失败"); console.log("销毁窗口失败");
console.log(err); console.log(err);
}); });
}, },
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 // 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。
zhuaPicFun() { zhuaPicFun() {
this.oWebControl2.JS_RequestInterface({ this.oWebControl2.JS_RequestInterface({
funcName: "snapShot", funcName: "snapShot",
argument: { argument: {
name: "D:\test.jpg", // 窗口布局 name: "D:\test.jpg", // 窗口布局
}, },
}); });
}, },
} }
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

694
src/views/ty/index6.vue
View File

@ -1,348 +1,348 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
<div class="center"> <div class="center">
<!-- <el-button @click="begin"></el-button> --> <!-- <el-button @click="begin"></el-button> -->
<div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd" <div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd"
v-html="oWebControl === null ? playText : ''"></div> v-html="oWebControl === null ? playText : ''"></div>
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> <!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到-->
</div> </div>
</div> </div>
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
// import '@/utils/h5player.min.js' // import '@/utils/h5player.min.js'
// import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S // import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S
import { WebControl } from 'web-control'; import { WebControl } from 'web-control';
export default { export default {
props: { props: {
// 内网、公网 4个配置 // 内网、公网 4个配置
// appkey: { // appkey: {
// type: "String", // type: "String",
// default: "29940726", // default: "29940726",
// }, // },
// secret: { // secret: {
// type: "String", // type: "String",
// default: "", // default: "",
// }, // },
// ip: { // ip: {
// type: "String", // type: "String",
// default: "", // default: "",
// }, // },
// port: { // port: {
// type: "Number", // type: "Number",
// default: 8888, // default: 8888,
// }, // },
// 视频布局 // 视频布局
// layout: { // layout: {
// type: "String", // type: "String",
// default: "1x1", // default: "1x1",
// }, // },
// 初始播放模式：0-预览，1-回放 // 初始播放模式：0-预览，1-回放
// playMode: { // playMode: {
// type: "Number", // type: "Number",
// default: 0, // default: 0,
// }, // },
// 是否显示工具栏，0-不显示，非0-显示 // 是否显示工具栏，0-不显示，非0-显示
showToolbar: { showToolbar: {
type: Number, type: Number,
default: 1, default: 1,
}, },
// 工具栏按钮 // 工具栏按钮
toolBarButtonIDs: { toolBarButtonIDs: {
type: String, type: String,
default: "4098,4097", default: "4098,4097",
}, },
// 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
showSmart: { showSmart: {
type: Number, type: Number,
default: 1, default: 1,
}, },
// 自定义工具条按钮 // 自定义工具条按钮
buttonIDs: { buttonIDs: {
type: String, type: String,
default: "0,16,256,257,258,259,260,512,515,516,517,768,769", default: "0,16,256,257,258,259,260,512,515,516,517,768,769",
}, },
// 相机编号 // 相机编号
cameraIndexCode: { cameraIndexCode: {
type: [String, Number], type: [String, Number],
}, },
// 销毁并重新初始化海康插件 // 销毁并重新初始化海康插件
refresh: { refresh: {
type: Number, type: Number,
}, },
// 视频播放容器id // 视频播放容器id
containerId: { containerId: {
type: String, type: String,
default: "playWnd", default: "playWnd",
} }
}, },
data() { data() {
return { return {
oWebControl: null, oWebControl: null,
plugKey: "", plugKey: "",
// 视频相关参数 // 视频相关参数
videoParams: { videoParams: {
cameraIndexCode: "", //监控点编号 cameraIndexCode: "", //监控点编号
streamMode: 0, //主子码流标识：0-主码流，1-子码流 streamMode: 0, //主子码流标识：0-主码流，1-子码流
transMode: 1, //传输协议：0-UDP，1-TCP transMode: 1, //传输协议：0-UDP，1-TCP
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
wndId: 1, //播放窗口序号 wndId: 1, //播放窗口序号
}, },
videoWidth: null, videoWidth: null,
videoHeight: null, videoHeight: null,
playText: "启动中...", playText: "启动中...",
initCount: 0, // 启动次数 initCount: 0, // 启动次数
href: "", href: "",
}; };
}, },
created() { created() {
this.getPluginUrl(); this.getPluginUrl();
this.createdVideo(); this.createdVideo();
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.videoWidth = this.$refs.playWnd.offsetWidth; this.videoWidth = this.$refs.playWnd.offsetWidth;
this.videoHeight = this.$refs.playWnd.offsetHeight; this.videoHeight = this.$refs.playWnd.offsetHeight;
}); });
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
window.addEventListener("resize", this.windowResize); window.addEventListener("resize", this.windowResize);
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
window.addEventListener("scroll", this.windowScroll); window.addEventListener("scroll", this.windowScroll);
}, },
watch: { watch: {
// 监听相机编码 // 监听相机编码
cameraIndexCode(value) { cameraIndexCode(value) {
if (value) { if (value) {
this.videoParams.cameraIndexCode = value.trim(); this.videoParams.cameraIndexCode = value.trim();
this.videoParams.wndId = -1; this.videoParams.wndId = -1;
if (this.oWebControl) { if (this.oWebControl) {
this.previewVideo(); this.previewVideo();
} else { } else {
this.createdVideo(); this.createdVideo();
} }
} }
}, },
// 刷新 // 刷新
refresh() { refresh() {
this.destroyeWnd(); this.destroyeWnd();
setTimeout(() => { setTimeout(() => {
this.createdVideo(); this.createdVideo();
}, 0); }, 0);
} }
}, },
methods: { methods: {
// 获取海康插件下载地址 // 获取海康插件下载地址
getPluginUrl() { getPluginUrl() {
return '' return ''
// getList(1, 999).then(res => { // getList(1, 999).then(res => {
// if (res.data.code === 200) { // if (res.data.code === 200) {
// const data = res.data.data.records; // const data = res.data.data.records;
// data.length // data.length
// if (data.length) { // if (data.length) {
// let existArr = data.filter(item => item.paramKey === ""); // let existArr = data.filter(item => item.paramKey === "");
// if (existArr.length) { // if (existArr.length) {
// this.href = existArr[0].paramValue; // this.href = existArr[0].paramValue;
// } // }
// } // }
// } // }
// }).catch(err => { // }).catch(err => {
// // 报错 // // 报错
// console.log(err) // console.log(err)
// }) // })
; ;
}, },
// 初始化+预览 // 初始化+预览
createdVideo() { createdVideo() {
this.initPlugin(() => { this.initPlugin(() => {
this.previewVideo(); this.previewVideo();
}); });
}, },
// 创建播放实例 // 创建播放实例
initPlugin(callback) { initPlugin(callback) {
this.oWebControl = new WebControl({ this.oWebControl = new WebControl({
szPluginContainer: this.containerId, // 指定容器id szPluginContainer: this.containerId, // 指定容器id
iServicePortStart: 15900, iServicePortStart: 15900,
iServicePortEnd: 15909, iServicePortEnd: 15909,
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
// 创建WebControl实例成功 // 创建WebControl实例成功
cbConnectSuccess: () => { cbConnectSuccess: () => {
this.oWebControl this.oWebControl
.JS_StartService("window", { .JS_StartService("window", {
// WebControl实例创建成功后需要启动服务 // WebControl实例创建成功后需要启动服务
dllPath: "./VideoPluginConnect.dll", dllPath: "./VideoPluginConnect.dll",
}) })
.then(() => { .then(() => {
// 启动插件服务成功 // 启动插件服务成功
this.oWebControl.JS_SetWindowControlCallback({ this.oWebControl.JS_SetWindowControlCallback({
// 设置消息回调 // 设置消息回调
cbIntegrationCallBack: this.cbIntegrationCallBack, cbIntegrationCallBack: this.cbIntegrationCallBack,
}); });
this.oWebControl this.oWebControl
.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight) .JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight)
.then(() => { .then(() => {
this.getVersion(callback); this.getVersion(callback);
}); });
}); });
}, },
cbConnectError: () => { cbConnectError: () => {
// 创建WebControl实例失败 // 创建WebControl实例失败
this.oWebControl = null; this.oWebControl = null;
this.playText = "插件未启动，正在尝试启动，请稍候..."; this.playText = "插件未启动，正在尝试启动，请稍候...";
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++; this.initCount++;
if (this.initCount < 3) { if (this.initCount < 3) {
setTimeout(() => { setTimeout(() => {
this.initPlugin(); this.initPlugin();
}, 2000); }, 2000);
} else { } else {
this.playText = ` this.playText = `
插件启动失败，请检查插件是否安装！ 插件启动失败，请检查插件是否安装！
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; <a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
} }
}, },
cbConnectClose: () => { cbConnectClose: () => {
this.oWebControl = null; this.oWebControl = null;
}, },
}); });
}, },
// 消息回调 // 消息回调
cbIntegrationCallBack() { }, cbIntegrationCallBack() { },
// 初始化 // 初始化
init(callback) { init(callback) {
this.getPubKey(() => { this.getPubKey(() => {
this.oWebControl this.oWebControl
.JS_RequestInterface({ .JS_RequestInterface({
funcName: "init", funcName: "init",
argument: JSON.stringify({ argument: JSON.stringify({
appkey: '29940726', //API网关提供的appkey appkey: '29940726', //API网关提供的appkey
secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret
ip: this.ip, //API网关IP地址z ip: this.ip, //API网关IP地址z
playMode: this.playMode, //播放模式（决定显示预览还是回放界面） playMode: this.playMode, //播放模式（决定显示预览还是回放界面）
port: this.port, //端口 port: this.port, //端口
snapDir: "C:\\SnapDir", //抓图存储路径 snapDir: "C:\\SnapDir", //抓图存储路径
videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径 videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径
layout: this.layout, //布局 layout: this.layout, //布局
enableHTTPS: 1, //是否启用HTTPS协议 enableHTTPS: 1, //是否启用HTTPS协议
encryptedFields: "secret", //加密字段 encryptedFields: "secret", //加密字段
showToolbar: this.showToolbar, //是否显示工具栏 showToolbar: this.showToolbar, //是否显示工具栏
toolBarButtonIDs: this.toolBarButtonIDs, toolBarButtonIDs: this.toolBarButtonIDs,
showSmart: this.showSmart, //是否显示智能信息 showSmart: this.showSmart, //是否显示智能信息
buttonIDs: this.buttonIDs, //自定义工具条按钮 buttonIDs: this.buttonIDs, //自定义工具条按钮
protocol: "hls", protocol: "hls",
}), }),
}) })
.then(() => { .then(() => {
// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
if (callback) { if (callback) {
callback(); callback();
} }
}); });
}); });
}, },
// 获取公钥 // 获取公钥
getPubKey(callback) { getPubKey(callback) {
const params = { const params = {
funcName: "getRSAPubKey", funcName: "getRSAPubKey",
argument: JSON.stringify({ keyLength: 1024 }), argument: JSON.stringify({ keyLength: 1024 }),
}; };
this.oWebControl.JS_RequestInterface(params).then((res) => { this.oWebControl.JS_RequestInterface(params).then((res) => {
if (res.responseMsg.data) { if (res.responseMsg.data) {
this.plugKey = res.responseMsg.data; this.plugKey = res.responseMsg.data;
callback(); callback();
} }
}); });
}, },
// 视频流RSA加密 // 视频流RSA加密
// setEncrypt(value) { // setEncrypt(value) {
// const encrypt = new JSEncrypt(); // const encrypt = new JSEncrypt();
// encrypt.setPublicKey(this.plugKey); // encrypt.setPublicKey(this.plugKey);
// return encrypt.encrypt(value); // return encrypt.encrypt(value);
// }, // },
// 视频预览 // 视频预览
previewVideo() { previewVideo() {
this.oWebControl.JS_RequestInterface({ this.oWebControl.JS_RequestInterface({
funcName: "startPreview", funcName: "startPreview",
argument: JSON.stringify(this.videoParams), argument: JSON.stringify(this.videoParams),
}); });
}, },
// 显示全屏 // 显示全屏
showFullScreen() { showFullScreen() {
this.oWebControl.JS_RequestInterface({ this.oWebControl.JS_RequestInterface({
funcName: "setFullScreen", funcName: "setFullScreen",
}); });
}, },
// 退出全屏 // 退出全屏
exitFullScreen() { exitFullScreen() {
this.oWebControl.JS_RequestInterface({ this.oWebControl.JS_RequestInterface({
funcName: "exitFullScreen", funcName: "exitFullScreen",
}); });
}, },
windowScroll() { windowScroll() {
if (this.oWebControl != null) { if (this.oWebControl != null) {
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
} }
}, },
windowResize() { windowResize() {
this.videoWidth = this.$refs.playWnd.offsetWidth; this.videoWidth = this.$refs.playWnd.offsetWidth;
this.videoHeight = this.$refs.playWnd.offsetHeight; this.videoHeight = this.$refs.playWnd.offsetHeight;
if (this.oWebControl) { if (this.oWebControl) {
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
} }
}, },
// 销毁海康插件 // 销毁海康插件
destroyeWnd() { destroyeWnd() {
if (this.oWebControl) { if (this.oWebControl) {
this.oWebControl.JS_HideWnd(); this.oWebControl.JS_HideWnd();
this.oWebControl.JS_Disconnect().then(() => { }); this.oWebControl.JS_Disconnect().then(() => { });
} }
}, },
// 获取海康插件版本号 // 获取海康插件版本号
getVersion(callback) { getVersion(callback) {
if (this.oWebControl) { if (this.oWebControl) {
this.oWebControl.JS_RequestInterface({ this.oWebControl.JS_RequestInterface({
funcName: "getVersion", funcName: "getVersion",
}).then(res => { }).then(res => {
if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") { if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") {
//JS_CreateWnd创建视频播放窗口，宽高可设定 //JS_CreateWnd创建视频播放窗口，宽高可设定
this.init(callback); // 创建播放实例成功后初始化 this.init(callback); // 创建播放实例成功后初始化
console.log("启动插件成功！"); console.log("启动插件成功！");
} else { } else {
this.destroyeWnd(); this.destroyeWnd();
this.playText = ` this.playText = `
插件版本不正确，请重新下载版本安装覆盖！ 插件版本不正确，请重新下载版本安装覆盖！
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; <a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
} }
}) })
} }
}, },
}, },
beforeDestroy() { beforeDestroy() {
if (this.oWebControl) { if (this.oWebControl) {
this.oWebControl.JS_HideWnd(); this.oWebControl.JS_HideWnd();
this.oWebControl this.oWebControl
.JS_DestroyWnd({ .JS_DestroyWnd({
funcName: "destroyeWnd", funcName: "destroyeWnd",
}) })
.then(() => { }); .then(() => { });
} }
document.removeEventListener("resize", this.windowResize); document.removeEventListener("resize", this.windowResize);
document.removeEventListener("scroll", this.windowScroll); document.removeEventListener("scroll", this.windowScroll);
}, },
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

128
src/views/ty/index8.vue
View File

@ -1,65 +1,65 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
<div class="center"> <div class="center">
<hls-video :videoUrl="currentFileUrl" class="videoBox" <hls-video :videoUrl="currentFileUrl" class="videoBox"
style="height: 370px"></hls-video> style="height: 370px"></hls-video>
</div> </div>
</div> </div>
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
import HlsVideo from "../../components/btgym/HlsVideo.vue"; import HlsVideo from "../../components/btgym/HlsVideo.vue";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
export default { export default {
components: { HlsVideo }, components: { HlsVideo },
data() { data() {
return { return {
currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址 currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
getVideo() { getVideo() {
let that = this let that = this
console.log(that); console.log(that);
homeApi.allGetVideo().then(res => { homeApi.allGetVideo().then(res => {
// get allTimeData // get allTimeData
const tmpdata = res.data.returnData const tmpdata = res.data.returnData
console.log(tmpdata); console.log(tmpdata);
// this.day_num = tmpdata.day.noRepeatInNum // this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum // this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum // this.mon_num = tmpdata.month.noRepeatInNum
// this.year_num = tmpdata.year.noRepeatInNum // this.year_num = tmpdata.year.noRepeatInNum
// let btdata = new Array(); // let btdata = new Array();
// let bvdata = new Array(); // let bvdata = new Array();
// tmpdata.foreach(function(item,index){ // tmpdata.foreach(function(item,index){
// console.log(item); // console.log(item);
// console.log(index); // console.log(index);
// }); // });
}); });
}, },
} }
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

180
src/views/ty/index9.vue
View File

@ -1,91 +1,91 @@
<template> <template>
<v-scale-screen width="1920" height="1080"> <v-scale-screen width="1920" height="1080">
<div id="ty"> <div id="ty">
<div class="main"> <div class="main">
<div class="center"> <div class="center">
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" preload="auto" <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" preload="auto"
autoplay style="width: 1200px;height: 640px;" controls data-setup="{}"></video> autoplay style="width: 1200px;height: 640px;" controls data-setup="{}"></video>
</div> </div>
</div> </div>
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// import flvjs from "flv.js"; // import flvjs from "flv.js";
import videojs from "video.js"; import videojs from "video.js";
import "video.js/dist/video-js.css"; import "video.js/dist/video-js.css";
import "videojs-flash"; import "videojs-flash";
// 引入api // 引入api
import * as homeApi from '@/api/home' import * as homeApi from '@/api/home'
export default { export default {
data() { data() {
return { return {
} }
}, },
mounted() { mounted() {
this.playVideo() this.playVideo()
}, },
methods: { methods: {
playVideo() { playVideo() {
console.log('22222222222'); console.log('22222222222');
var videoPlayer = videojs( var videoPlayer = videojs(
"my-player", "my-player",
{ {
sources: [ sources: [
{ {
src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa",
type: "rtmp/flv" type: "rtmp/flv"
} }
], ],
muted: true, muted: true,
controls: true, controls: true,
autoplay: true, autoplay: true,
loop: true, loop: true,
techOrder: ["html5", "flash"], techOrder: ["html5", "flash"],
width: "1200", width: "1200",
height: "640" height: "640"
}, },
function () { function () {
this.play(); this.play();
console.log('111111111111'); console.log('111111111111');
} }
); );
}, },
getVideo() { getVideo() {
let that = this let that = this
console.log(that); console.log(that);
homeApi.allGetVideo().then(res => { homeApi.allGetVideo().then(res => {
// get allTimeData // get allTimeData
const tmpdata = res.data.returnData const tmpdata = res.data.returnData
console.log(tmpdata); console.log(tmpdata);
// this.day_num = tmpdata.day.noRepeatInNum // this.day_num = tmpdata.day.noRepeatInNum
// this.week_num_num = tmpdata.week.noRepeatInNum // this.week_num_num = tmpdata.week.noRepeatInNum
// this.mon_num = tmpdata.month.noRepeatInNum // this.mon_num = tmpdata.month.noRepeatInNum
// this.year_num = tmpdata.year.noRepeatInNum // this.year_num = tmpdata.year.noRepeatInNum
// let btdata = new Array(); // let btdata = new Array();
// let bvdata = new Array(); // let bvdata = new Array();
// tmpdata.foreach(function(item,index){ // tmpdata.foreach(function(item,index){
// console.log(item); // console.log(item);
// console.log(index); // console.log(index);
// }); // });
}); });
}, },
} }
} }
</script> </script>
<style> <style>
.demo-video { .demo-video {
max-width: 880px; max-width: 880px;
max-height: 660px; max-height: 660px;
/* background-image: url(../../../src/utils/h5player.min.js); */ /* background-image: url(../../../src/utils/h5player.min.js); */
} }
</style> </style>

1833
yarn.lock
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save