code-image-backup-public/fastbee
1
0
Fork 0
mirror of https://gitee.com/beecue/fastbee.git synced 2025-12-17 16:36:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

界面简化

Browse Source
This commit is contained in:
kerwincui
2025-03-20 22:27:27 +08:00
parent 2772c49df1
commit f7e9e403b0
6 changed files with 460 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
vue/public/index.html
View File

@@ -7,7 +7,10 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="/js/jessibuca/jessibuca.js"></script>
<script src="/js/jessibuca-pro/jessibuca-pro.js"></script>
<script type="text/javascript" src="/js/ZLMRTCClient.js"></script>
<script type="text/javascript" src="/js/EasyWasmPlayer.js"></script>
<title>
<%= webpackConfig.name %>

42
vue/src/views/components/player/deviceLiveStream.vue
View File

@@ -1,14 +1,18 @@
<template>
<div>
<el-row>
<span style="margin-left: 10px" prop="channelName">通道名称：</span>
<el-select v-model="channelId" placeholder="请选择" @change="changeChannel()" size="small">
<el-row :gutter="20" style="margin-bottom: 16px">
<el-col :span="1.5">
<el-select v-model="channelId" placeholder="请选择通道" @change="changeChannel()">
<el-option v-for="option in channelList" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<span style="margin: 10px 10px 10px 30px">开启拉流:</span>
<el-switch v-model="pushStream" active-color="#13ce66" inactive-color="#c4c6c9" style="border-radius: 10px" :disabled="channelId === ''" @change="startPushStream"></el-switch>
</el-col>
<el-col :span="1.5" style="line-height: 36px">
<span style="font-size: 14px">开启拉流：</span>
<el-switch v-model="pushStream" :disabled="channelId === ''" @change="startPushStream"></el-switch>
</el-col>
</el-row>
<player ref="player" :playerinfo="playinfo" class="components-container"></player>
<player ref="player" :playerinfo="playinfo"></player>
</div>
</template>
<script>
@@ -48,7 +52,7 @@ export default {
streamId: '',
ssrc: '',
playurl: '',
playinfo: {},
playinfo: { playtype: 'play' },
playing: false,
pushStream: false,
retrycount: 0,
@@ -71,8 +75,8 @@ export default {
deviceId: this.device.serialNumber,
};
},
destroyed() {
console.log("destroyed");
beforeDestroy() {
console.log('beforeDestroy');
this.closeDestroy(false);
},
methods: {
@@ -99,7 +103,6 @@ export default {
}, 1000);
},
startPushStream() {
console.log('开始通道: [' + this.channelId + ']');
if (!this.channelId) {
console.log('开始通道: [' + this.channelId + ']');
return;
@@ -111,13 +114,6 @@ export default {
this.closeDestroy(true);
}
},
startPlayRecord() {
console.log('推流状态: [' + this.pushStream + ']');
this.closeDestroy(true);
setTimeout(() => {
this.startPlayer();
}, 500);
},
// 开启直播播放器
startPlayer() {
if (!this.channelId) {
@@ -128,18 +124,14 @@ export default {
if (this.playing) {
this.closeDestroy(false);
}
if (!this.$refs.player.isInit) {
this.$refs.player.init();
}
this.$refs.player.registercallback('loadingTimeout', this.TimeoutCallback);
this.$refs.player.registercallback('delayTimeout', this.TimeoutCallback);
// this.$refs.player.play("https://sample-videos.com/video321/flv/480/big_buck_bunny_480p_1mb.flv");
startPlay(this.deviceId, this.channelId).then((response) => {
console.log('开始推流: [' + this.channelId + ']');
const res = response.data;
this.streamId = res.streamId;
this.playurl = res.playurl;
console.log('开始推流: [' + this.streamId + ']');
this.$refs.player.play(res.playurl);
this.$refs.player.play(this.playurl);
this.playing = true;
this.pushStream = true;
});
@@ -147,7 +139,7 @@ export default {
closeStream(force) {
if (force) {
if (this.playing && this.streamId) {
console.log('关闭推流3: [' + this.streamId + ']');
console.log('强制关闭推流: [' + this.streamId + ']');
closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
this.streamId = '';
this.ssrc = '';
@@ -158,7 +150,7 @@ export default {
}
} else {
if (this.playing && this.streamId) {
console.log('关闭推流3: [' + this.streamId + ']');
console.log('关闭推流: [' + this.streamId + ']');
closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
this.streamId = '';
this.ssrc = '';

85
vue/src/views/components/player/player.vue
View File

@@ -9,6 +9,7 @@
<script>
let jessibucaPlayer = {};
import { ptzdirection, ptzscale } from '@/api/iot/sipdevice';
export default {
name: 'player',
props: {
@@ -37,7 +38,12 @@ export default {
isInit: false,
playinfo: {},
playtype: 'play',
operateBtns: {},
operateBtns: {
fullscreen: true,
zoom: true,
play: true,
audio: true,
},
};
},
beforeDestroy() {},
@@ -46,9 +52,7 @@ export default {
if (this.playinfo && this.playinfo.playtype !== '') {
this.playtype = this.playinfo.playtype;
}
this.$nextTick(() => {
this.init();
})
},
methods: {
init() {
@@ -60,14 +64,21 @@ export default {
console.log('暂不支持webGPU，降级到webgl渲染');
this.useWebGPU = false;
}
const useVconsole = this.isMobile() || this.isPad();
if (useVconsole && window.VConsole) {
new window.VConsole();
}
this.$nextTick(() => {
this.initplayer();
});
},
initplayer() {
this.isPlaybackPause = false;
this.initconf();
let options = {
jessibucaPlayer[this._uid] = new window.JessibucaPro({
container: this.$refs.container,
decoder: '/js/jessibuca/decoder.js',
decoder: '/js/jessibuca-pro/decoder-pro.js',
videoBuffer: Number(0.2), // 缓存时长
isResize: false,
useWCS: false,
@@ -75,16 +86,19 @@ export default {
useSIMD: true,
wcsUseVideoRender: false,
loadingText: '加载中',
debug: true,
debug: false,
debugLevel: 'debug',
showBandwidth: true, // 显示网速
showPlaybackOperate: true,
operateBtns: this.operateBtns,
forceNoOffscreen: true,
isNotMute: false,
isNotMute: true, // 默认关闭声音
showPerformance: false,
useWebGPU: this.useWebGPU,
};
jessibucaPlayer[this._uid] = new window.Jessibuca({...options});
// playFailedAndReplay: true,
// networkDelayTimeoutReplay: true,
playbackForwardMaxRateDecodeIFrame: 4,
useWebGPU: this.useWebGPU, // 使用WebGPU
});
let jessibuca = jessibucaPlayer[this._uid];
this.initcallback(jessibuca);
this.isInit = true;
@@ -92,16 +106,10 @@ export default {
initconf() {
if (this.playtype === 'play') {
//直播按钮配置
this.operateBtns = {
fullscreen: true,
play: true,
};
this.operateBtns.ptz = true;
} else {
//录像回放按钮配置
this.operateBtns = {
fullscreen: true,
play: true,
};
this.operateBtns.ptz = false;
}
},
initcallback(jessibuca) {
@@ -111,7 +119,7 @@ export default {
console.log(error);
//_this.destroy();
});
jessibuca.on("playFailedAndPaused", function (reason, lastFrameInfo, msg) {
jessibuca.on('playFailedAndPaused', function (reason, lastFrameInfo, msg) {
console.log('playFailedAndPaused', reason, msg);
// lastFrameInfo 是最后一帧的画面，可以用来重播的时候，显示最后一帧画面。
// msg 具体的错误信息。
@@ -129,6 +137,10 @@ export default {
console.log('pause success!');
console.log(pause);
});
jessibuca.on('play', function (flag) {
console.log('play!');
console.log(flag);
});
jessibuca.on('loading', function (load) {
console.log('loading success!');
console.log(load);
@@ -139,18 +151,22 @@ export default {
jessibuca.on('timeout', function (error) {
console.log('timeout:', error);
});
// let pre = 0;
// let cur = 0;
// jessibuca.on('timeUpdate', function (ts) {
// cur = parseInt(ts / 60000);
// if (pre !== cur) {
// pre++;
// }
// });
// jessibuca.on("ptz", (arrow) => {
// console.log('ptz arrow', arrow);
// _this.handlePtz(arrow);
// });
jessibuca.on('playbackPreRateChange', (rate) => {
jessibuca.forward(rate);
});
let pre = 0;
let cur = 0;
jessibuca.on('timeUpdate', function (ts) {
cur = parseInt(ts / 60000);
if (pre !== cur) {
pre++;
}
});
jessibuca.on(JessibucaPro.EVENTS.ptz, (arrow) => {
console.log('ptz arrow', arrow);
_this.handlePtz(arrow);
});
jessibuca.on('crashLog', (data) => {
console.log('crashLog is', data);
});
@@ -216,16 +232,9 @@ export default {
playList: playTimes,
fps: 25, //FPS（定频(本地设置)生效）
showControl: true,
showRateBtn: true,
isUseFpsRender: true, // 是否使用固定的fps渲染，如果设置的fps小于流推过来的，会造成内存堆积甚至溢出
isCacheBeforeDecodeForFpsRender: false, // rfs渲染时，是否在解码前缓存数据
supportWheel: true, // 是否支持滚动轴切换精度。
rateConfig: [
{ label: '正常', value: 1 },
{ label: '2倍', value: 2 },
{ label: '4倍', value: 4 },
{ label: '8倍', value: 8 },
],
});
this.isPlaybackPause = false;
}

2
vue/src/views/iot/device/device-edit.vue
View File

@@ -135,7 +135,7 @@
<device-timer ref="deviceTimer" :device="form" />
</el-tab-pane>
<el-tab-pane name="deviceUser" key="4" v-if="form.deviceId !==0">
<el-tab-pane name="deviceUser" key="4" v-if="form.deviceId !=0">
<span slot="label">设备用户</span>
<device-user ref="deviceUser" :device="form" @userEvent="getUserData($event)" />
</el-tab-pane>

2
vue/src/views/iot/device/index.vue
View File

@@ -452,7 +452,7 @@ export default {
deviceId: deviceId,
isSubDev: isSubDev,
pageNum: this.queryParams.pageNum,
activeName: 'sipChannel',
activeName: 'videoLive',
},
});
} else {

2
vue/src/views/iot/product/product-edit.vue
View File

@@ -180,7 +180,6 @@ import productThingsModel from "./product-things-model";
import productApp from "./product-app";
import productAuthorize from "./product-authorize";
import imageUpload from "../../../components/ImageUpload/index";
import business from "../business/index";
import configSip from '../sip/sipconfig.vue';
import {
listProtocol
@@ -209,7 +208,6 @@ export default {
productApp,
productAuthorize,
imageUpload,
business,
configSip,
},
data() {