‘daijinzheng@xingtongworld.com’
2 years ago
26 changed files with 344 additions and 5877 deletions
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
@ -1,63 +0,0 @@ |
|||
<template> |
|||
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" |
|||
:options="playerOptions"></video-player> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import videojs from "video.js"; |
|||
// import "video.js/dist/video-js.css"; |
|||
// import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
playerOptions: { |
|||
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 |
|||
autoplay: false, //如果true,浏览器准备好时开始回放。 |
|||
muted: false, // 默认情况下将会消除任何音频。 |
|||
loop: false, // 导致视频一结束就重新开始。 |
|||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
|||
language: 'zh-CN', |
|||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
|||
techOrder: ['flash', 'html5'], // 兼容顺序 |
|||
flash: { |
|||
|
|||
hls: { withCredentials: false }, |
|||
swf: 'static/video-js.swf' // 引入静态文件swf |
|||
}, |
|||
html5: { hls: { withCredentials: false } }, |
|||
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换 |
|||
type: 'rtmp/hls', |
|||
src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' |
|||
}], |
|||
poster: "", //你的封面地址 |
|||
// width: document.documentElement.clientWidth, |
|||
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
|||
controlBar: { |
|||
timeDivider: true, |
|||
durationDisplay: true, |
|||
remainingTimeDisplay: false, |
|||
fullscreenToggle: true //全屏按钮 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,46 +0,0 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<video id='video' class="video-js vjs-default-skin vjs-big-play-centered" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initVideoPlayer() |
|||
}, |
|||
methods: { |
|||
initVideoPlayer() { |
|||
// 第一个选中的要播放的video标签, 记得是video标签, |
|||
const currentInstance = this.$video(document.querySelector('video'), { |
|||
autoplay: true, // 是否自动播放 |
|||
controls: true, // 是否显示控件 |
|||
}) |
|||
|
|||
currentInstance.src({ |
|||
src: this.nowPlayVideoUrl, |
|||
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频 |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,59 +0,0 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<view> |
|||
<video id="dd" ref="rtmpPlayer2" :destroyOnClose="true" preload="auto" muted> |
|||
</video> |
|||
</view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import videojs from 'video.js' |
|||
import 'video.js/dist/video-js.css' |
|||
|
|||
export default { |
|||
|
|||
components: { |
|||
}, |
|||
mounted() { |
|||
this.myPlayerRtmp = videojs('dd', { |
|||
sources: [{ |
|||
type: 'rtmp/flv', |
|||
src: 'rtmp://ns8.indexforce.com/home/mystream' |
|||
}], |
|||
controls: true, |
|||
muted: true, |
|||
autoplay: true, |
|||
preload: 'auto', |
|||
textTrackDisplay: false, |
|||
errorDisplay: false, |
|||
controlBar: false, |
|||
bigPlayButton: false |
|||
}) |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
beforeDestroy() { |
|||
if (this.myPlayerRtmp) { |
|||
const myPlayerRtmp = this.$refs.rtmpPlayer2 // 不能用document 获取节点 |
|||
videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -1,36 +0,0 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import LivePlayer from '@liveqing/liveplayer' |
|||
|
|||
export default { |
|||
|
|||
components: { |
|||
LivePlayer |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa/' |
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -1,49 +0,0 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<div id="vs"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
import DemoPlugin from 'demoplugin' |
|||
import Player from 'xgplayer' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
let player = new Player({ |
|||
id: 'vs', |
|||
url: 'rtmp://58.200.131.2:1935/livetv/hunantv', |
|||
plugins: [DemoPlugin] |
|||
}) |
|||
const pipInstance = player.getPlugin('pip') |
|||
pipInstance.switchPIP() |
|||
player.registerPlugin(DemoPlugin) |
|||
// const player = new Player({ |
|||
// ..., |
|||
// plugins: [DemoPlugin] |
|||
// }) |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,63 +0,0 @@ |
|||
<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> |
|||
@ -1,47 +0,0 @@ |
|||
<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> |
|||
|
|||
@ -1,154 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv"> |
|||
<!-- <source src="" /> --> |
|||
</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> |
|||
// 引入echarts |
|||
// import * as echarts from "echarts"; |
|||
|
|||
import flvjs from "flv.js"; |
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
|
|||
// import Video from '../../components/btgym/Video.vue' |
|||
export default { |
|||
// components: { |
|||
// Video |
|||
// }, |
|||
data() { |
|||
return { |
|||
player: null, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
|
|||
|
|||
// this.getVideo() |
|||
|
|||
// var videoElement1 = document.getElementById('myFlvVideo'); |
|||
// this.$nextTick(() => { |
|||
// this.createVideo() |
|||
// }) |
|||
// this.createVideo() |
|||
this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4') |
|||
}, |
|||
methods: { |
|||
// createVideo() { |
|||
// if (flvjs.isSupported()) { |
|||
// var videoElement = document.getElementById('myFlvVideo') |
|||
// console.log(videoElement); |
|||
// this.flvPlayer = flvjs.createPlayer( |
|||
// { |
|||
// type: 'flv', |
|||
// isLive: true, |
|||
// hasAudio: false, |
|||
// url: |
|||
// 'rtsp://192.168.66.13:554/openUrl/MXdnCG4' |
|||
// }, |
|||
|
|||
// { |
|||
// cors: true, // 是否跨域 |
|||
// enableWorker: true, // 是否多线程工作 |
|||
// enableStashBuffer: false, // 是否启用缓存 |
|||
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb |
|||
// autoCleanupSourceBuffer: true // 是否自动清理缓存 |
|||
// } |
|||
// ) |
|||
// this.flvPlayer.attachMediaElement(videoElement) |
|||
// this.flvPlayer.load() |
|||
// // this.flvPlayer.play() |
|||
// // 报错重连 |
|||
// // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { |
|||
// // console.log('errorType:', errType) |
|||
// // console.log('errorDetail:', errDetail) |
|||
// // if (this.flvPlayer) { |
|||
// // this.destoryVideo() |
|||
// // this.createVideo() |
|||
// // } |
|||
// // }) |
|||
// } |
|||
// }, |
|||
|
|||
init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址 |
|||
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因 |
|||
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签 |
|||
if (flvjs.isSupported()) { |
|||
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额 |
|||
if (this.player !== null) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去 |
|||
{ |
|||
type: "flv", |
|||
url: val, //你的url地址 |
|||
isLive: true, //数据源是否为直播流 |
|||
hasAudio: false, //数据源是否包含有音频 |
|||
hasVideo: true, //数据源是否包含有视频 |
|||
enableStashBuffer: true, //是否启用缓存区 |
|||
}, |
|||
{ |
|||
enableWorker: false, //不启用分离线程 |
|||
enableStashBuffer: false, //关闭IO隐藏缓冲区 |
|||
autoCleanupSourceBuffer: true, //自动清除缓存 |
|||
lazyLoad: false, |
|||
} |
|||
); |
|||
this.player.attachMediaElement(videoElement); //放到dom中去 |
|||
this.player.load();//准备完成 |
|||
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放 |
|||
this.player.play();//播放 |
|||
} |
|||
}, 1000); |
|||
}, |
|||
|
|||
// destoryVideo() { |
|||
// this.flvPlayer.pause() |
|||
// this.flvPlayer.unload() |
|||
// this.flvPlayer.detachMediaElement() |
|||
// this.flvPlayer.destroy() |
|||
// this.flvPlayer = null |
|||
// } |
|||
|
|||
}, |
|||
beforeUnmount() { |
|||
if (this.player) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
}, |
|||
|
|||
// }, |
|||
}; |
|||
</script> |
|||
@ -1,146 +0,0 @@ |
|||
<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> |
|||
@ -1,176 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<input v-model="code" placeholder="输入监控点编码" @change="onChangeCode" /> |
|||
<button @click="onSubmit">默认预览</button> |
|||
<button @click="onTwoSubmit(2)">4分屏</button> |
|||
<button @click="onTwoSubmit(4)">16分屏</button> |
|||
<button @click="onTwoSubmit(8)">64分屏</button> |
|||
<div id="player" style="width: 800px;height: 800px;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import http from '@/http/http2.js' |
|||
import '@/utils/h5player.min.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 监控点编码 |
|||
code: '', |
|||
// 播放器对象 |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initPlayer() |
|||
this.play() |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: './static/util', |
|||
|
|||
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
iWidth: 600, |
|||
iHeight: 400, |
|||
|
|||
// 分屏播放，默认最大分屏4*4 |
|||
iMaxSplit: 16, |
|||
iCurrentSplit: 1, |
|||
|
|||
// 样式 |
|||
oStyle: { |
|||
border: '#343434', |
|||
borderSelect: '#FFCC00', |
|||
background: '#000' |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 获取取流连接 |
|||
* @returns {*} |
|||
*/ |
|||
// getPreviewUrl() { |
|||
// let tempCode = '61077001001320000018' |
|||
// if (this.code) { |
|||
// tempCode = this.code |
|||
// } |
|||
// const param = { |
|||
// 'cameraIndexCode': tempCode, |
|||
// 'streamType': 0, |
|||
// 'protocol': 'ws', |
|||
// 'transmode': 1 |
|||
// } |
|||
// // 这里 |
|||
// return http.post('/ay-video-manage/video/monitor/getRealTimeMonitorVideo', param) |
|||
// }, |
|||
|
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
const _this = this |
|||
let preUrl = 'wss://cloud.liveqing.com:1443/ws-flv/hls/LiveGBS0013402000000132000026434020000001320000264.flv?k=LiveGBS0013402000000132000026434020000001320000264.d4d1ee3b8644b53101' |
|||
const param = { |
|||
preUrl: preUrl, |
|||
// 1：高级模式 0：普通模式，高级模式支持所有 |
|||
mode: 0 |
|||
} |
|||
// 索引默认0 |
|||
let index = 0 |
|||
console.log(preUrl); |
|||
console.log(param); |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
}, |
|||
(err) => { |
|||
console.log('播放失败',err) |
|||
}) |
|||
|
|||
// this.getPreviewUrl().then(res => { |
|||
// if (res.status !== 200) { |
|||
// _this.$message.warning('获取视频流失败！') |
|||
// return |
|||
// } |
|||
// let preUrl = res.data.data.url |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 1 |
|||
// } |
|||
// // 索引默认0 |
|||
// if (!index) { |
|||
// index = 0 |
|||
// } |
|||
// _this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// // 播放成功回调 |
|||
// console.log('播放成功') |
|||
// }, |
|||
// (err) => { |
|||
// console.log('播放失败') |
|||
// }) |
|||
// }) |
|||
}, |
|||
|
|||
/** |
|||
* 监控点更新 |
|||
* @param data |
|||
*/ |
|||
onChangeCode(data) { |
|||
console.log(data); |
|||
this.code = data |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 默认预览 |
|||
*/ |
|||
onSubmit() { |
|||
this.play() |
|||
}, |
|||
|
|||
/** |
|||
* 分屏，这里我太懒了，就循环了一个视频流 |
|||
*/ |
|||
onTwoSubmit(num) { |
|||
const _this = this |
|||
// 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格 |
|||
this.player.JS_ArrangeWindow(num).then( |
|||
() => { |
|||
// 循环取流 |
|||
for (let i = 0; i < num * num; i++) { |
|||
_this.play(i) |
|||
} |
|||
}, |
|||
e => { console.error(e) } |
|||
) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -1,335 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div ref="playWndBox"> |
|||
<!-- 视频数据站位 --> |
|||
<div id="playWnd" class="playWnd" :style="{ |
|||
height: playWndHeight + 'px', |
|||
width: playWndWidth + 'px', |
|||
}"></div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
|
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
// 视频盒子的高度 |
|||
playWndHeight: "", |
|||
// 视频盒子的宽度 |
|||
playWndWidth: "", |
|||
oWebControl: null, |
|||
initCount: 0, |
|||
pubKey: "", |
|||
cameraIndexCode: "05edddc148b141c5930301af43154942", // 监控点编号 |
|||
objData: { |
|||
appkey: "29940726", |
|||
ip: "192.168.66.13", |
|||
port: 554, |
|||
playMode: 0, // 0 预览 1回放 |
|||
layout: "2x2", //页面展示的模块数【16】 |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.getTreeList(); |
|||
// 首次加载时的到父容器的高度 |
|||
this.playWndHeight = this.$refs.playWndBox.clientHeight; |
|||
// 首次加载时的到父容器的宽度 |
|||
this.playWndWidth = this.$refs.playWndBox.clientWidth - 140; |
|||
// 初始化摄像头 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
}); |
|||
console.log(this._data); |
|||
|
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", () => { |
|||
console.log( |
|||
this.$refs.playWndBox.clientHeight, |
|||
this.$refs.playWndBox.clientWidth |
|||
); |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize( |
|||
this.$refs.playWndBox.clientWidth - 140, |
|||
this.$refs.playWndBox.clientHeight |
|||
); |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取左侧树列表 |
|||
// getTreeList() { |
|||
// getVideoRegionTree().then((res) => { |
|||
// this.treeData = res.data; |
|||
// }); |
|||
// }, |
|||
// handleNodeClick(data) { |
|||
// console.log(data); |
|||
// if (!data.children) { |
|||
// getVideoInfo({ videoId: data.id }) |
|||
// .then((res) => { |
|||
// this.previewVideo(res.data); |
|||
// }) |
|||
// .catch((err) => { |
|||
// console.log(err, "-------"); |
|||
// }); |
|||
// } |
|||
// }, |
|||
|
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let that = this; |
|||
this.oWebControl = null; |
|||
that.oWebControl = new WebControl({ |
|||
szPluginContainer: "playWnd", // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess: () => { |
|||
// 创建WebControl实例成功 |
|||
console.log('1111111'); |
|||
console.log(that.oWebControl); |
|||
that.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
// 值"./VideoPluginConnect.dll"写死 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then( |
|||
function () { |
|||
// 设置消息回调 |
|||
that.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: that.cbIntegrationCallBack, |
|||
}); |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
that.oWebControl |
|||
.JS_CreateWnd("playWnd", 1000, 600) |
|||
.then(function () { |
|||
// 创建播放实例成功后初始化 |
|||
that.init(); |
|||
that.previewVideo(that._data); |
|||
}); |
|||
}, |
|||
function () { |
|||
// 启动插件服务失败 |
|||
} |
|||
); |
|||
}, |
|||
// 创建WebControl实例失败 |
|||
cbConnectError: function () { |
|||
that.oWebControl = null; |
|||
that.$message.warning("插件未启动，正在尝试启动，请稍候..."); |
|||
// 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
window.WebControl.JS_WakeUp("VideoWebPlugin://"); |
|||
that.initCount++; |
|||
if (that.initCount < 3) { |
|||
setTimeout(function () { |
|||
that.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
that.$message.warning("插件启动失败，请检查插件是否安装！"); |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log("cbConnectClose"); |
|||
that.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 初始化 |
|||
init(callback) { |
|||
let that = this; |
|||
that.getPubKey(() => { |
|||
let appkey = that.objData.appkey; //综合安防管理平台提供的appkey，必填 |
|||
let secret = that.setEncrypt('PSkTCnQdFbNW4Z2suNj8'); //综合安防管理平台提供的secret，必填 |
|||
let ip = that.objData.ip; //综合安防管理平台IP地址，必填 |
|||
let playMode = that.objData.playMode; //初始播放模式：0-预览，1-回放 |
|||
let port = that.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
let snapDir = "D:\\SnapDir"; //抓图存储路径 |
|||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
let layout = that.objData.layout; //playMode指定模式的布局 |
|||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
let encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示 |
|||
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
let buttonIDs = |
|||
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮 |
|||
that.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
// 隐藏 |
|||
// that.oWebControl.JS_HideWnd() |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
let that = this; |
|||
console.log(that.oWebControl); |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
if (oData.responseMsg.data) { |
|||
that.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// RSA 加密 |
|||
setEncrypt(value) { |
|||
let that = this; |
|||
let encrypt = new window.JSEncrypt(); |
|||
encrypt.setPublicKey(that.pubKey); |
|||
return encrypt.encrypt(value); |
|||
}, |
|||
// 回调的消息 |
|||
cbIntegrationCallBack(oData) { |
|||
let { responseMsg: type } = oData; |
|||
if (type === "error") { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} else { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} |
|||
}, |
|||
// 视频预览功能 |
|||
previewVideo(data) { |
|||
let that = this; |
|||
console.log(data); |
|||
console.log(data.cameraIndexCode); |
|||
let cameraIndexCode = data.cameraIndexCode; // 获取输入的监控点编号值，必填 |
|||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流 |
|||
let transMode = 0; // 传输协议：0-UDP，1-TCP |
|||
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用 |
|||
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
console.log(cameraIndexCode, "-------cameraIndexCode-"); |
|||
// that.initPlugin() |
|||
console.log(that.oWebControl); |
|||
// console.log(this.oWebControl); |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
that.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号 |
|||
streamMode: streamMode, // 主子码流标识 |
|||
transMode: transMode, // 传输协议 |
|||
gpuMode: gpuMode, // 是否开启GPU硬解 |
|||
wndId: wndId, // 可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
}); |
|||
|
|||
}, |
|||
// 停止全部预览 |
|||
stopAllPreview() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 格式化时间 |
|||
dateFormat(oDate, fmt) { |
|||
let o = { |
|||
"M+": oDate.getMonth() + 1, //月份 |
|||
"d+": oDate.getDate(), //日 |
|||
"h+": oDate.getHours(), //小时 |
|||
"m+": oDate.getMinutes(), //分 |
|||
"s+": oDate.getSeconds(), //秒 |
|||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度 |
|||
S: oDate.getMilliseconds(), //毫秒 |
|||
}; |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
(oDate.getFullYear() + "").substr(4 - RegExp.$1.length) |
|||
); |
|||
} |
|||
for (let k in o) { |
|||
if (new RegExp("(" + k + ")").test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
RegExp.$1.length == 1 |
|||
? o[k] |
|||
: ("00" + o[k]).substr(("" + o[k]).length) |
|||
); |
|||
} |
|||
} |
|||
return fmt; |
|||
}, |
|||
}, |
|||
// 组件销毁后 |
|||
destroyed() { |
|||
if (this.oWebControl != null) { |
|||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 |
|||
this.oWebControl.JS_HideWnd(); |
|||
// 销毁当前播放的视频 |
|||
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); |
|||
// 断开与插件服务连接 |
|||
this.oWebControl.JS_Disconnect(); |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -1,258 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
<!-- <video id="playWnd" autoplay></video> --> |
|||
<!--预览界面--> |
|||
<!-- <div id="operate" class="operate"> |
|||
<div class="module" style="color:#fff;"> |
|||
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""> |
|||
</div> |
|||
<div class="item" style="margin-top: 20px;margin-left: -20px;color:#fff;"> |
|||
|
|||
<button style="width:20px;padding:0;margin:0;color:#fff;" id="startPreview" class="btn">预览</button> |
|||
|
|||
<button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!--视频窗口展示--> |
|||
<video id="playWnd" autoplay></video> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
import $ from "jquery"; |
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
|
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
const oWebControl = new window.WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
console.log('111111111111'); |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
_that.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
console.log('启动插件服务失败'); |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose(bNormalClose) { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "28730366"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = _that.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填 |
|||
var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.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, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log(oData); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
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> |
|||
@ -1,252 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<video id="playWnd" autoplay></video> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
//变量名随便命名的，不太会命名 |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
this.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
var oWebControl = new WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15909, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
console.log('111111111111'); |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose() { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填 |
|||
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.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, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log('22222222222'); |
|||
console.log(res); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
getPubKey(callback) { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
console.log(oData); |
|||
if (oData.responseMsg.data) { |
|||
this.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
//RSA加密 |
|||
// setEncrypt(value) { |
|||
// var encrypt = new encrypt(); |
|||
// encrypt.setPublicKey(this.pubKey); |
|||
// console.log(encrypt.encrypt(value)); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
//视频预览功能 |
|||
getVideoFun(Code) { |
|||
let _that = this; |
|||
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 |
|||
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('44444444444'); |
|||
console.log(cameraIndexCode); |
|||
console.log( _that.oWebControl2); |
|||
console.log( _that.oWebControl2.JS_RequestInterface); |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode, //监控点编号 |
|||
streamMode: streamMode, //主子码流标识 |
|||
transMode: transMode, //传输协议 |
|||
gpuMode: gpuMode, //是否开启GPU硬解 |
|||
wndId: wndId, //可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
console.log(res, "res"); |
|||
console.log('3333333333'); |
|||
}).catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
//停止全部预览 |
|||
stopVideoFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， |
|||
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， |
|||
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 |
|||
destroyVideoDiv() { |
|||
this.oWebControl2.JS_DestroyWnd() |
|||
.then((data) => { |
|||
console.log("销毁窗口成功"); |
|||
console.log(data); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("销毁窗口失败"); |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 |
|||
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> |
|||
@ -1,348 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd" |
|||
v-html="oWebControl === null ? playText : ''"></div> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
export default { |
|||
props: { |
|||
// 内网、公网 4个配置 |
|||
// appkey: { |
|||
// type: "String", |
|||
// default: "29940726", |
|||
// }, |
|||
// secret: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// ip: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// port: { |
|||
// type: "Number", |
|||
// default: 8888, |
|||
// }, |
|||
// 视频布局 |
|||
// layout: { |
|||
// type: "String", |
|||
// default: "1x1", |
|||
// }, |
|||
// 初始播放模式：0-预览，1-回放 |
|||
// playMode: { |
|||
// type: "Number", |
|||
// default: 0, |
|||
// }, |
|||
// 是否显示工具栏，0-不显示，非0-显示 |
|||
showToolbar: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 工具栏按钮 |
|||
toolBarButtonIDs: { |
|||
type: String, |
|||
default: "4098,4097", |
|||
}, |
|||
// 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
showSmart: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 自定义工具条按钮 |
|||
buttonIDs: { |
|||
type: String, |
|||
default: "0,16,256,257,258,259,260,512,515,516,517,768,769", |
|||
}, |
|||
// 相机编号 |
|||
cameraIndexCode: { |
|||
type: [String, Number], |
|||
}, |
|||
// 销毁并重新初始化海康插件 |
|||
refresh: { |
|||
type: Number, |
|||
}, |
|||
// 视频播放容器id |
|||
containerId: { |
|||
type: String, |
|||
default: "playWnd", |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
oWebControl: null, |
|||
plugKey: "", |
|||
// 视频相关参数 |
|||
videoParams: { |
|||
cameraIndexCode: "", //监控点编号 |
|||
streamMode: 0, //主子码流标识：0-主码流，1-子码流 |
|||
transMode: 1, //传输协议：0-UDP，1-TCP |
|||
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 |
|||
wndId: 1, //播放窗口序号 |
|||
}, |
|||
videoWidth: null, |
|||
videoHeight: null, |
|||
playText: "启动中...", |
|||
initCount: 0, // 启动次数 |
|||
href: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getPluginUrl(); |
|||
this.createdVideo(); |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
}); |
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", this.windowResize); |
|||
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 |
|||
window.addEventListener("scroll", this.windowScroll); |
|||
}, |
|||
watch: { |
|||
// 监听相机编码 |
|||
cameraIndexCode(value) { |
|||
if (value) { |
|||
this.videoParams.cameraIndexCode = value.trim(); |
|||
this.videoParams.wndId = -1; |
|||
if (this.oWebControl) { |
|||
this.previewVideo(); |
|||
} else { |
|||
this.createdVideo(); |
|||
} |
|||
} |
|||
}, |
|||
// 刷新 |
|||
refresh() { |
|||
this.destroyeWnd(); |
|||
setTimeout(() => { |
|||
this.createdVideo(); |
|||
}, 0); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取海康插件下载地址 |
|||
getPluginUrl() { |
|||
return '' |
|||
// getList(1, 999).then(res => { |
|||
// if (res.data.code === 200) { |
|||
// const data = res.data.data.records; |
|||
// data.length |
|||
// if (data.length) { |
|||
// let existArr = data.filter(item => item.paramKey === ""); |
|||
// if (existArr.length) { |
|||
// this.href = existArr[0].paramValue; |
|||
// } |
|||
// } |
|||
// } |
|||
// }).catch(err => { |
|||
// // 报错 |
|||
// console.log(err) |
|||
// }) |
|||
; |
|||
}, |
|||
// 初始化+预览 |
|||
createdVideo() { |
|||
this.initPlugin(() => { |
|||
this.previewVideo(); |
|||
}); |
|||
}, |
|||
// 创建播放实例 |
|||
initPlugin(callback) { |
|||
this.oWebControl = new WebControl({ |
|||
szPluginContainer: this.containerId, // 指定容器id |
|||
iServicePortStart: 15900, |
|||
iServicePortEnd: 15909, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
// 创建WebControl实例成功 |
|||
cbConnectSuccess: () => { |
|||
this.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then(() => { |
|||
// 启动插件服务成功 |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
this.oWebControl |
|||
.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight) |
|||
.then(() => { |
|||
this.getVersion(callback); |
|||
}); |
|||
}); |
|||
}, |
|||
cbConnectError: () => { |
|||
// 创建WebControl实例失败 |
|||
this.oWebControl = null; |
|||
this.playText = "插件未启动，正在尝试启动，请稍候..."; |
|||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(() => { |
|||
this.initPlugin(); |
|||
}, 2000); |
|||
} else { |
|||
this.playText = ` |
|||
插件启动失败，请检查插件是否安装！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
this.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 消息回调 |
|||
cbIntegrationCallBack() { }, |
|||
// 初始化 |
|||
init(callback) { |
|||
this.getPubKey(() => { |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: '29940726', //API网关提供的appkey |
|||
secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret |
|||
ip: this.ip, //API网关IP地址z |
|||
playMode: this.playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: this.port, //端口 |
|||
snapDir: "C:\\SnapDir", //抓图存储路径 |
|||
videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径 |
|||
layout: this.layout, //布局 |
|||
enableHTTPS: 1, //是否启用HTTPS协议 |
|||
encryptedFields: "secret", //加密字段 |
|||
showToolbar: this.showToolbar, //是否显示工具栏 |
|||
toolBarButtonIDs: this.toolBarButtonIDs, |
|||
showSmart: this.showSmart, //是否显示智能信息 |
|||
buttonIDs: this.buttonIDs, //自定义工具条按钮 |
|||
protocol: "hls", |
|||
}), |
|||
}) |
|||
.then(() => { |
|||
// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
const params = { |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ keyLength: 1024 }), |
|||
}; |
|||
this.oWebControl.JS_RequestInterface(params).then((res) => { |
|||
if (res.responseMsg.data) { |
|||
this.plugKey = res.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// 视频流RSA加密 |
|||
// setEncrypt(value) { |
|||
// const encrypt = new JSEncrypt(); |
|||
// encrypt.setPublicKey(this.plugKey); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
// 视频预览 |
|||
previewVideo() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify(this.videoParams), |
|||
}); |
|||
}, |
|||
// 显示全屏 |
|||
showFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "setFullScreen", |
|||
}); |
|||
}, |
|||
// 退出全屏 |
|||
exitFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "exitFullScreen", |
|||
}); |
|||
}, |
|||
windowScroll() { |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
windowResize() { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
// 销毁海康插件 |
|||
destroyeWnd() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl.JS_Disconnect().then(() => { }); |
|||
} |
|||
}, |
|||
// 获取海康插件版本号 |
|||
getVersion(callback) { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "getVersion", |
|||
}).then(res => { |
|||
if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
this.init(callback); // 创建播放实例成功后初始化 |
|||
console.log("启动插件成功！"); |
|||
} else { |
|||
this.destroyeWnd(); |
|||
this.playText = ` |
|||
插件版本不正确，请重新下载版本安装覆盖！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl |
|||
.JS_DestroyWnd({ |
|||
funcName: "destroyeWnd", |
|||
}) |
|||
.then(() => { }); |
|||
} |
|||
document.removeEventListener("resize", this.windowResize); |
|||
document.removeEventListener("scroll", this.windowScroll); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,65 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<hls-video :videoUrl="currentFileUrl" class="videoBox" |
|||
style="height: 370px"></hls-video> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import HlsVideo from "../../components/btgym/HlsVideo.vue"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
components: { HlsVideo }, |
|||
data() { |
|||
return { |
|||
currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址 |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,91 +0,0 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import videojs from "video.js"; |
|||
import "video.js/dist/video-js.css"; |
|||
import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.playVideo() |
|||
}, |
|||
methods: { |
|||
playVideo() { |
|||
console.log('22222222222'); |
|||
var videoPlayer = videojs( |
|||
"my-player", |
|||
{ |
|||
sources: [ |
|||
{ |
|||
src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", |
|||
type: "rtmp/flv" |
|||
} |
|||
], |
|||
muted: true, |
|||
controls: true, |
|||
autoplay: true, |
|||
loop: true, |
|||
techOrder: ["html5", "flash"], |
|||
width: "1200", |
|||
height: "640" |
|||
}, |
|||
function () { |
|||
this.play(); |
|||
console.log('111111111111'); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue