Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

实时视频根据https协议设置视频路径

pull/392/head
huangweitao 2022-03-11 14:25:19 +08:00 committed by chenjialing
parent 41616f726d
commit 93c0c8c2fd
1 changed files with 349 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

341
web_src/src/components/live.vue
View File

@ -8,32 +8,75 @@
<el-aside width="300px" style="background-color: #ffffff"> <el-aside width="300px" style="background-color: #ffffff">
<div style="text-align: center;padding-top: 20px;">设备列表</div> <div style="text-align: center;padding-top: 20px;">设备列表</div>
<el-menu v-loading="loading"> <el-menu v-loading="loading">
<el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)"> <el-submenu
<template slot="title" > v-for="device in deviceList"
:key="device.deviceId"
:index="device.deviceId"
@click="sendDevicePush(item)"
>
<template slot="title">
<i class="el-icon-location-outline"></i> <i class="el-icon-location-outline"></i>
{{device.name}} {{ device.name }}
</template> </template>
<ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree> <ChannelTree
:device="device"
@sendDevicePush="sendDevicePush"
></ChannelTree>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
</el-aside> </el-aside>
<el-container> <el-container>
<!-- <LivePlay></LivePlay> --> <!-- <LivePlay></LivePlay> -->
<el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;"> <el-header
height="40px"
style="text-align: left;font-size: 17px;line-height: 40px;"
>
分屏: 分屏:
<i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/> <i
<i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/> class="el-icon-full-screen btn"
<i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/> :class="{ active: spilt == 1 }"
@click="spilt = 1"
/>
<i
class="el-icon-menu btn"
:class="{ active: spilt == 4 }"
@click="spilt = 4"
/>
<i
class="el-icon-s-grid btn"
:class="{ active: spilt == 9 }"
@click="spilt = 9"
/>
</el-header> </el-header>
<el-main> <el-main>
<div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"> <div
<div v-for="i in spilt" :key="i" class="play-box" style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
@click="playerIdx = (i-1)"
> >
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> <div
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" v-for="i in spilt"
:idx="'player'+i" @screenshot="shot" @destroy="destroy"></player> :key="i"
class="play-box"
:style="liveStyle"
:class="{ redborder: playerIdx == i - 1 }"
@click="playerIdx = i - 1"
>
<div
v-if="!videoUrl[i - 1]"
style="color: #ffffff;font-size: 30px;font-weight: bold;"
>
{{ i }}
</div>
<player
v-else
:ref="'player' + i"
:videoUrl="videoUrl[i - 1]"
fluent
autoplay
:height="true"
:idx="'player' + i"
@screenshot="shot"
@destroy="destroy"
></player>
<!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> --> <!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> -->
</div> </div>
</div> </div>
@ -45,160 +88,166 @@
</template> </template>
<script> <script>
import uiHeader from "./UiHeader.vue"; import uiHeader from "./UiHeader.vue";
import player from './jessibuca.vue' import player from "./jessibuca.vue";
import ChannelTree from './channelTree.vue' import ChannelTree from "./channelTree.vue";
export default { export default {
name: "live", name: "live",
components: { components: {
uiHeader, player, ChannelTree uiHeader,
player,
ChannelTree
}, },
data() { data() {
return { return {
showVideoDialog: true, showVideoDialog: true,
hasAudio: false, hasAudio: false,
videoUrl:[''], videoUrl: [""],
spilt:1,//分屏 spilt: 1, //分屏
playerIdx:0,//激活播放器 playerIdx: 0, //激活播放器
deviceList: [], //设备列表 deviceList: [], //设备列表
currentDevice: {}, //当前操作设备对象 currentDevice: {}, //当前操作设备对象
videoComponentList: [], videoComponentList: [],
updateLooper: 0, //数据刷新轮训标志 updateLooper: 0, //数据刷新轮训标志
currentDeviceChannelsLenth:0, currentDeviceChannelsLenth: 0,
winHeight: window.innerHeight - 200, winHeight: window.innerHeight - 200,
currentPage:1, currentPage: 1,
count:15, count: 15,
total:0, total: 0,
getDeviceListLoading: false, getDeviceListLoading: false,
//channel //channel
searchSrt: "", searchSrt: "",
channelType: "", channelType: "",
online: "", online: "",
channelTotal:0, channelTotal: 0,
deviceChannelList:[], deviceChannelList: [],
loading:false loading: false
}; };
}, },
mounted() { mounted() {
this.initData(); this.initData();
}, },
created(){ created() {
this.checkPlayByParam() this.checkPlayByParam();
}, },
computed:{ computed: {
liveStyle(){ liveStyle() {
if(this.spilt==1){ if (this.spilt == 1) {
return {width:'100%',height:'100%'} return { width: "100%", height: "100%" };
}else if(this.spilt==4){ } else if (this.spilt == 4) {
return {width:'49%',height:'49%'} return { width: "49%", height: "49%" };
}else if(this.spilt==9){ } else if (this.spilt == 9) {
return {width:'32%',height:'32%'} return { width: "32%", height: "32%" };
} }
} }
}, },
watch:{ watch: {
spilt(newValue){ spilt(newValue) {
console.log("切换画幅;"+newValue) console.log("切换画幅;" + newValue);
let that = this let that = this;
for (let i = 1; i <= newValue; i++) { for (let i = 1; i <= newValue; i++) {
if(!that.$refs['player'+i]){ if (!that.$refs["player" + i]) {
continue continue;
} }
this.$nextTick(()=>{ this.$nextTick(() => {
if(that.$refs['player'+i] instanceof Array){ if (that.$refs["player" + i] instanceof Array) {
that.$refs['player'+i][0].resize() that.$refs["player" + i][0].resize();
}else { } else {
that.$refs['player'+i].resize() that.$refs["player" + i].resize();
} }
}) });
} }
window.localStorage.setItem('split',newValue) window.localStorage.setItem("split", newValue);
}, },
'$route.fullPath':'checkPlayByParam' "$route.fullPath": "checkPlayByParam"
}, },
destroyed() { destroyed() {
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper);
}, },
methods: { methods: {
initData: function () { initData: function() {
this.getDeviceList(); this.getDeviceList();
}, },
destroy(idx) { destroy(idx) {
console.log(idx); console.log(idx);
this.clear(idx.substring(idx.length-1)) this.clear(idx.substring(idx.length - 1));
}, },
getDeviceList: function() { getDeviceList: function() {
let that = this; let that = this;
this.$axios({ this.$axios({
method: 'get', method: "get",
url:`/api/device/query/devices`, url: `/api/device/query/devices`,
params: { params: {
page: that.currentPage, page: that.currentPage,
count: that.count count: that.count
} }
}).then(function (res) { })
.then(function(res) {
console.log(res.data.list); console.log(res.data.list);
that.total = res.data.total; that.total = res.data.total;
that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}}); that.deviceList = res.data.list.map(item => {
return { deviceChannelList: [], ...item };
});
that.getDeviceListLoading = false; that.getDeviceListLoading = false;
}).catch(function (error) { })
.catch(function(error) {
console.log(error); console.log(error);
that.getDeviceListLoading = false; that.getDeviceListLoading = false;
}); });
}, },
//通知设备上传媒体流 //通知设备上传媒体流
sendDevicePush: function (itemData) { sendDevicePush: function(itemData) {
if(itemData.status===0){ if (itemData.status === 0) {
this.$message.error('设备离线!'); this.$message.error("设备离线!");
return return;
} }
this.save(itemData) this.save(itemData);
let deviceId = itemData.deviceId; let deviceId = itemData.deviceId;
// this.isLoging = true; // this.isLoging = true;
let channelId = itemData.channelId; let channelId = itemData.channelId;
console.log("通知设备推流1：" + deviceId + " : " + channelId ); console.log("通知设备推流1：" + deviceId + " : " + channelId);
let idxTmp = this.playerIdx let idxTmp = this.playerIdx;
let that = this; let that = this;
this.loading = true this.loading = true;
this.$axios({ this.$axios({
method: 'get', method: "get",
url: '/api/play/start/' + deviceId + '/' + channelId url: "/api/play/start/" + deviceId + "/" + channelId
}).then(function (res) { })
// that.isLoging = false; .then(function(res) {
console.log('=====----=====') console.log(res, "res");
console.log(res)
if (res.data.code == 0 && res.data.data) { if (res.data.code == 0 && res.data.data) {
itemData.playUrl = res.data.data.httpsFlv itemData.playUrl = res.data.data.httpsFlv;
that.setPlayUrl(res.data.data.ws_flv,idxTmp) if (location.protocol === "https:") {
}else { that.setPlayUrl(res.data.data.wss_flv, idxTmp);
} else {
that.setPlayUrl(res.data.data.ws_flv, idxTmp);
}
} else {
that.$message.error(res.data.msg); that.$message.error(res.data.msg);
} }
}).catch(function (e) { })
}).finally(()=>{ .catch(function(e) {})
that.loading = false .finally(() => {
that.loading = false;
}); });
}, },
setPlayUrl(url,idx){ setPlayUrl(url, idx) {
this.$set(this.videoUrl,idx,url) this.$set(this.videoUrl, idx, url);
let _this = this let _this = this;
setTimeout(()=>{ setTimeout(() => {
window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl)) window.localStorage.setItem("videoUrl", JSON.stringify(_this.videoUrl));
},100) }, 100);
}, },
checkPlayByParam(){ checkPlayByParam() {
let {deviceId,channelId} = this.$route.query let { deviceId, channelId } = this.$route.query;
if(deviceId && channelId){ if (deviceId && channelId) {
this.sendDevicePush({deviceId,channelId}) this.sendDevicePush({ deviceId, channelId });
} }
}, },
convertImageToCanvas(image) { convertImageToCanvas(image) {
@ -208,96 +257,94 @@
canvas.getContext("2d").drawImage(image, 0, 0); canvas.getContext("2d").drawImage(image, 0, 0);
return canvas; return canvas;
}, },
shot(e){ shot(e) {
// console.log(e) // console.log(e)
// send({code:'image',data:e}) // send({code:'image',data:e})
var base64ToBlob = function(code) { var base64ToBlob = function(code) {
let parts = code.split(';base64,'); let parts = code.split(";base64,");
let contentType = parts[0].split(':')[1]; let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]); let raw = window.atob(parts[1]);
let rawLength = raw.length; let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength); let uInt8Array = new Uint8Array(rawLength);
for(let i = 0; i < rawLength; ++i) { for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i); uInt8Array[i] = raw.charCodeAt(i);
} }
return new Blob([uInt8Array], { return new Blob([uInt8Array], {
type: contentType type: contentType
}); });
}; };
let aLink = document.createElement('a'); let aLink = document.createElement("a");
let blob = base64ToBlob(e); //new Blob([content]); let blob = base64ToBlob(e); //new Blob([content]);
let evt = document.createEvent("HTMLEvents"); let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = '截图'; aLink.download = "截图";
aLink.href = URL.createObjectURL(blob); aLink.href = URL.createObjectURL(blob);
aLink.click(); aLink.click();
}, },
save(item){ save(item) {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem("playData") || "[]";
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data[this.playerIdx] = item data[this.playerIdx] = item;
window.localStorage.setItem('playData',JSON.stringify(data)) window.localStorage.setItem("playData", JSON.stringify(data));
}, },
clear(idx) { clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem("playData") || "[]";
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data[idx-1] = null; data[idx - 1] = null;
console.log(data); console.log(data);
window.localStorage.setItem('playData',JSON.stringify(data)) window.localStorage.setItem("playData", JSON.stringify(data));
}, },
loadAndPlay(){ loadAndPlay() {
let dataStr = window.localStorage.getItem('playData') || '[]' let dataStr = window.localStorage.getItem("playData") || "[]";
let data = JSON.parse(dataStr); let data = JSON.parse(dataStr);
data.forEach((item,i)=>{ data.forEach((item, i) => {
if(item){ if (item) {
this.playerIdx = i this.playerIdx = i;
this.sendDevicePush(item) this.sendDevicePush(item);
} }
}) });
} }
} }
}; };
</script> </script>
<style> <style>
.btn{ .btn {
margin: 0 10px; margin: 0 10px;
}
} .btn:hover {
.btn:hover{ color: #409eff;
color: #409EFF; }
} .btn.active {
.btn.active{ color: #409eff;
color: #409EFF; }
.redborder {
}
.redborder{
border: 2px solid red !important; border: 2px solid red !important;
} }
.play-box{ .play-box {
background-color: #000000; background-color: #000000;
border: 2px solid #505050; border: 2px solid #505050;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
</style> </style>
<style> <style>
.videoList { .videoList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
} }
.video-item { .video-item {
position: relative; position: relative;
width: 15rem; width: 15rem;
height: 10rem; height: 10rem;
margin-right: 1rem; margin-right: 1rem;
background-color: #000000; background-color: #000000;
} }
.video-item-img { .video-item-img {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -306,9 +353,9 @@
margin: auto; margin: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.video-item-img:after { .video-item-img:after {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -323,9 +370,9 @@
background-image: url("../assets/loading.png"); background-image: url("../assets/loading.png");
background-size: cover; background-size: cover;
background-color: #000000; background-color: #000000;
} }
.video-item-title { .video-item-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
color: #000000; color: #000000;
@ -333,9 +380,9 @@
line-height: 1.5rem; line-height: 1.5rem;
padding: 0.3rem; padding: 0.3rem;
width: 14.4rem; width: 14.4rem;
} }
.baidumap { .baidumap {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: none; border: none;
@ -345,13 +392,13 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
} }
/* 去除百度地图版权那行字 和 百度logo */ /* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl { .baidumap > .BMap_cpyCtrl {
display: none !important; display: none !important;
} }
.baidumap > .anchorBL { .baidumap > .anchorBL {
display: none !important; display: none !important;
} }
</style> </style>