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

jsMpeg改为VXG渲染rtsp流

Browse Source
merge-requests/1/head
张鑫 5 years ago
parent c5340766eb
commit e7a985071a
8 changed files with 208 additions and 279 deletions
Show Stats Download Patch File Download Diff File

2
src/main.js
Unescape Escape View File

@ -8,6 +8,8 @@ import './layouts/index'
import utils from './utils/index' import utils from './utils/index'
import api from './plugins/axios/index' import api from './plugins/axios/index'
import JSMpeg from './utils/jsmpeg.min' import JSMpeg from './utils/jsmpeg.min'
import vxgplayer from './utils/video_play_plugins/vxgplayer-1.8.54.min'
import './utils/video_play_plugins/vxgplayer-1.8.54.min.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$utils = utils Vue.prototype.$utils = utils
Vue.prototype.$api = api Vue.prototype.$api = api

BIN
src/utils/video_play_plugins/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

12
src/utils/video_play_plugins/pnacl/Release/media_player.nmf
Unescape Escape View File

@ -0,0 +1,12 @@
{
"program": {
"portable": {
"pnacl-translate": {
"url": "media_player.pexe"
},
"pnacl-debug": {
"url": "media_player_unstripped.bc"
}
}
}
}

BIN
src/utils/video_play_plugins/pnacl/Release/media_player.pexe
View File

Binary file not shown.

