Merge pull request #448 from hotcoffie/wvp-28181-2.0
1.修正了播放地址无法正常播放视频的问题，包含两个错误：
This commit is contained in:
648540858
GitHub
commit
7f965a6922
@ -81,4 +81,24 @@ body,
|
||||
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>
|
||||
|
||||
@ -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 @@ export default {
|
||||
forceNoOffscreen: false,
|
||||
};
|
||||
},
|
||||
props: ['containerId', 'videoUrl', 'error', 'hasAudio', 'height'],
|
||||
props: ['videoUrl', 'error', 'hasAudio', 'height'],
|
||||
mounted() {
|
||||
window.onerror = (msg) => {
|
||||
// console.error(msg)
|
||||
@ -71,19 +71,19 @@ export default {
|
||||
},
|
||||
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",
|
||||
@ -204,19 +204,6 @@ export default {
|
||||
|
||||
});
|
||||
},
|
||||
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)
|
||||
},
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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,83 +28,67 @@
|
||||
</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 {
|
||||
export default {
|
||||
name: "live",
|
||||
components: {
|
||||
uiHeader, player, DeviceTree
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showVideoDialog: true,
|
||||
hasAudio: false,
|
||||
videoUrl:[''],
|
||||
spilt:1,//分屏
|
||||
playerIdx:0,//激活播放器
|
||||
videoUrl: [''],
|
||||
spilt: 1,//分屏
|
||||
playerIdx: 0,//激活播放器
|
||||
|
||||
deviceList: [], //设备列表
|
||||
currentDevice: {}, //当前操作设备对象
|
||||
|
||||
videoComponentList: [],
|
||||
updateLooper: 0, //数据刷新轮训标志
|
||||
currentDeviceChannelsLenth:0,
|
||||
winHeight: window.innerHeight - 200,
|
||||
currentPage:1,
|
||||
count:15,
|
||||
total:0,
|
||||
getDeviceListLoading: false,
|
||||
count: 15,
|
||||
total: 0,
|
||||
|
||||
//channel
|
||||
searchSrt: "",
|
||||
channelType: "",
|
||||
online: "",
|
||||
channelTotal:0,
|
||||
deviceChannelList:[],
|
||||
loading:false
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initData();
|
||||
|
||||
},
|
||||
created(){
|
||||
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%'}
|
||||
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)
|
||||
watch: {
|
||||
spilt(newValue) {
|
||||
console.log("切换画幅;" + newValue)
|
||||
let that = this
|
||||
for (let i = 1; i <= newValue; i++) {
|
||||
if(!that.$refs['player'+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()
|
||||
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)
|
||||
window.localStorage.setItem('split', newValue)
|
||||
},
|
||||
'$route.fullPath':'checkPlayByParam'
|
||||
'$route.fullPath': 'checkPlayByParam'
|
||||
},
|
||||
destroyed() {
|
||||
clearTimeout(this.updateLooper);
|
||||
@ -113,7 +96,7 @@
|
||||
methods: {
|
||||
destroy(idx) {
|
||||
console.log(idx);
|
||||
this.clear(idx.substring(idx.length-1))
|
||||
this.clear(idx.substring(idx.length - 1))
|
||||
},
|
||||
clickEvent: function (data) {
|
||||
if (data.channelId && data.subCount == 0) {
|
||||
@ -125,7 +108,7 @@
|
||||
},
|
||||
//通知设备上传媒体流
|
||||
sendDevicePush: function (itemData) {
|
||||
if(itemData.status===0){
|
||||
if (itemData.status === 0) {
|
||||
this.$message.error('设备离线!');
|
||||
return
|
||||
}
|
||||
@ -133,7 +116,7 @@
|
||||
let deviceId = itemData.deviceId;
|
||||
// this.isLoging = true;
|
||||
let channelId = itemData.channelId;
|
||||
console.log("通知设备推流1：" + deviceId + " : " + channelId );
|
||||
console.log("通知设备推流1：" + deviceId + " : " + channelId);
|
||||
let idxTmp = this.playerIdx
|
||||
let that = this;
|
||||
this.loading = true
|
||||
@ -146,46 +129,39 @@
|
||||
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.setPlayUrl(res.data.data.ws_flv, idxTmp)
|
||||
} else {
|
||||
that.$message.error(res.data.msg);
|
||||
}
|
||||
}).catch(function (e) {
|
||||
}).finally(()=>{
|
||||
}).finally(() => {
|
||||
that.loading = false
|
||||
});
|
||||
},
|
||||
setPlayUrl(url,idx){
|
||||
this.$set(this.videoUrl,idx,url)
|
||||
setPlayUrl(url, idx) {
|
||||
this.$set(this.videoUrl, idx, url)
|
||||
let _this = this
|
||||
setTimeout(()=>{
|
||||
window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl))
|
||||
},100)
|
||||
setTimeout(() => {
|
||||
window.localStorage.setItem('videoUrl', JSON.stringify(_this.videoUrl))
|
||||
}, 100)
|
||||
|
||||
},
|
||||
checkPlayByParam(){
|
||||
let {deviceId,channelId} = this.$route.query
|
||||
if(deviceId && channelId){
|
||||
this.sendDevicePush({deviceId,channelId})
|
||||
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){
|
||||
shot(e) {
|
||||
// console.log(e)
|
||||
// send({code:'image',data:e})
|
||||
var base64ToBlob = function(code) {
|
||||
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) {
|
||||
for (let i = 0; i < rawLength; ++i) {
|
||||
uInt8Array[i] = raw.charCodeAt(i);
|
||||
}
|
||||
return new Blob([uInt8Array], {
|
||||
@ -200,72 +176,65 @@
|
||||
aLink.href = URL.createObjectURL(blob);
|
||||
aLink.click();
|
||||
},
|
||||
save(item){
|
||||
save(item) {
|
||||
let dataStr = window.localStorage.getItem('playData') || '[]'
|
||||
let data = JSON.parse(dataStr);
|
||||
data[this.playerIdx] = item
|
||||
window.localStorage.setItem('playData',JSON.stringify(data))
|
||||
window.localStorage.setItem('playData', JSON.stringify(data))
|
||||
},
|
||||
clear(idx) {
|
||||
let dataStr = window.localStorage.getItem('playData') || '[]'
|
||||
let data = JSON.parse(dataStr);
|
||||
data[idx-1] = null;
|
||||
data[idx - 1] = null;
|
||||
console.log(data);
|
||||
window.localStorage.setItem('playData',JSON.stringify(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)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.btn{
|
||||
.btn {
|
||||
margin: 0 10px;
|
||||
|
||||
}
|
||||
.btn:hover{
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #409EFF;
|
||||
}
|
||||
.btn.active{
|
||||
}
|
||||
|
||||
.btn.active {
|
||||
color: #409EFF;
|
||||
|
||||
}
|
||||
.redborder{
|
||||
}
|
||||
|
||||
.redborder {
|
||||
border: 2px solid red !important;
|
||||
}
|
||||
.play-box{
|
||||
}
|
||||
|
||||
.play-box {
|
||||
background-color: #000000;
|
||||
border: 2px solid #505050;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.videoList {
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item {
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
margin-right: 1rem;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item-img {
|
||||
.video-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -274,9 +243,9 @@
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item-img:after {
|
||||
.video-item-img:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
@ -291,9 +260,9 @@
|
||||
background-image: url("../assets/loading.png");
|
||||
background-size: cover;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item-title {
|
||||
.video-item-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #000000;
|
||||
@ -301,9 +270,9 @@
|
||||
line-height: 1.5rem;
|
||||
padding: 0.3rem;
|
||||
width: 14.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.baidumap {
|
||||
.baidumap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
@ -313,13 +282,14 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 去除百度地图版权那行字 和 百度logo */
|
||||
.baidumap > .BMap_cpyCtrl {
|
||||
/* 去除百度地图版权那行字 和 百度logo */
|
||||
.baidumap > .BMap_cpyCtrl {
|
||||
display: none !important;
|
||||
}
|
||||
.baidumap > .anchorBL {
|
||||
}
|
||||
|
||||
.baidumap > .anchorBL {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,26 +24,6 @@ export default {
|
||||
}
|
||||
</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 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.el-main {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fade-enter {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
@ -98,16 +98,6 @@ export default new VueRouter({
|
||||
name: 'media',
|
||||
component: media,
|
||||
},
|
||||
{
|
||||
path: '/play/wasm/:url',
|
||||
name: 'wasmPlayer',
|
||||
component: wasmPlayer,
|
||||
},
|
||||
{
|
||||
path: '/play/rtc/:url',
|
||||
name: 'rtcPlayer',
|
||||
component: rtcPlayer,
|
||||
},
|
||||
{
|
||||
path: '/map',
|
||||
name: 'devicePosition',
|
||||
@ -125,5 +115,15 @@ export default new VueRouter({
|
||||
name: 'deviceTree',
|
||||
component: deviceTree,
|
||||
},
|
||||
{
|
||||
path: '/play/wasm/:url',
|
||||
name: 'wasmPlayer',
|
||||
component: wasmPlayer,
|
||||
},
|
||||
{
|
||||
path: '/play/rtc/:url',
|
||||
name: 'rtcPlayer',
|
||||
component: rtcPlayer,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user