From 7f965a6922a079124671ad233e3c783da92c8e69 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期日, 24 四月 2022 09:30:16 +0800
Subject: [PATCH] Merge pull request #448 from hotcoffie/wvp-28181-2.0
---
web_src/src/App.vue | 20 +
web_src/src/components/dialog/devicePlayer.vue | 2
web_src/src/layout/index.vue | 24 --
web_src/src/components/common/jessibuca.vue | 23 -
web_src/src/router/index.js | 20
web_src/src/components/live.vue | 528 ++++++++++++++++++++++-------------------------
6 files changed, 285 insertions(+), 332 deletions(-)
diff --git a/web_src/src/App.vue b/web_src/src/App.vue
index e114545..3590f73 100644
--- a/web_src/src/App.vue
+++ b/web_src/src/App.vue
@@ -81,4 +81,24 @@
text-align: center;
padding-top: 0px !important;
}
+
+/*瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+/*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+::-webkit-scrollbar-track {
+ border-radius: 4px;
+ background-color: #F5F5F5;
+}
+
+/*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+::-webkit-scrollbar-thumb {
+ border-radius: 4px;
+ background-color: #c8c8c8;
+ box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
+}
</style>
diff --git a/web_src/src/components/common/jessibuca.vue b/web_src/src/components/common/jessibuca.vue
index d071185..d05890b 100644
--- a/web_src/src/components/common/jessibuca.vue
+++ b/web_src/src/components/common/jessibuca.vue
@@ -1,5 +1,5 @@
<template>
- <div :id="containerId" :ref="containerId" @dblclick="fullscreenSwich">
+ <div id="container" ref="containerId" @dblclick="fullscreenSwich" style="width: 100%">
<div class="buttons-box" id="buttonsBox">
<div class="buttons-box-left">
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i>
@@ -44,7 +44,7 @@
forceNoOffscreen: false,
};
},
- props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
+ props: ['videoUrl', 'error', 'hasAudio', 'height'],
mounted() {
window.onerror = (msg) => {
// console.error(msg)
@@ -71,19 +71,19 @@
},
methods: {
updatePlayerDomSize() {
- let dom = document.getElementById(this.containerId);
+ let dom = document.getElementById('container');
const width = dom.parentNode.clientWidth
dom.style.width = width + 'px';
dom.style.height = (9 / 16) * width + "px";
},
create() {
let options = {};
- console.log(this.$refs[this.containerId])
+ console.log(this.$refs.containerId)
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign(
{
- container: this.$refs[this.containerId],
+ container: this.$refs.containerId,
videoBuffer: 0.2, // 鏈�澶х紦鍐叉椂闀匡紝鍗曚綅绉�
isResize: true,
decoder: "static/js/jessibuca/decoder.js",
@@ -203,19 +203,6 @@
this.jessibuca.on('metadata', function () {
});
- },
- resize() {
- if (this.jessibuca) {
- this.jessibuca.resize()
- this.$nextTick(() => {
- let dom = document.getElementById(this.containerId);
- if (dom.parentNode.clientHeight == 0) {
- dom.style.height = (9 / 16) * dom.clientWidth + "px"
- }
- dom.style.height = dom.parentNode.clientHeight + "px";
- dom.style.width = dom.parentNode.clientWidth + "px";
- })
- }
},
playBtnClick: function (event) {
this.play(this.videoUrl)
diff --git a/web_src/src/components/dialog/devicePlayer.vue b/web_src/src/components/dialog/devicePlayer.vue
index d3056ce..f0b4512 100644
--- a/web_src/src/components/dialog/devicePlayer.vue
+++ b/web_src/src/components/dialog/devicePlayer.vue
@@ -4,7 +4,7 @@
<el-dialog title="瑙嗛鎾斁" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
<!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> -->
<div style="width: 100%; height: 100%">
- <player containerId="container" ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
+ <player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></player>
</div>
<div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
diff --git a/web_src/src/components/live.vue b/web_src/src/components/live.vue
index adf434e..f6edcdf 100644
--- a/web_src/src/components/live.vue
+++ b/web_src/src/components/live.vue
@@ -1,8 +1,8 @@
<template>
<div id="devicePosition" style="width:100vw; height: 91vh">
- <el-container v-loading="loading" style="height: 91vh;" element-loading-text="鎷煎懡鍔犺浇涓�" >
+ <el-container v-loading="loading" style="height: 91vh;" element-loading-text="鎷煎懡鍔犺浇涓�">
<el-aside width="300px" style="background-color: #ffffff">
- <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent" ></DeviceTree>
+ <DeviceTree :clickEvent="clickEvent" :contextMenuEvent="contextMenuEvent"></DeviceTree>
</el-aside>
<el-container>
<el-header height="5vh" style="text-align: left;font-size: 17px;line-height:5vh">
@@ -17,9 +17,8 @@
: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"
- :containerId="'player'+i" @screenshot="shot" @destroy="destroy"></player>
+ <div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{ i }}</div>
+ <player v-else :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
</div>
</div>
</el-main>
@@ -29,297 +28,268 @@
</template>
<script>
- import uiHeader from "../layout/UiHeader.vue";
- import player from './common/jessibuca.vue'
- import DeviceTree from './common/DeviceTree.vue'
+import uiHeader from "../layout/UiHeader.vue";
+import player from './common/jessibuca.vue'
+import DeviceTree from './common/DeviceTree.vue'
- export default {
- name: "live",
- components: {
- uiHeader, player, DeviceTree
- },
- data() {
- return {
- showVideoDialog: true,
- hasAudio: false,
- videoUrl:[''],
- spilt:1,//鍒嗗睆
- playerIdx:0,//婵�娲绘挱鏀惧櫒
+export default {
+ name: "live",
+ components: {
+ uiHeader, player, DeviceTree
+ },
+ data() {
+ return {
+ videoUrl: [''],
+ spilt: 1,//鍒嗗睆
+ playerIdx: 0,//婵�娲绘挱鏀惧櫒
- deviceList: [], //璁惧鍒楄〃
- currentDevice: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄
+ updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織
+ count: 15,
+ total: 0,
- videoComponentList: [],
- updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織
- currentDeviceChannelsLenth:0,
- winHeight: window.innerHeight - 200,
- currentPage:1,
- count:15,
- total:0,
- getDeviceListLoading: false,
+ //channel
+ loading: false
+ };
+ },
+ mounted() {
- //channel
- searchSrt: "",
- channelType: "",
- online: "",
- channelTotal:0,
- deviceChannelList:[],
- loading:false
- };
- },
- mounted() {
- this.initData();
+ },
+ created() {
+ this.checkPlayByParam()
+ },
- },
- created(){
- this.checkPlayByParam()
- },
-
- computed:{
- liveStyle(){
- if(this.spilt==1){
- return {width:'100%',height:'100%'}
- }else if(this.spilt==4){
- return {width:'49%',height:'49%'}
- }else if(this.spilt==9){
- 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)
- },
- '$route.fullPath':'checkPlayByParam'
- },
- destroyed() {
- clearTimeout(this.updateLooper);
- },
- methods: {
- destroy(idx) {
- console.log(idx);
- this.clear(idx.substring(idx.length-1))
- },
- clickEvent: function (data) {
- if (data.channelId && data.subCount == 0) {
- this.sendDevicePush(data)
- }
- },
- contextMenuEvent: function (data) {
-
- },
- //閫氱煡璁惧涓婁紶濯掍綋娴�
- sendDevicePush: function (itemData) {
- if(itemData.status===0){
- this.$message.error('璁惧绂荤嚎!');
- return
- }
- this.save(itemData)
- let deviceId = itemData.deviceId;
- // this.isLoging = true;
- let channelId = itemData.channelId;
- console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId );
- let idxTmp = this.playerIdx
- let that = this;
- this.loading = true
- this.$axios({
- method: 'get',
- url: '/api/play/start/' + deviceId + '/' + channelId
- }).then(function (res) {
- // that.isLoging = false;
- console.log('=====----=====')
- console.log(res)
- if (res.data.code == 0 && res.data.data) {
- itemData.playUrl = res.data.data.httpsFlv
- that.setPlayUrl(res.data.data.ws_flv,idxTmp)
- }else {
- that.$message.error(res.data.msg);
- }
- }).catch(function (e) {
- }).finally(()=>{
- that.loading = false
- });
- },
- setPlayUrl(url,idx){
- this.$set(this.videoUrl,idx,url)
- let _this = this
- setTimeout(()=>{
- window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))
- },100)
-
- },
- checkPlayByParam(){
- let {deviceId,channelId} = this.$route.query
- if(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], {
- type: contentType
- });
- };
- let aLink = document.createElement('a');
- let blob = base64ToBlob(e); //new Blob([content]);
- let evt = document.createEvent("HTMLEvents");
- evt.initEvent("click", true, true); //initEvent 涓嶅姞鍚庝袱涓弬鏁板湪FF涓嬩細鎶ラ敊 浜嬩欢绫诲瀷锛屾槸鍚﹀啋娉★紝鏄惁闃绘娴忚鍣ㄧ殑榛樿琛屼负
- 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)=>{
- if(item){
- this.playerIdx = i
- this.sendDevicePush(item)
- }
- })
+ computed: {
+ liveStyle() {
+ if (this.spilt == 1) {
+ return {width: '100%', height: '100%'}
+ } else if (this.spilt == 4) {
+ return {width: '49%', height: '49%'}
+ } else if (this.spilt == 9) {
+ 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)
+ },
+ '$route.fullPath': 'checkPlayByParam'
+ },
+ destroyed() {
+ clearTimeout(this.updateLooper);
+ },
+ methods: {
+ destroy(idx) {
+ console.log(idx);
+ this.clear(idx.substring(idx.length - 1))
+ },
+ clickEvent: function (data) {
+ if (data.channelId && data.subCount == 0) {
+ this.sendDevicePush(data)
+ }
+ },
+ contextMenuEvent: function (data) {
+
+ },
+ //閫氱煡璁惧涓婁紶濯掍綋娴�
+ sendDevicePush: function (itemData) {
+ if (itemData.status === 0) {
+ this.$message.error('璁惧绂荤嚎!');
+ return
+ }
+ this.save(itemData)
+ let deviceId = itemData.deviceId;
+ // this.isLoging = true;
+ let channelId = itemData.channelId;
+ console.log("閫氱煡璁惧鎺ㄦ祦1锛�" + deviceId + " : " + channelId);
+ let idxTmp = this.playerIdx
+ let that = this;
+ this.loading = true
+ this.$axios({
+ method: 'get',
+ url: '/api/play/start/' + deviceId + '/' + channelId
+ }).then(function (res) {
+ // that.isLoging = false;
+ console.log('=====----=====')
+ console.log(res)
+ if (res.data.code == 0 && res.data.data) {
+ itemData.playUrl = res.data.data.httpsFlv
+ that.setPlayUrl(res.data.data.ws_flv, idxTmp)
+ } else {
+ that.$message.error(res.data.msg);
+ }
+ }).catch(function (e) {
+ }).finally(() => {
+ that.loading = false
+ });
+ },
+ setPlayUrl(url, idx) {
+ this.$set(this.videoUrl, idx, url)
+ let _this = this
+ setTimeout(() => {
+ window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
+ }, 100)
+
+ },
+ checkPlayByParam() {
+ let {deviceId, channelId} = this.$route.query
+ if (deviceId && channelId) {
+ this.sendDevicePush({deviceId, channelId})
+ }
+ },
+ 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], {
+ type: contentType
+ });
+ };
+ let aLink = document.createElement('a');
+ let blob = base64ToBlob(e); //new Blob([content]);
+ let evt = document.createEvent("HTMLEvents");
+ evt.initEvent("click", true, true); //initEvent 涓嶅姞鍚庝袱涓弬鏁板湪FF涓嬩細鎶ラ敊 浜嬩欢绫诲瀷锛屾槸鍚﹀啋娉★紝鏄惁闃绘娴忚鍣ㄧ殑榛樿琛屼负
+ 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))
+ },
+ }
+};
</script>
<style>
- .btn{
- margin: 0 10px;
+.btn {
+ margin: 0 10px;
- }
- .btn:hover{
- color: #409EFF;
- }
- .btn.active{
- color: #409EFF;
+}
- }
- .redborder{
- border: 2px solid red !important;
- }
- .play-box{
- background-color: #000000;
- border: 2px solid #505050;
- display: flex;
- align-items: center;
- justify-content: center;
- }
+.btn:hover {
+ color: #409EFF;
+}
+
+.btn.active {
+ color: #409EFF;
+
+}
+
+.redborder {
+ border: 2px solid red !important;
+}
+
+.play-box {
+ background-color: #000000;
+ border: 2px solid #505050;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
</style>
<style>
- .videoList {
- display: flex;
- flex-wrap: wrap;
- align-content: flex-start;
- }
+.videoList {
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+}
- .video-item {
- position: relative;
- width: 15rem;
- height: 10rem;
- margin-right: 1rem;
- background-color: #000000;
- }
+.video-item {
+ position: relative;
+ width: 15rem;
+ height: 10rem;
+ margin-right: 1rem;
+ background-color: #000000;
+}
- .video-item-img {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 100%;
- height: 100%;
- }
+.video-item-img {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+}
- .video-item-img:after {
- content: "";
- display: inline-block;
- position: absolute;
- z-index: 2;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- width: 3rem;
- height: 3rem;
- background-image: url("../assets/loading.png");
- background-size: cover;
- background-color: #000000;
- }
+.video-item-img:after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 3rem;
+ height: 3rem;
+ background-image: url("../assets/loading.png");
+ background-size: cover;
+ background-color: #000000;
+}
- .video-item-title {
- position: absolute;
- bottom: 0;
- color: #000000;
- background-color: #ffffff;
- line-height: 1.5rem;
- padding: 0.3rem;
- width: 14.4rem;
- }
+.video-item-title {
+ position: absolute;
+ bottom: 0;
+ color: #000000;
+ background-color: #ffffff;
+ line-height: 1.5rem;
+ padding: 0.3rem;
+ width: 14.4rem;
+}
- .baidumap {
- width: 100%;
- height: 100%;
- border: none;
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
+.baidumap {
+ width: 100%;
+ height: 100%;
+ border: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
- /* 鍘婚櫎鐧惧害鍦板浘鐗堟潈閭ｈ瀛� 鍜� 鐧惧害logo */
- .baidumap > .BMap_cpyCtrl {
- display: none !important;
- }
- .baidumap > .anchorBL {
- display: none !important;
- }
+/* 鍘婚櫎鐧惧害鍦板浘鐗堟潈閭ｈ瀛� 鍜� 鐧惧害logo */
+.baidumap > .BMap_cpyCtrl {
+ display: none !important;
+}
+
+.baidumap > .anchorBL {
+ display: none !important;
+}
</style>
diff --git a/web_src/src/layout/index.vue b/web_src/src/layout/index.vue
index 4fdbc72..dccf662 100644
--- a/web_src/src/layout/index.vue
+++ b/web_src/src/layout/index.vue
@@ -24,26 +24,6 @@
}
</script>
<style>
-/*瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-}
-
-/*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
-::-webkit-scrollbar-track {
- border-radius: 4px;
- background-color: #F5F5F5;
-}
-
-/*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
-::-webkit-scrollbar-thumb {
- border-radius: 4px;
- background-color: #c8c8c8;
- box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-}
-
/*瀹氫箟鏍囬鏍�*/
.page-header {
background-color: #FFFFFF;
@@ -64,10 +44,6 @@
}
</style>
<style scoped>
-.el-main {
- margin: 0;
-}
-
.fade-enter {
visibility: hidden;
opacity: 0;
diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js
index 5a1d964..8844862 100644
--- a/web_src/src/router/index.js
+++ b/web_src/src/router/index.js
@@ -99,16 +99,6 @@
component: media,
},
{
- path: '/play/wasm/:url',
- name: 'wasmPlayer',
- component: wasmPlayer,
- },
- {
- path: '/play/rtc/:url',
- name: 'rtcPlayer',
- component: rtcPlayer,
- },
- {
path: '/map',
name: 'devicePosition',
component: devicePosition,
@@ -125,5 +115,15 @@
name: 'deviceTree',
component: deviceTree,
},
+ {
+ path: '/play/wasm/:url',
+ name: 'wasmPlayer',
+ component: wasmPlayer,
+ },
+ {
+ path: '/play/rtc/:url',
+ name: 'rtcPlayer',
+ component: rtcPlayer,
+ },
]
})
--
Gitblit v1.8.0