upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

vxg更换成vlc

Browse Source
merge-requests/1/head
张鑫 5 years ago
parent 4cd91b8261
commit 1c5f22e653
3 changed files with 171 additions and 179 deletions
Show Stats Download Patch File Download Diff File

90
src/views/cameraManage/model.vue
Unescape Escape View File

@ -35,24 +35,25 @@
</template> </template>
<template v-else-if="type=='test'"> <template v-else-if="type=='test'">
<div class="test-model"> <div class="test-model">
<!-- <canvas class="video-canvas"></canvas>--> <object id="video-test" type='application/x-vlc-plugin' events='True' width="100%"
<div class="vxgplayer" id="video-test" height="100%" pluginspage="http://www.videolan.org"
:url="mdata.rtsp" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
autostart <param name='controls' value='false'/>
avsync <param name='text' value='正在加载视频中...'/>
nmf-src="video_play_plugins/pnacl/Release/media_player.nmf" <param name='branding' value='false'/>
nmf-path="media_player.nmf" <param name="windowless" value="true">
latency="0" <embed type="application/x-google-vlc-plugin"/>
> </object>
</div>
<div class="video-close" @click="handleCancel"> <div class="video-close" @click="handleCancel">
╳ ╳
</div> </div>
<div class="operation-list"> <div class="operation-list">
<div class="operation-item"> <div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop"> <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
@mouseup="zoomDecStop">
<span>变倍</span> <span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop"> <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
@mouseup="zoomAddStop">
</div> </div>
<div class="operation-item"> <div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop"> <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
@ -95,25 +96,30 @@
:centered="true" :centered="true"
class="config-model" class="config-model"
> >
<div class="vxgplayer" id="video-config" <object id="video-config" type='application/x-vlc-plugin' events='True' width="800"
:url="mdata.rtsp" height="450" pluginspage="http://www.videolan.org"
autostart codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
avsync <param name='controls' value='false'/>
nmf-src="video_play_plugins/pnacl/Release/media_player.nmf" <param name='text' value='正在加载视频中...'/>
nmf-path="media_player.nmf" <param name='branding' value='false'/>
latency="0" <param name="windowless" value="true">
> <param name='fullscreen' value='false'/>
</div> <embed type="application/x-google-vlc-plugin"/>
</object>
<div class="operation-list"> <div class="operation-list">
<div class="operation-item"> <div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop"> <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
@mouseup="zoomDecStop">
<span>变倍</span> <span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop"> <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
@mouseup="zoomAddStop">
</div> </div>
<div class="operation-item"> <div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop"> <img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
@mouseup="focusDecStop">
<span>变焦</span> <span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop"> <img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
@mouseup="focusAddStop">
</div> </div>
<div class="operation-item"> <div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop"> <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
@ -360,28 +366,29 @@ export default {
handleCancel() { handleCancel() {
console.log('Clicked cancel button'); console.log('Clicked cancel button');
console.log(this.title); this.$emit('close', false, {})
if(this.type=='test'){ if(this.type=='test') {
window.vxgplayer('video-test').dispose(); var vlc = document.getElementById('video-test');
}else if(this.type=='config'){ vlc.playlist.items.clear()
window.vxgplayer('video-config').dispose(); }else if(this.type=='config') {
var vlc = document.getElementById('video-config');
vlc.playlist.items.clear()
} }
this.$emit('close',false,{})
}, },
getTestVideo(rtsp){ getTestVideo(rtsp){
this.$nextTick(() => { this.$nextTick(() => {
// window.vxgplayer('vxg_media_player1').stop(); var vlc = document.getElementById('video-test');
window.vxgplayer('video-test').src(rtsp); var options = new Array(":network-caching=100");//减少延迟
window.vxgplayer('video-test').play(); var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
vxgplayer('video-test').size('100%', '100%'); vlc.playlist.playItem(vlcItem);
}) })
}, },
getConfigVideo(rtsp){ getConfigVideo(rtsp){
this.$nextTick(() => { this.$nextTick(() => {
// window.vxgplayer('vxg_media_player1').stop(); var vlc = document.getElementById('video-config');
window.vxgplayer('video-config').src(rtsp); var options = new Array(":network-caching=100");//减少延迟
window.vxgplayer('video-config').play(); var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
vxgplayer('video-config').size('800px', '450px'); vlc.playlist.playItem(vlcItem);
}) })
}, },
getConfigIoList(){ getConfigIoList(){
@ -779,8 +786,9 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
#video-test{ #video-test {
width: 100%;
height: 100%;
} }
.video-close{ .video-close{
position: absolute; position: absolute;

183
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -9,46 +9,42 @@
<div class="flex-layouts"> <div class="flex-layouts">
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()"> <div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
<div class="video-item" v-for="i in item.cameras" :key="i.id"> <div class="video-item" v-for="i in item.cameras" :key="i.id">
<!-- <canvas :class="['video',i.id?'video'+i.id:'']">--> <object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
<!-- </canvas>--> pluginspage="http://www.videolan.org"
<div class="vxgplayer" :id="'video'+i.id" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
:url="i.rtsp" <param name='controls' value='false'/>
autostart <param name='text' value='正在加载视频中...'/>
avsync <param name='branding' value='false'/>
nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf" <param name="windowless" value="true">
nmf-path="media_player.nmf" <param name='fullscreen' value='false'/>
width="390" height="219" <param name='mrl' :value='i.rtsp'/>
latency="0" <param name='autoplay' value='true'/>
> <embed type="application/x-google-vlc-plugin"/>
</div> </object>
<div class="video-name"> <div class="video-name">
<iframe class="vlcIframe"
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
</iframe>
{{item.streetName}} {{i.name}} {{item.streetName}} {{i.name}}
</div> </div>
<div class="video-model" @click="showModel(i)"> <div class="video-model">
<iframe class="vlcIframe"
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
</iframe>
<div style="width: 100%;height: 100%" @click="showModel(i)">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<Model <Model
:visible.sync="visible" :visible.sync="visible"
:modelData.sync="modelData" :modelData.sync="modelData"
@close="closeModel" @close="closeModel"
/> />
<!-- <div class="vxgplayer" id="video"-->
<!-- url="rtsp://admin:admin123@192.168.66.108:554/cam/realmonitor?channel=1&subtype=0"-->
<!-- autostart-->
<!-- controls-->
<!-- avsync-->
<!-- nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"-->
<!-- nmf-path="media_player.nmf"-->
<!-- width="400" height="227"-->
<!-- latency="0"-->
<!-- >-->
<!-- </div>-->
</div> </div>
</template> </template>
@ -65,30 +61,31 @@ export default {
player:"", player:"",
visible:false, visible:false,
modelData:[], modelData:[],
vlcz: null
}; };
}, },
inject: ['reload'], inject: ['reload'],
mounted() { mounted() {
console.log('index mounted执行了') console.log('index mounted执行了')
this.getRealTimeList() this.getRealTimeList()
// this.getSdVideos()
}, },
destroyed(){ destroyed(){
}, },
beforeRouteLeave(to,form,next){ beforeRouteLeave(to,form,next) {
if(window.vxgplayer){ // if(this.vlcz){
this.realTimeListData.forEach(function (item) { // var that = this
console.log(item) // this.realTimeListData.forEach(function (item) {
item.cameras.forEach(function (item) { // console.log(item)
window.vxgplayer('video'+item.id).dispose(); // var $that = that
}) // item.cameras.forEach(function (item) {
next(true) // $that.vlcz.playlist.stop();
}) // })
}else { // next(true)
next(true) // })
} // }else{
// next(true)
// }
}, },
methods: { methods: {
getRealTimeList(){ getRealTimeList(){
@ -99,44 +96,50 @@ export default {
console.log(res.data) console.log(res.data)
if(res.code == 200) { if(res.code == 200) {
this.realTimeListData = res.data this.realTimeListData = res.data
console.log('首页getRealTimeList方法执行了') // res.data.forEach(function (item) {
res.data.forEach(function (item) { // // console.log(item.cameras)
// console.log(item.cameras) // var $that = that
var $that = that // item.cameras.forEach(function (item) {
console.log('进来第一层循环了') // // console.log(item.rtsp)
item.cameras.forEach(function (item) { // $that.playVideo('video'+item.id,item.rtsp)
// console.log(item.rtsp) // })
console.log('进来第二层循环了') // })
$that.playVideo('video'+item.id,item.rtsp)
})
})
} }
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
}) })
}, },
playVideo(id,rtsp){ // playVideo(id,rtsp){
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function // // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
this.$nextTick(() => { // this.$nextTick(() => {
// window.vxgplayer('vxg_media_player1').stop(); // var vlc = document.getElementById(`${id}`);
window.vxgplayer(id).src(rtsp); // var options = new Array(":network-caching=100");//减少延迟
window.vxgplayer(id).play(); // var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
}) // // vlc.playlist.play()
}, // vlc.playlist.playItem(vlcItem);
tabsChange(key){ // console.log('切换大屏前')
// })
// },
tabsChange(key) {
console.log(key) console.log(key)
}, },
showModel(item){ showModel(item) {
console.log(item) console.log(item)
this.visible = true this.visible = true
this.modelData=item this.modelData = item
console.log(vxgplayer('video'+item.id)) // this.vlcz.playlist.stop()
// vxgplayer('video'+item.id).fullscreen()
}, },
closeModel(visible,data){ closeModel(visible, data) {
this.visible = visible this.visible = visible
this.modelData=data this.modelData = data
// vxgplayer('video'+data.id).changedFullscreen() this.reload()
this.tabsChange()
console.log(this.realTimeListData)
console.log('切换大屏后')
// console.log(this.vlcz.playlist.currentItem)
// console.log(this.vlcz.playlist.isPlaying)
// this.vlcz.playlist.play()
// console.log(this.vlcz.playlist.isPlaying)
} }
}, },
components:{ components:{
@ -173,34 +176,42 @@ export default {
transform-origin: center; transform-origin: center;
transition: all 0.2s linear; transition: all 0.2s linear;
} }
.anticon-rotate { .anticon-rotate {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
} }
} }
#video-cav{
position: fixed; /*#video-cav{*/
z-index: 999; /* position: fixed;*/
border: solid 1px skyblue; /* z-index: 999;*/
width: 390px; /* border: solid 1px skyblue;*/
height: 219px; /* width: 390px;*/
} /* height: 219px;*/
.flex-layouts{ /*}*/
.flex-layouts {
display: flex; display: flex;
width: 1630px; width: 1630px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.video-list{
.video-list {
display: flex; display: flex;
.video-item{
.video-item {
display: flex; display: flex;
width: 100%; width: 100%;
height: 219px;
position: relative; position: relative;
margin: 3px; margin: 3px;
cursor: pointer; cursor: pointer;
z-index: 10; z-index: 10;
.video-name{ /*.video-obj{*/
/*}*/
.video-name {
position: absolute; position: absolute;
top: 15px; top: 15px;
left: 15px; left: 15px;
@ -209,24 +220,14 @@ export default {
font-size: 16px; font-size: 16px;
z-index: 10; z-index: 10;
} }
.video-model{
.video-model {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 10; z-index: 20;
}
/*.video{*/
/* border: solid 1px #000000;*/
/* background: #001529;*/
/* width: 400px;*/
/* height: 225px;*/
/*}*/
.vxgplayer {
border: none;
margin: 0;
} }
} }
} }

71
src/views/realTimeMonitoring/model.vue
Unescape Escape View File

@ -1,15 +1,15 @@
<template> <template>
<div class="video-mask" v-if="isShow"> <div class="video-mask" v-if="isShow">
<!-- <canvas class="video-canvas"></canvas>--> <object class="video-obj" id="video" type='application/x-vlc-plugin' events='True'
<div class="vxgplayer" id="video" width="100%" height="100%" pluginspage="http://www.videolan.org"
:url="mdata.rtsp" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
autostart <param name='controls' value='false'/>
avsync <param name='text' value='正在加载视频中...'/>
nmf-src="video_play_plugins/pnacl/Release/media_player.nmf" <param name='branding' value='false'/>
nmf-path="media_player.nmf" <param name="windowless" value="true">
latency="0" <param name='fullscreen' value='true'/>
> <embed type="application/x-google-vlc-plugin"/>
</div> </object>
<div class="video-close" @click="handleCancel"> <div class="video-close" @click="handleCancel">
╳ ╳
</div> </div>
@ -82,16 +82,18 @@ export default {
}, },
data() { data() {
return { return {
isShow:false, // w:document.documentElement.offsetWidth || document.body.offsetWidth,
title:'', // h:document.documentElement.offsetHeight || document.body.offsetHeight,
closable:false,//取消model模态框右上角的X号 isShow: false,
title: '',
closable: false,//取消model模态框右上角的X号
formItemAcrossLayout, formItemAcrossLayout,
formItemVerticalLayout, formItemVerticalLayout,
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this, { name: 'dynamic_rule' }), form: this.$form.createForm(this, {name: 'dynamic_rule'}),
id:'', id: '',
mdata:[], mdata: [],
zoomSubUrl:require('@/assets/sub-icon.png'), zoomSubUrl: require('@/assets/sub-icon.png'),
zoomAddUrl:require('@/assets/add-icon.png'), zoomAddUrl:require('@/assets/add-icon.png'),
focusSubUrl:require('@/assets/sub-icon.png'), focusSubUrl:require('@/assets/sub-icon.png'),
focusAddUrl:require('@/assets/add-icon.png'), focusAddUrl:require('@/assets/add-icon.png'),
@ -105,32 +107,12 @@ export default {
leftDownUrl:require('@/assets/left-down-icon.png'), leftDownUrl:require('@/assets/left-down-icon.png'),
downUrl:require('@/assets/down-icon.png'), downUrl:require('@/assets/down-icon.png'),
rightDownUrl:require('@/assets/right-down-icon.png'), rightDownUrl:require('@/assets/right-down-icon.png'),
player:'',
}; };
}, },
// provide(){ //提供
// return {
// reload: this.reloadModel
// }
// },
// inject: ['reload'],
// mounted() {
// console.log('mounted执行了')
// },
methods: { methods: {
// reloadModel(){
// this.isRouter = false
// this.$nextTick( function () {
// this.isRouter = true
// console.log(this.mdata)
// this.player= this.player.destroy()
// this.getHdVideos(this.mdata)
// })
// },
handleCancel() { handleCancel() {
console.log('Clicked cancel button'); console.log('Clicked cancel button');
console.log(this.title); // location.reload();
location.reload();
const that=this const that=this
setTimeout(function () { setTimeout(function () {
that.$emit('close',false,{}) that.$emit('close',false,{})
@ -138,10 +120,10 @@ export default {
}, },
getHdVideos(rtsp){ getHdVideos(rtsp){
this.$nextTick(() => { this.$nextTick(() => {
// window.vxgplayer('vxg_media_player1').stop(); var vlc = document.getElementById('video');
window.vxgplayer('video').src(rtsp); var options = new Array(":network-caching=100");//减少延迟
window.vxgplayer('video').play(); var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
vxgplayer('video').size('100%', '100%'); vlc.playlist.playItem(vlcItem);
}) })
}, },
zoomDecStart(){ zoomDecStart(){
@ -465,8 +447,9 @@ export default {
right: 0; right: 0;
/*background-color: #001529;*/ /*background-color: #001529;*/
z-index:1000; z-index:1000;
#video{ #video {
width: 100%;
height: 100%;
} }
.video-close{ .video-close{
position: absolute; position: absolute;

Write Preview
Loading…
Cancel
Save