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. 205
      web_src/src/components/live.vue

205
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
v-for="device in deviceList"
:key="device.deviceId"
:index="device.deviceId"
@click="sendDevicePush(item)"
>
<template slot="title"> <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-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;">{{i}}</div> <div
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" v-if="!videoUrl[i - 1]"
:idx="'player'+i" @screenshot="shot" @destroy="destroy"></player> 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>
@ -46,19 +89,21 @@
<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, //激活播放器
@ -85,43 +130,41 @@
}, },
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);
@ -129,28 +172,31 @@
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;
}); });
@ -158,47 +204,50 @@
//通知设备上传媒体流 //通知设备上传媒体流
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:") {
that.setPlayUrl(res.data.data.wss_flv, idxTmp);
} else {
that.setPlayUrl(res.data.data.ws_flv, idxTmp);
}
} else { } 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) {
@ -212,8 +261,8 @@
// 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);
@ -224,37 +273,37 @@
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);
} }
}) });
} }
} }
}; };
@ -262,14 +311,12 @@
<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;

Write Preview
Loading…
Cancel
Save