diff --git a/vue/public/index.html b/vue/public/index.html
index dff1813c..9e24e1ce 100644
--- a/vue/public/index.html
+++ b/vue/public/index.html
@@ -7,7 +7,10 @@
-
+
+
+
+
<%= webpackConfig.name %>
diff --git a/vue/src/views/components/player/deviceLiveStream.vue b/vue/src/views/components/player/deviceLiveStream.vue
index 41667ddf..5b6c59e6 100644
--- a/vue/src/views/components/player/deviceLiveStream.vue
+++ b/vue/src/views/components/player/deviceLiveStream.vue
@@ -1,181 +1,173 @@
<template>
- <div>
- <el-row>
- <span style="margin-left: 10px" prop="channelName">通道名称：</span>
- <el-select v-model="channelId" placeholder="请选择" @change="changeChannel()" size="small">
- <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-row>
- <player ref="player" :playerinfo="playinfo" class="components-container"></player>
- </div>
+ <div>
+ <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>
+ </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"></player>
+ </div>
</template>
<script>
import player from '@/views/components/player/player.vue';
import { startPlay, closeStream, listChannel } from '@/api/iot/channel';
export default {
- name: 'device-live-stream',
- components: {
- player,
- },
- props: {
- device: {
- type: Object,
- default: null,
+ name: 'device-live-stream',
+ components: {
+ player,
},
- },
- watch: {
- // 获取到父组件传递的device后
- device: function (newVal, oldVal) {
- this.deviceInfo = newVal;
- if (this.deviceInfo.channelId) {
- this.channelId = this.deviceInfo.channelId;
- this.changeChannel();
- }
- if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
- this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
+ props: {
+ device: {
+ type: Object,
+ default: null,
+ },
+ },
+ watch: {
+ // 获取到父组件传递的device后
+ device: function (newVal, oldVal) {
+ this.deviceInfo = newVal;
+ if (this.deviceInfo.channelId) {
+ this.channelId = this.deviceInfo.channelId;
+ this.changeChannel();
+ }
+ if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
+ this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
+ this.deviceId = this.device.serialNumber;
+ }
+ },
+ },
+ data() {
+ return {
+ deviceInfo: {},
+ deviceId: '',
+ channelId: '',
+ streamId: '',
+ ssrc: '',
+ playurl: '',
+ playinfo: { playtype: 'play' },
+ playing: false,
+ pushStream: false,
+ retrycount: 0,
+ channelList: [],
+ // 查询参数
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ deviceSipId: null,
+ channelSipId: null,
+ },
+ };
+ },
+ created() {
+ this.queryParams.deviceSipId = this.device.serialNumber;
this.deviceId = this.device.serialNumber;
- }
+ this.getList();
+ this.playinfo = {
+ playtype: 'play',
+ deviceId: this.device.serialNumber,
+ };
},
- },
- data() {
- return {
- deviceInfo: {},
- deviceId: '',
- channelId: '',
- streamId: '',
- ssrc: '',
- playurl: '',
- playinfo: {},
- playing: false,
- pushStream: false,
- retrycount: 0,
- channelList: [],
- // 查询参数
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- deviceSipId: null,
- channelSipId: null,
- },
- };
- },
- created() {
- this.queryParams.deviceSipId = this.device.serialNumber;
- this.deviceId = this.device.serialNumber;
- this.getList();
- this.playinfo = {
- playtype: 'play',
- deviceId: this.device.serialNumber,
- };
- },
- destroyed() {
- console.log("destroyed");
- this.closeDestroy(false);
- },
- methods: {
- /** 查询监控设备通道信息列表 */
- getList() {
- this.loading = true;
- listChannel(this.queryParams).then((response) => {
- this.channelList = response.rows.map((item) => {
- return { value: item.channelSipId, label: item.channelName };
- });
- console.log(this.channelList);
- });
- },
- changeChannel() {
- this.playinfo.channelId = this.channelId;
- this.startPlayer();
- },
- // 直播播放
- TimeoutCallback() {
- this.closeDestroy(false);
- this.retrycount = 0;
- setTimeout(() => {
- this.startPlayer();
- }, 1000);
- },
- startPushStream() {
- console.log('开始通道: [' + this.channelId + ']');
- if (!this.channelId) {
- console.log('开始通道: [' + this.channelId + ']');
- return;
- }
- console.log('推流状态: [' + this.pushStream + ']');
- if (this.pushStream) {
- this.startPlayer();
- } else {
- this.closeDestroy(true);
- }
- },
- startPlayRecord() {
- console.log('推流状态: [' + this.pushStream + ']');
- this.closeDestroy(true);
- setTimeout(() => {
- this.startPlayer();
- }, 500);
- },
- // 开启直播播放器
- startPlayer() {
- if (!this.channelId) {
- console.log('直播录像通道: [' + this.channelId + ']');
- return;
- }
- this.deviceId = this.queryParams.deviceSipId;
- if (this.playing) {
+ beforeDestroy() {
+ console.log('beforeDestroy');
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) => {
- const res = response.data;
- this.streamId = res.streamId;
- this.playurl = res.playurl;
- console.log('开始推流: [' + this.streamId + ']');
- this.$refs.player.play(res.playurl);
- this.playing = true;
- this.pushStream = true;
- });
},
- closeStream(force) {
- if (force) {
- if (this.playing && this.streamId) {
- console.log('关闭推流3: [' + this.streamId + ']');
- closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
- this.streamId = '';
- this.ssrc = '';
- this.playurl = '';
- this.pushStream = false;
- });
- this.playing = false;
- }
- } else {
- if (this.playing && this.streamId) {
- console.log('关闭推流3: [' + this.streamId + ']');
- closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
- this.streamId = '';
- this.ssrc = '';
- this.playurl = '';
- this.pushStream = false;
- });
- this.playing = false;
- }
- }
+ methods: {
+ /** 查询监控设备通道信息列表 */
+ getList() {
+ this.loading = true;
+ listChannel(this.queryParams).then((response) => {
+ this.channelList = response.rows.map((item) => {
+ return { value: item.channelSipId, label: item.channelName };
+ });
+ console.log(this.channelList);
+ });
+ },
+ changeChannel() {
+ this.playinfo.channelId = this.channelId;
+ this.startPlayer();
+ },
+ // 直播播放
+ TimeoutCallback() {
+ this.closeDestroy(false);
+ this.retrycount = 0;
+ setTimeout(() => {
+ this.startPlayer();
+ }, 1000);
+ },
+ startPushStream() {
+ if (!this.channelId) {
+ console.log('开始通道: [' + this.channelId + ']');
+ return;
+ }
+ console.log('推流状态: [' + this.pushStream + ']');
+ if (this.pushStream) {
+ this.startPlayer();
+ } else {
+ this.closeDestroy(true);
+ }
+ },
+ // 开启直播播放器
+ startPlayer() {
+ if (!this.channelId) {
+ console.log('直播录像通道: [' + this.channelId + ']');
+ return;
+ }
+ this.deviceId = this.queryParams.deviceSipId;
+ if (this.playing) {
+ this.closeDestroy(false);
+ }
+ this.$refs.player.registercallback('loadingTimeout', this.TimeoutCallback);
+ this.$refs.player.registercallback('delayTimeout', this.TimeoutCallback);
+ startPlay(this.deviceId, this.channelId).then((response) => {
+ console.log('开始推流: [' + this.channelId + ']');
+ const res = response.data;
+ this.streamId = res.streamId;
+ this.playurl = res.playurl;
+ this.$refs.player.play(this.playurl);
+ this.playing = true;
+ this.pushStream = true;
+ });
+ },
+ closeStream(force) {
+ if (force) {
+ if (this.playing && this.streamId) {
+ console.log('强制关闭推流: [' + this.streamId + ']');
+ closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
+ this.streamId = '';
+ this.ssrc = '';
+ this.playurl = '';
+ this.pushStream = false;
+ });
+ this.playing = false;
+ }
+ } else {
+ if (this.playing && this.streamId) {
+ console.log('关闭推流: [' + this.streamId + ']');
+ closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
+ this.streamId = '';
+ this.ssrc = '';
+ this.playurl = '';
+ this.pushStream = false;
+ });
+ this.playing = false;
+ }
+ }
+ },
+ closeDestroy(force) {
+ this.closeStream(force);
+ this.$refs.player.destroy();
+ },
+ destroy() {
+ this.$refs.player.destroy();
+ },
},
- closeDestroy(force) {
- this.closeStream(force);
- this.$refs.player.destroy();
- },
- destroy() {
- this.$refs.player.destroy();
- },
- },
};
</script>
diff --git a/vue/src/views/components/player/player.vue b/vue/src/views/components/player/player.vue
index 5a01e93a..d205cb0d 100644
--- a/vue/src/views/components/player/player.vue
+++ b/vue/src/views/components/player/player.vue
@@ -1,331 +1,340 @@
<template>
- <div class="root">
- <div class="container-shell">
- <div id="container" ref="container"></div>
+ <div class="root">
+ <div class="container-shell">
+ <div id="container" ref="container"></div>
+ </div>
</div>
- </div>
</template>
<script>
let jessibucaPlayer = {};
import { ptzdirection, ptzscale } from '@/api/iot/sipdevice';
+
export default {
- name: 'player',
- props: {
- playerinfo: {
- type: Object,
- default: null,
+ name: 'player',
+ props: {
+ playerinfo: {
+ type: Object,
+ default: null,
+ },
},
- },
- mounted() {
- console.log(this._uid);
- },
- watch: {
- playerinfo: function (newVal, oldVal) {
- console.log('playerinfo 发生变化');
- this.playinfo = newVal;
- if (this.playinfo && this.playinfo.playtype !== '') {
- this.playtype = this.playinfo.playtype;
- }
+ mounted() {
+ console.log(this._uid);
},
- },
- jessibuca: null,
- data() {
- return {
- isPlaybackPause: false,
- useWebGPU: false,
- isInit: false,
- playinfo: {},
- playtype: 'play',
- operateBtns: {},
- };
- },
- beforeDestroy() {},
- created() {
- this.playinfo = this.playerinfo;
- if (this.playinfo && this.playinfo.playtype !== '') {
- this.playtype = this.playinfo.playtype;
- }
- this.$nextTick(() => {
- this.init();
- })
- },
- methods: {
- init() {
- var isSupportWebgpu = 'gpu' in navigator;
- if (isSupportWebgpu) {
- console.log('支持webGPU');
- this.useWebGPU = true;
- } else {
- console.log('暂不支持webGPU，降级到webgl渲染');
- this.useWebGPU = false;
- }
- this.initplayer();
+ watch: {
+ playerinfo: function (newVal, oldVal) {
+ console.log('playerinfo 发生变化');
+ this.playinfo = newVal;
+ if (this.playinfo && this.playinfo.playtype !== '') {
+ this.playtype = this.playinfo.playtype;
+ }
+ },
},
- initplayer() {
- this.isPlaybackPause = false;
- this.initconf();
- let options = {
- container: this.$refs.container,
- decoder: '/js/jessibuca/decoder.js',
- videoBuffer: Number(0.2), // 缓存时长
- isResize: false,
- useWCS: false,
- useMSE: false,
- useSIMD: true,
- wcsUseVideoRender: false,
- loadingText: '加载中',
- debug: true,
- showBandwidth: true, // 显示网速
- showPlaybackOperate: true,
- operateBtns: this.operateBtns,
- forceNoOffscreen: true,
- isNotMute: false,
- showPerformance: false,
- useWebGPU: this.useWebGPU,
- };
- jessibucaPlayer[this._uid] = new window.Jessibuca({...options});
- let jessibuca = jessibucaPlayer[this._uid];
- this.initcallback(jessibuca);
- this.isInit = true;
- },
- initconf() {
- if (this.playtype === 'play') {
- //直播按钮配置
- this.operateBtns = {
- fullscreen: true,
- play: true,
+ jessibuca: null,
+ data() {
+ return {
+ isPlaybackPause: false,
+ useWebGPU: false,
+ isInit: false,
+ playinfo: {},
+ playtype: 'play',
+ operateBtns: {
+ fullscreen: true,
+ zoom: true,
+ play: true,
+ audio: true,
+ },
};
- } else {
- //录像回放按钮配置
- this.operateBtns = {
- fullscreen: true,
- play: true,
- };
- }
},
- initcallback(jessibuca) {
- const _this = this;
- jessibuca.on('error', function (error) {
- console.log('jessibuca error');
- console.log(error);
- //_this.destroy();
- });
- jessibuca.on("playFailedAndPaused", function (reason, lastFrameInfo, msg) {
- console.log('playFailedAndPaused', reason, msg);
- // lastFrameInfo 是最后一帧的画面，可以用来重播的时候，显示最后一帧画面。
- // msg 具体的错误信息。
- });
- jessibuca.on('visibilityChange', (value) => {
- if (value === true) {
- // 窗口显示
- console.log('visibilityChange true');
- } else {
- // 窗口隐藏
- console.log('visibilityChange false');
+ beforeDestroy() {},
+ created() {
+ this.playinfo = this.playerinfo;
+ if (this.playinfo && this.playinfo.playtype !== '') {
+ this.playtype = this.playinfo.playtype;
}
- });
- jessibuca.on('pause', function (pause) {
- console.log('pause success!');
- console.log(pause);
- });
- jessibuca.on('loading', function (load) {
- console.log('loading success!');
- console.log(load);
- });
- jessibuca.on('stats', function (s) {
- console.log('stats is', s);
- });
- 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('crashLog', (data) => {
- console.log('crashLog is', data);
- });
+ this.init();
},
- registercallback(events, func) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].on(events, func);
- }
+ methods: {
+ init() {
+ var isSupportWebgpu = 'gpu' in navigator;
+ if (isSupportWebgpu) {
+ console.log('支持webGPU');
+ this.useWebGPU = true;
+ } else {
+ 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();
+ jessibucaPlayer[this._uid] = new window.JessibucaPro({
+ container: this.$refs.container,
+ decoder: '/js/jessibuca-pro/decoder-pro.js',
+ videoBuffer: Number(0.2), // 缓存时长
+ isResize: false,
+ useWCS: false,
+ useMSE: false,
+ useSIMD: true,
+ wcsUseVideoRender: false,
+ loadingText: '加载中',
+ debug: false,
+ debugLevel: 'debug',
+ showBandwidth: true, // 显示网速
+ showPlaybackOperate: true,
+ operateBtns: this.operateBtns,
+ forceNoOffscreen: true,
+ isNotMute: true, // 默认关闭声音
+ showPerformance: false,
+ // playFailedAndReplay: true,
+ // networkDelayTimeoutReplay: true,
+ playbackForwardMaxRateDecodeIFrame: 4,
+ useWebGPU: this.useWebGPU, // 使用WebGPU
+ });
+ let jessibuca = jessibucaPlayer[this._uid];
+ this.initcallback(jessibuca);
+ this.isInit = true;
+ },
+ initconf() {
+ if (this.playtype === 'play') {
+ //直播按钮配置
+ this.operateBtns.ptz = true;
+ } else {
+ //录像回放按钮配置
+ this.operateBtns.ptz = false;
+ }
+ },
+ initcallback(jessibuca) {
+ const _this = this;
+ jessibuca.on('error', function (error) {
+ console.log('jessibuca error');
+ console.log(error);
+ //_this.destroy();
+ });
+ jessibuca.on('playFailedAndPaused', function (reason, lastFrameInfo, msg) {
+ console.log('playFailedAndPaused', reason, msg);
+ // lastFrameInfo 是最后一帧的画面，可以用来重播的时候，显示最后一帧画面。
+ // msg 具体的错误信息。
+ });
+ jessibuca.on('visibilityChange', (value) => {
+ if (value === true) {
+ // 窗口显示
+ console.log('visibilityChange true');
+ } else {
+ // 窗口隐藏
+ console.log('visibilityChange false');
+ }
+ });
+ jessibuca.on('pause', function (pause) {
+ 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);
+ });
+ jessibuca.on('stats', function (s) {
+ console.log('stats is', s);
+ });
+ jessibuca.on('timeout', function (error) {
+ console.log('timeout:', error);
+ });
+ 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);
+ });
+ },
+ registercallback(events, func) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].on(events, func);
+ }
+ },
+ isMobile() {
+ return /iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase());
+ },
+ isPad() {
+ return /ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase());
+ },
+ play(url) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].play(url);
+ }
+ },
+ pause() {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].pause();
+ }
+ },
+ replay(url) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].destroy().then(() => {
+ this.initplayer();
+ this.play(url);
+ });
+ } else {
+ this.initplayer();
+ this.play(url);
+ }
+ },
+ handlePtz(arrow) {
+ let leftRight = 0;
+ let upDown = 0;
+ if (arrow === 'left') {
+ leftRight = 2;
+ } else if (arrow === 'right') {
+ leftRight = 1;
+ } else if (arrow === 'up') {
+ upDown = 1;
+ } else if (arrow === 'down') {
+ upDown = 2;
+ }
+ var data = {
+ leftRight: leftRight,
+ upDown: upDown,
+ moveSpeed: 125,
+ };
+ if (this.playinfo && this.playinfo.playtype !== '') {
+ ptzdirection(this.playinfo.deviceId, this.playinfo.channelId, data).then(async (response) => {
+ //console.log("云台方向控制：" + JSON.stringify(response));
+ });
+ }
+ },
+ playback(url, playTimes) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].playback(url, {
+ playList: playTimes,
+ fps: 25, //FPS（定频(本地设置)生效）
+ showControl: true,
+ isUseFpsRender: true, // 是否使用固定的fps渲染，如果设置的fps小于流推过来的，会造成内存堆积甚至溢出
+ isCacheBeforeDecodeForFpsRender: false, // rfs渲染时，是否在解码前缓存数据
+ supportWheel: true, // 是否支持滚动轴切换精度。
+ });
+ this.isPlaybackPause = false;
+ }
+ },
+ playbackPause() {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].playbackPause();
+ this.isPlaybackPause = true;
+ }
+ },
+ replayback(url, playTimes) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].destroy().then(() => {
+ this.initplayer();
+ this.playback(url, playTimes);
+ });
+ } else {
+ this.initplayer();
+ this.playback(url, playTimes);
+ }
+ },
+ setPlaybackStartTime(curTime) {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].setPlaybackStartTime(curTime);
+ }
+ },
+ destroy() {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].destroy().then(() => {
+ this.initplayer();
+ });
+ }
+ },
+ close() {
+ if (jessibucaPlayer[this._uid]) {
+ jessibucaPlayer[this._uid].close();
+ }
+ },
},
- isMobile() {
- return /iphone|ipad|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase());
- },
- isPad() {
- return /ipad|android(?!.*mobile)|tablet|kindle|silk/i.test(window.navigator.userAgent.toLowerCase());
- },
- play(url) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].play(url);
- }
- },
- pause() {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].pause();
- }
- },
- replay(url) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].destroy().then(() => {
- this.initplayer();
- this.play(url);
- });
- } else {
- this.initplayer();
- this.play(url);
- }
- },
- handlePtz(arrow) {
- let leftRight = 0;
- let upDown = 0;
- if (arrow === 'left') {
- leftRight = 2;
- } else if (arrow === 'right') {
- leftRight = 1;
- } else if (arrow === 'up') {
- upDown = 1;
- } else if (arrow === 'down') {
- upDown = 2;
- }
- var data = {
- leftRight: leftRight,
- upDown: upDown,
- moveSpeed: 125,
- };
- if (this.playinfo && this.playinfo.playtype !== '') {
- ptzdirection(this.playinfo.deviceId, this.playinfo.channelId, data).then(async (response) => {
- //console.log("云台方向控制：" + JSON.stringify(response));
- });
- }
- },
- playback(url, playTimes) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].playback(url, {
- 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;
- }
- },
- playbackPause() {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].playbackPause();
- this.isPlaybackPause = true;
- }
- },
- replayback(url, playTimes) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].destroy().then(() => {
- this.initplayer();
- this.playback(url, playTimes);
- });
- } else {
- this.initplayer();
- this.playback(url, playTimes);
- }
- },
- setPlaybackStartTime(curTime) {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].setPlaybackStartTime(curTime);
- }
- },
- destroy() {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].destroy().then(() => {
- this.initplayer();
- });
- }
- },
- close() {
- if (jessibucaPlayer[this._uid]) {
- jessibucaPlayer[this._uid].close();
- }
- },
- },
};
</script>
<style scoped lang="scss">
.root {
- display: flex;
- margin-right: 3rem;
+ display: flex;
+ margin-right: 3rem;
}
.container-shell {
- backdrop-filter: blur(5px);
- // background: hsla(0, 0%, 50%, 0.5);
- //background: #fff;
- //padding: 10px 4px 10px 4px;
- /* border: 2px solid black; */
- // width: auto;
- position: relative;
- border-radius: 10px;
- // box-shadow: 0 5px 5px;
+ backdrop-filter: blur(5px);
+ // background: hsla(0, 0%, 50%, 0.5);
+ //background: #fff;
+ //padding: 10px 4px 10px 4px;
+ /* border: 2px solid black; */
+ // width: auto;
+ position: relative;
+ border-radius: 10px;
+ // box-shadow: 0 5px 5px;
}
.container-shell:before {
- //content: "设备播放器";
- position: absolute;
- color: darkgray;
- //top: 4px;
- left: 10px;
- //text-shadow: 1px 1px black;
+ //content: "设备播放器";
+ position: absolute;
+ color: darkgray;
+ //top: 4px;
+ left: 10px;
+ //text-shadow: 1px 1px black;
}
#container {
- background: rgba(13, 14, 27, 0.7);
- width: 1000px;
- height: 630px;
- border-radius: 5px;
+ background: rgba(13, 14, 27, 0.7);
+ width: 1000px;
+ height: 630px;
+ border-radius: 5px;
}
.err {
- position: absolute;
- top: 40px;
- left: 10px;
- color: red;
+ position: absolute;
+ top: 40px;
+ left: 10px;
+ color: red;
}
.option {
- position: absolute;
- top: 4px;
- right: 10px;
- display: flex;
- place-content: center;
- font-size: 12px;
+ position: absolute;
+ top: 4px;
+ right: 10px;
+ display: flex;
+ place-content: center;
+ font-size: 12px;
}
.option span {
- color: white;
+ color: white;
}
@media (max-width: 720px) {
- #container {
- width: 90vw;
- height: 52.7vw;
- }
+ #container {
+ width: 90vw;
+ height: 52.7vw;
+ }
}
</style>
diff --git a/vue/src/views/iot/device/device-edit.vue b/vue/src/views/iot/device/device-edit.vue
index 9de3b4d6..d717709e 100644
--- a/vue/src/views/iot/device/device-edit.vue
+++ b/vue/src/views/iot/device/device-edit.vue
@@ -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>
diff --git a/vue/src/views/iot/device/index.vue b/vue/src/views/iot/device/index.vue
index bc7bd5c2..007b74f8 100644
--- a/vue/src/views/iot/device/index.vue
+++ b/vue/src/views/iot/device/index.vue
@@ -452,7 +452,7 @@ export default {
deviceId: deviceId,
isSubDev: isSubDev,
pageNum: this.queryParams.pageNum,
- activeName: 'sipChannel',
+ activeName: 'videoLive',
},
});
} else {
diff --git a/vue/src/views/iot/product/product-edit.vue b/vue/src/views/iot/product/product-edit.vue
index eb19bf1b..bf32b9dc 100644
--- a/vue/src/views/iot/product/product-edit.vue
+++ b/vue/src/views/iot/product/product-edit.vue
@@ -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() {