fajiao
/
wvp-GB28181-pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

pull/392/head
huangweitao 3 years ago
committed by chenjialing
parent
41616f726d
commit
93c0c8c2fd
1 changed files with 346 additions and 299 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 645
      web_src/src/components/live.vue

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

@ -7,351 +7,398 @@
<el-container v-loading="loading" element-loading-text="拼命加载中"> <el-container v-loading="loading" element-loading-text="拼命加载中">
<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"
<i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/> style="text-align: left;font-size: 17px;line-height: 40px;"
<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> <i
<el-main> class="el-icon-full-screen btn"
<div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"> :class="{ active: spilt == 1 }"
<div v-for="i in spilt" :key="i" class="play-box" @click="spilt = 1"
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}" />
@click="playerIdx = (i-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-main>
<div
style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"
>
<div
v-for="i in spilt"
: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;"
> >
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> {{ i }}
<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> -->
</div> </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> -->
</div> </div>
</el-main> </div>
</el-container> </el-main>
</el-container>
</el-container> </el-container>
</el-container> </el-container>
</div> </div>
</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,
data() { ChannelTree
return { },
showVideoDialog: true, data() {
hasAudio: false, return {
videoUrl:[''], showVideoDialog: true,
spilt:1,//分屏 hasAudio: false,
playerIdx:0,//激活播放器 videoUrl: [""],
spilt: 1, //分屏
deviceList: [], //设备列表 playerIdx: 0, //激活播放器
currentDevice: {}, //当前操作设备对象
videoComponentList: [], deviceList: [], //设备列表
updateLooper: 0, //数据刷新轮训标志 currentDevice: {}, //当前操作设备对象
currentDeviceChannelsLenth:0,
winHeight: window.innerHeight - 200,
currentPage:1,
count:15,
total:0,
getDeviceListLoading: false,
//channel videoComponentList: [],
searchSrt: "", updateLooper: 0, //数据刷新轮训标志
channelType: "", currentDeviceChannelsLenth: 0,
online: "", winHeight: window.innerHeight - 200,
channelTotal:0, currentPage: 1,
deviceChannelList:[], count: 15,
loading:false total: 0,
}; getDeviceListLoading: false,
},
mounted() {
this.initData();
}, //channel
created(){ searchSrt: "",
this.checkPlayByParam() channelType: "",
}, online: "",
channelTotal: 0,
deviceChannelList: [],
loading: false
};
},
mounted() {
this.initData();
},
created() {
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: {
spilt(newValue) {
console.log("切换画幅;" + newValue);
let that = this;
for (let i = 1; i <= newValue; i++) {
if (!that.$refs["player" + i]) {
continue;
} }
this.$nextTick(() => {
if (that.$refs["player" + i] instanceof Array) {
that.$refs["player" + i][0].resize();
} else {
that.$refs["player" + i].resize();
}
});
} }
window.localStorage.setItem("split", newValue);
}, },
watch:{ "$route.fullPath": "checkPlayByParam"
spilt(newValue){ },
console.log("切换画幅;"+newValue) destroyed() {
let that = this clearTimeout(this.updateLooper);
for (let i = 1; i <= newValue; i++) { },
if(!that.$refs['player'+i]){ methods: {
continue initData: function() {
} this.getDeviceList();
this.$nextTick(()=>{
if(that.$refs['player'+i] instanceof Array){
that.$refs['player'+i][0].resize()
}else {
that.$refs['player'+i].resize()
}
})
}
window.localStorage.setItem('split',newValue)
},
'$route.fullPath':'checkPlayByParam'
}, },
destroyed() { destroy(idx) {
clearTimeout(this.updateLooper); console.log(idx);
this.clear(idx.substring(idx.length - 1));
}, },
methods: { getDeviceList: function() {
initData: function () { let that = this;
this.getDeviceList(); this.$axios({
method: "get",
}, url: `/api/device/query/devices`,
destroy(idx) { params: {
console.log(idx); page: that.currentPage,
this.clear(idx.substring(idx.length-1)) count: that.count
}, }
getDeviceList: function() { })
let that = this; .then(function(res) {
this.$axios({
method: 'get',
url:`/api/device/query/devices`,
params: {
page: that.currentPage,
count: that.count
}
}).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) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
},
shot(e) {
// console.log(e)
// send({code:'image',data:e})
var base64ToBlob = function(code) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
} }
}, return new Blob([uInt8Array], {
convertImageToCanvas(image) { type: contentType
var canvas = document.createElement("canvas"); });
canvas.width = image.width; };
canvas.height = image.height; let aLink = document.createElement("a");
canvas.getContext("2d").drawImage(image, 0, 0); let blob = base64ToBlob(e); //new Blob([content]);
return canvas; let evt = document.createEvent("HTMLEvents");
}, evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
shot(e){ aLink.download = "截图";
// console.log(e) aLink.href = URL.createObjectURL(blob);
// send({code:'image',data:e}) aLink.click();
var base64ToBlob = function(code) { },
let parts = code.split(';base64,'); save(item) {
let contentType = parts[0].split(':')[1]; let dataStr = window.localStorage.getItem("playData") || "[]";
let raw = window.atob(parts[1]); let data = JSON.parse(dataStr);
let rawLength = raw.length; data[this.playerIdx] = item;
let uInt8Array = new Uint8Array(rawLength); window.localStorage.setItem("playData", JSON.stringify(data));
for(let i = 0; i < rawLength; ++i) { },
uInt8Array[i] = raw.charCodeAt(i); clear(idx) {
} let dataStr = window.localStorage.getItem("playData") || "[]";
return new Blob([uInt8Array], { let data = JSON.parse(dataStr);
type: contentType data[idx - 1] = null;
}); console.log(data);
}; window.localStorage.setItem("playData", JSON.stringify(data));
let aLink = document.createElement('a'); },
let blob = base64ToBlob(e); //new Blob([content]); loadAndPlay() {
let evt = document.createEvent("HTMLEvents"); let dataStr = window.localStorage.getItem("playData") || "[]";
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 let data = JSON.parse(dataStr);
aLink.download = '截图';
aLink.href = URL.createObjectURL(blob);
aLink.click();
},
save(item){
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[this.playerIdx] = item
window.localStorage.setItem('playData',JSON.stringify(data))
},
clear(idx) {
let dataStr = window.localStorage.getItem('playData') || '[]'
let data = JSON.parse(dataStr);
data[idx-1] = null;
console.log(data);
window.localStorage.setItem('playData',JSON.stringify(data))
},
loadAndPlay(){
let dataStr = window.localStorage.getItem('playData') || '[]'
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 {
} border: 2px solid red !important;
.redborder{ }
border: 2px solid red !important; .play-box {
} background-color: #000000;
.play-box{ border: 2px solid #505050;
background-color: #000000; display: flex;
border: 2px solid #505050; align-items: center;
display: flex; justify-content: center;
align-items: 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;
left: 0; left: 0;
right: 0; right: 0;
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;
z-index: 2; z-index: 2;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
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;
background-color: #ffffff; background-color: #ffffff;
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;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
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>

Write Preview
Loading…
Cancel
Save