界面简化

vue/public/index.html

@@ -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 %>

vue/src/views/components/player/deviceLiveStream.vue

@@ -1,14 +1,18 @@
 <template>
     <div>
-    <el-row>
+        <el-row :gutter="20" style="margin-bottom: 16px">
-      <span style="margin-left: 10px" prop="channelName">通道名称：</span>
+            <el-col :span="1.5">
-      <el-select v-model="channelId" placeholder="请选择" @change="changeChannel()" size="small">
+                <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-col>
-      <el-switch v-model="pushStream" active-color="#13ce66" inactive-color="#c4c6c9" style="border-radius: 10px" :disabled="channelId === ''" @change="startPushStream"></el-switch>
+            <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() {
+    beforeDestroy() {
-    console.log("destroyed");
+        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(this.playurl);
-        this.$refs.player.play(res.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 = '';

vue/src/views/components/player/player.vue

@@ -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,
+                // playFailedAndReplay: true,
-      };
+                // networkDelayTimeoutReplay: true,
-      jessibucaPlayer[this._uid] =  new window.Jessibuca({...options});
+                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 = {
+                this.operateBtns.ptz = true;
-          fullscreen: true,
-          play: true,
-        };
             } else {
                 //录像回放按钮配置
-        this.operateBtns = {
+                this.operateBtns.ptz = false;
-          fullscreen: true,
-          play: true,
-        };
             }
         },
         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;
+            jessibuca.on('playbackPreRateChange', (rate) => {
-      // let cur = 0;
+                jessibuca.forward(rate);
-      // jessibuca.on('timeUpdate', function (ts) {
+            });
-      //   cur = parseInt(ts / 60000);
+
-      //   if (pre !== cur) {
+            let pre = 0;
-      //     pre++;
+            let cur = 0;
-      //   }
+            jessibuca.on('timeUpdate', function (ts) {
-      // });
+                cur = parseInt(ts / 60000);
-      // jessibuca.on("ptz", (arrow) => {
+                if (pre !== cur) {
-      //   console.log('ptz arrow', arrow);
+                    pre++;
-      //   _this.handlePtz(arrow);
+                }
-      // });
+            });
+            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;
             }

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>

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 {

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() {