1
src/utils/video_play_plugins/vxgplayer-1.8.54.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
src/utils/video_play_plugins/vxgplayer-1.8.54.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -18,22 +18,47 @@
</a-tabs> </a-tabs>
<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" @click="showModel(i)"> <div class="video-item" v-for="i in item.cameras" :key="i.id">
<canvas :class="['video',i.id?'video'+i.id:'']"> <!-- <canvas :class="['video',i.id?'video'+i.id:'']">-->
</canvas> <!-- </canvas>-->
<div class="vxgplayer" :id="'video'+i.id"
:url="i.rtsp"
autostart
avsync
nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
nmf-path="media_player.nmf"
width="390" height="219"
latency="0"
>
</div>
<div class="video-name"> <div class="video-name">
{{item.streetName}} {{i.name}} {{item.streetName}} {{i.name}}
</div> </div>
<div class="video-model" @click="showModel(i)">
</div>
</div> </div>
</div> </div>
</div> </div>
<Model <Model
:visible.sync="visible" :visible.sync="visible"
:modelData.sync="modelData" :modelData.sync="modelData"
@sure="submit"
@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>
@ -44,103 +69,15 @@ export default {
data() { data() {
return { return {
// 收起true 展开false // 收起true 展开false
videoWarpShow:true,
controlLabel: true, controlLabel: true,
realTimeListData:[{ realTimeListData:[],
"streetId": 1,
"streetName": "巷道1",
"cameras": [
{
"id": 13,
"name": "测试球机 不要动11",
"ip": "192.168.1.105",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.105:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:32"
},
{
"id": 14,
"name": "测试球机 不要动106",
"ip": "192.168.1.106",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.106:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:47"
}
]
},
{
"streetId": 36,
"streetName": "巷道2",
"cameras": [
{
"id": 15,
"name": "测试球机 不要动107",
"ip": "192.168.1.107",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:55"
},
{
"id": 16,
"name": "测试球机 不要动108",
"ip": "192.168.1.108",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:51:04"
}
]
},
{
"streetId": 37,
"streetName": "gge",
"cameras": [
{
"id": 17,
"name": "测试球机 不要动111",
"ip": "192.168.1.111",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:admin123@192.168.1.111:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:51:18"
}
]
}],
url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68", url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
tabKey: "0", tabKey: "0",
path:[], path:[],
player:"", player:"",
visible:false, visible:false,
modelData:[], modelData:[],
timer:'',
num:240
}; };
}, },
inject: ['reload'], inject: ['reload'],
@ -148,115 +85,110 @@ export default {
this.getRealTimeList() this.getRealTimeList()
console.log('index mounted执行了') console.log('index mounted执行了')
// this.getSdVideos() // this.getSdVideos()
this.timerFn() // this.playVideo()
}, },
destroyed(){ destroyed(){
console.log('2222222') console.log('2222222')
// this.player.destroy() // this.player.destroy()
clearInterval(this.timer)
}, },
methods: { methods: {
// 展开收起 // 展开收起
// handleUpDown() { // handleUpDown() {
// this.controlLabel = !this.controlLabel; // this.controlLabel = !this.controlLabel;
// }, // },
getSdVideos(channel,id,that){ // getSdVideos(channel,id,that){
console.log('首页getSdVideos方法执行了') // console.log('首页getSdVideos方法执行了')
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel // // var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
var player = new JSMpeg.Player(url, { // var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video'+id), // canvas: document.querySelector('.video'+id),
audio: false, // audio: false,
pauseWhenHidden: false, // pauseWhenHidden: false,
videoBufferSize: 16 * 1024 * 1024, // videoBufferSize: 16 * 1024 * 1024,
loop:false, // loop:false,
onPlay: function() { // onPlay: function() {
//开始播放事件回调 // //开始播放事件回调
console.log('play') // console.log('play')
}, // },
onEnded: function() { // onEnded: function() {
//播放完成事件回调 // //播放完成事件回调
console.log('end') // console.log('end')
}, // },
onPause:function(){ // onPause:function(){
//暂停时的回调 // //暂停时的回调
console.log('pause') // console.log('pause')
}, // },
onVideoDecode:function(){ // onVideoDecode:function(){
//–在每个解码和渲染的视频帧之后调用的回调 // //–在每个解码和渲染的视频帧之后调用的回调
} // }
//
// })
// player.play()
// return that.player=player
// },
playVideo(id,rtsp){
this.videoWarpShow = true;
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
this.$nextTick(() => {
// window.vxgplayer('vxg_media_player1').stop();
window.vxgplayer(id).src(rtsp);
window.vxgplayer(id).play();
}) })
player.play()
return that.player=player
}, },
getRealTimeList(){ getRealTimeList(){
var that=this var that=this
// this.$api.httpApi.getRealTimeList({ this.$api.httpApi.getRealTimeList({
// data: {} data: {}
// }).then(res => { }).then(res => {
// 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方法执行了') console.log('首页getRealTimeList方法执行了')
that.realTimeListData.forEach(function(item){ res.data.forEach(function (item) {
// console.log(item.cameras) // console.log(item.cameras)
var $that = that var $that = that
console.log('进来第一层循环了') console.log('进来第一层循环了')
item.cameras.forEach(function(item){ item.cameras.forEach(function (item) {
// console.log(item.rtsp) // console.log(item.rtsp)
console.log('进来第二层循环了') console.log('进来第二层循环了')
$that.$api.httpApi.getChannel({ $that.playVideo('video'+item.id,item.rtsp)
data:{ // $that.$api.httpApi.getChannel({
"clarity":"SD", //标清SD // data: {
"sourceUrl":item.rtsp, // "clarity": "SD", //标清SD
"paramBefore": "-y -i", // "sourceUrl": item.rtsp,
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k" // "paramBefore": "-y -i",
} // "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}).then(res => { // }
console.log(res.data) // }).then(res => {
console.log('首页push调用channel执行了') // console.log(res.data)
$that.getSdVideos(res.data.channel,item.id,$that) // console.log('首页push调用channel执行了')
}).catch(err => { // $that.getSdVideos(res.data.channel, item.id, $that)
console.log(err) // }).catch(err => {
// console.log(err)
// })
})
}) })
})
})
// }).catch(err => {
// console.log(err)
// })
},
timerFn(){
const that=this
this.timer = setInterval(function () {
that.num = that.num-1;
console.log(that.num)
if(that.num == -1){
that.reload() //局部刷新
that.num = 240
} }
},1000) }).catch(err => {
console.log(err)
})
}, },
tabsChange(key){ tabsChange(key){
console.log(key) console.log(key)
}, },
showModel(item){ showModel(item){
console.log(11111) console.log(11111)
clearInterval(this.timer)
this.player= this.player.destroy()
document.querySelector('.video').remove();
console.log(item) console.log(item)
this.visible = true this.visible = true
this.modelData=item this.modelData=item
// this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}}); console.log(vxgplayer('video'+item.id))
}, // vxgplayer('video'+item.id).fullscreen()
submit(visible){
this.visible = visible
}, },
closeModel(visible,data){ closeModel(visible,data){
this.visible = visible this.visible = visible
this.modelData=data this.modelData=data
// vxgplayer('video'+data.id).changedFullscreen()
} }
}, },
components:{ components:{
@ -266,6 +198,9 @@ export default {
</script> </script>
<style lang='scss'> <style lang='scss'>
.vxgplayer{
margin:0!important;
}
.realTime { .realTime {
padding: 24px; padding: 24px;
&-position { &-position {
@ -300,14 +235,13 @@ export default {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
border: solid 1px skyblue; border: solid 1px skyblue;
width: 400px; width: 390px;
height: 225px; height: 219px;
} }
.flex-layouts{ .flex-layouts{
display: flex; display: flex;
width: 1630px; width: 1630px;
flex-wrap: wrap; flex-wrap: wrap;
position: fixed
} }
.video-list{ .video-list{
display: flex; display: flex;
@ -317,20 +251,30 @@ export default {
position: relative; position: relative;
margin: 3px; margin: 3px;
cursor: pointer; cursor: pointer;
z-index: 10;
.video-name{ .video-name{
position: absolute; position: absolute;
top: 10px; top: 15px;
left: 10px; left: 15px;
color: #ffda62; color: #ffda62;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 16px;
z-index: 10;
} }
.video{ .video-model{
border: solid 1px #000000; position: absolute;
background: #001529; top: 0;
width: 400px; left: 0;
height: 225px; width: 100%;
height: 100%;
z-index: 10;
} }
/*.video{*/
/* border: solid 1px #000000;*/
/* background: #001529;*/
/* width: 400px;*/
/* height: 225px;*/
/*}*/
} }
} }
} }

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

@ -1,56 +1,52 @@
<template> <template>
<div v-if="isShow"> <div class="video-mask" v-if="isShow">
<!-- <a-modal--> <!-- <canvas class="video-canvas"></canvas>-->
<!-- v-model="isShow"--> <div class="vxgplayer" id="video"
<!-- :title="title"--> :url="mdata.rtsp"
<!-- @ok="handleOk"--> autostart
<!-- @cancel="handleCancel"--> avsync
<!-- ok-text="确认"--> nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"
<!-- cancel-text="取消"--> nmf-path="media_player.nmf"
<!-- class="p-model"--> latency="0"
<!-- >--> >
</div>
<!-- </a-modal>--> <div class="video-close" @click="handleCancel">
<div class="video-mask"> ╳
<canvas class="video-canvas"></canvas> </div>
<div class="video-close" @click="handleCancel"> <div class="operation-list">
╳ <div class="operation-item">
</div> <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop">
<div class="operation-list"> <span>变倍</span>
<div class="operation-item"> <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop">
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" @mouseup="zoomDecStop"> </div>
<span>变倍</span> <div class="operation-item">
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" @mouseup="zoomAddStop"> <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
</div> <span>变焦</span>
<div class="operation-item"> <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop"> </div>
<span>变焦</span> <div class="operation-item">
<img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop"> <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
</div> <span>光圈</span>
<div class="operation-item"> <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
<img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop"> </div>
<span>光圈</span> </div>
<img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop"> <div class="direction-list">
</div> <div class="direction-item">
</div> <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
<div class="direction-list"> <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
<div class="direction-item"> <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
<img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop"> </div>
<img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop"> <div class="direction-item">
<img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop"> <img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
</div> <img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
<div class="direction-item"> </div>
<img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop"> <div class="direction-item">
<img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop"> <img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
</div> <img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
<div class="direction-item"> <img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
<img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop"> </div>
<img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop"> </div>
<img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop"> </div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
var formItemAcrossLayout = { //formItemAcrossLayout当表单内item横向排列时用 var formItemAcrossLayout = { //formItemAcrossLayout当表单内item横向排列时用
@ -78,7 +74,7 @@ export default {
console.log('触发了watch，重新赋值') console.log('触发了watch，重新赋值')
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题 this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
console.log(newVal.rtsp) console.log(newVal.rtsp)
this.getHdVideos(newVal) this.getHdVideos(newVal.rtsp)
}) })
} }
@ -140,42 +136,12 @@ export default {
that.$emit('close',false,{}) that.$emit('close',false,{})
},500) },500)
}, },
getHdVideos(data){ getHdVideos(rtsp){
const that=this this.$nextTick(() => {
this.$api.httpApi.getChannel({ // window.vxgplayer('vxg_media_player1').stop();
data:{ window.vxgplayer('video').src(rtsp);
"clarity":"HD", //高清HD window.vxgplayer('video').play();
"sourceUrl":data.rtsp, vxgplayer('video').size('100%', '100%');
"paramBefore": "-y -i",
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 3000k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}
}).then(res => {
console.log(res.data)
console.log('我是大屏视频回调')
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video-canvas'),
audio: false,
pauseWhenHidden: false,
videoBufferSize: 16 * 1024 * 1024,
loop:false,
})
player.play();
// var playvideotimer=setInterval(function(){
// var currentTime=player.currentTime;
// console.log(currentTime);
// if(currentTime>=3){
// clearInterval(playvideotimer)
// player.destroy();
// document.querySelector('.video-canvas').remove();
// }
// },60)
return that.player=player
}).catch(err => {
}) })
}, },
zoomDecStart(){ zoomDecStart(){
@ -492,16 +458,15 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.video-mask{ .video-mask{
position: fixed; position:fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #001529; /*background-color: #001529;*/
z-index: 9999; z-index:1000;
.video-canvas{ #video{
width: 100vw;
height: 100vh;
} }
.video-close{ .video-close{
position: absolute; position: absolute;
@ -517,6 +482,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
z-index: 10;
} }
.operation-list{ .operation-list{
position: absolute; position: absolute;
@ -524,6 +490,7 @@ export default {
bottom: 20px; bottom: 20px;
/*width: 150px;*/ /*width: 150px;*/
/*border: solid 1px blue;*/ /*border: solid 1px blue;*/
z-index: 10;
.operation-item{ .operation-item{
img{ img{
width: 42px; width: 42px;
@ -541,6 +508,7 @@ export default {
right: 30px; right: 30px;
bottom: 20px; bottom: 20px;
width: 150px; width: 150px;
z-index: 10;
/*border: solid 1px blue;*/ /*border: solid 1px blue;*/
.direction-item{ .direction-item{
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save