界面简化

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,181 +1,173 @@
 <template>
-  <div>
+    <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-option v-for="option in channelList" :key="option.value" :label="option.label" :value="option.value"></el-option>
-      </el-select>
+                </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">
-    </el-row>
+                <span style="font-size: 14px">开启拉流：</span>
-    <player ref="player" :playerinfo="playinfo" class="components-container"></player>
+                <el-switch v-model="pushStream" :disabled="channelId === ''" @change="startPushStream"></el-switch>
-  </div>
+            </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',
+    name: 'device-live-stream',
-  components: {
+    components: {
-    player,
+        player,
-  },
-  props: {
-    device: {
-      type: Object,
-      default: null,
     },
-  },
+    props: {
-  watch: {
+        device: {
-    // 获取到父组件传递的device后
+            type: Object,
-    device: function (newVal, oldVal) {
+            default: null,
-      this.deviceInfo = newVal;
+        },
-      if (this.deviceInfo.channelId) {
+    },
-        this.channelId = this.deviceInfo.channelId;
+    watch: {
-        this.changeChannel();
+        // 获取到父组件传递的device后
-      }
+        device: function (newVal, oldVal) {
-      if (this.deviceInfo && this.deviceInfo.deviceId !== 0) {
+            this.deviceInfo = newVal;
-        this.queryParams.deviceSipId = this.deviceInfo.serialNumber;
+            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,
+        };
     },
-  },
+    beforeDestroy() {
-  data() {
+        console.log('beforeDestroy');
-    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) {
         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) {
+    methods: {
-      if (force) {
+        /** 查询监控设备通道信息列表 */
-        if (this.playing && this.streamId) {
+        getList() {
-          console.log('关闭推流3: [' + this.streamId + ']');
+            this.loading = true;
-          closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
+            listChannel(this.queryParams).then((response) => {
-            this.streamId = '';
+                this.channelList = response.rows.map((item) => {
-            this.ssrc = '';
+                    return { value: item.channelSipId, label: item.channelName };
-            this.playurl = '';
+                });
-            this.pushStream = false;
+                console.log(this.channelList);
-          });
+            });
-          this.playing = false;
+        },
-        }
+        changeChannel() {
-      } else {
+            this.playinfo.channelId = this.channelId;
-        if (this.playing && this.streamId) {
+            this.startPlayer();
-          console.log('关闭推流3: [' + this.streamId + ']');
+        },
-          closeStream(this.deviceId, this.channelId, this.streamId).then((res) => {
+        // 直播播放
-            this.streamId = '';
+        TimeoutCallback() {
-            this.ssrc = '';
+            this.closeDestroy(false);
-            this.playurl = '';
+            this.retrycount = 0;
-            this.pushStream = false;
+            setTimeout(() => {
-          });
+                this.startPlayer();
-          this.playing = false;
+            }, 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>

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

@@ -1,331 +1,340 @@
 <template>
-  <div class="root">
+    <div class="root">
-    <div class="container-shell">
+        <div class="container-shell">
-      <div id="container" ref="container"></div>
+            <div id="container" ref="container"></div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 let jessibucaPlayer = {};
 import { ptzdirection, ptzscale } from '@/api/iot/sipdevice';
+
 export default {
-  name: 'player',
+    name: 'player',
-  props: {
+    props: {
-    playerinfo: {
+        playerinfo: {
-      type: Object,
+            type: Object,
-      default: null,
+            default: null,
+        },
     },
-  },
+    mounted() {
-  mounted() {
+        console.log(this._uid);
-    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;
-      }
     },
-  },
+    watch: {
-  jessibuca: null,
+        playerinfo: function (newVal, oldVal) {
-  data() {
+            console.log('playerinfo 发生变化');
-    return {
+            this.playinfo = newVal;
-      isPlaybackPause: false,
+            if (this.playinfo && this.playinfo.playtype !== '') {
-      useWebGPU: false,
+                this.playtype = this.playinfo.playtype;
-      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();
     },
-    initplayer() {
+    jessibuca: null,
-      this.isPlaybackPause = false;
+    data() {
-      this.initconf();
+        return {
-      let options = {
+            isPlaybackPause: false,
-        container: this.$refs.container,
+            useWebGPU: false,
-        decoder: '/js/jessibuca/decoder.js',
+            isInit: false,
-        videoBuffer: Number(0.2), // 缓存时长
+            playinfo: {},
-        isResize: false,
+            playtype: 'play',
-        useWCS: false,
+            operateBtns: {
-        useMSE: false,
+                fullscreen: true,
-        useSIMD: true,
+                zoom: true,
-        wcsUseVideoRender: false,
+                play: true,
-        loadingText: '加载中',
+                audio: true,
-        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,
         };
-      } else {
-        //录像回放按钮配置
-        this.operateBtns = {
-          fullscreen: true,
-          play: true,
-        };
-      }
     },
-    initcallback(jessibuca) {
+    beforeDestroy() {},
-      const _this = this;
+    created() {
-      jessibuca.on('error', function (error) {
+        this.playinfo = this.playerinfo;
-        console.log('jessibuca error');
+        if (this.playinfo && this.playinfo.playtype !== '') {
-        console.log(error);
+            this.playtype = this.playinfo.playtype;
-        //_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');
         }
-      });
+        this.init();
-      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);
-      });
     },
-    registercallback(events, func) {
+    methods: {
-      if (jessibucaPlayer[this._uid]) {
+        init() {
-        jessibucaPlayer[this._uid].on(events, func);
+            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;
+    display: flex;
-  margin-right: 3rem;
+    margin-right: 3rem;
 }
 
 .container-shell {
-  backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
-  // background: hsla(0, 0%, 50%, 0.5);
+    // background: hsla(0, 0%, 50%, 0.5);
-  //background: #fff;
+    //background: #fff;
-  //padding: 10px 4px 10px 4px;
+    //padding: 10px 4px 10px 4px;
-  /* border: 2px solid black; */
+    /* border: 2px solid black; */
-  // width: auto;
+    // width: auto;
-  position: relative;
+    position: relative;
-  border-radius: 10px;
+    border-radius: 10px;
-  // box-shadow: 0 5px 5px;
+    // box-shadow: 0 5px 5px;
 }
 
 .container-shell:before {
-  //content: "设备播放器";
+    //content: "设备播放器";
-  position: absolute;
+    position: absolute;
-  color: darkgray;
+    color: darkgray;
-  //top: 4px;
+    //top: 4px;
-  left: 10px;
+    left: 10px;
-  //text-shadow: 1px 1px black;
+    //text-shadow: 1px 1px black;
 }
 
 #container {
-  background: rgba(13, 14, 27, 0.7);
+    background: rgba(13, 14, 27, 0.7);
-  width: 1000px;
+    width: 1000px;
-  height: 630px;
+    height: 630px;
-  border-radius: 5px;
+    border-radius: 5px;
 }
 
 .err {
-  position: absolute;
+    position: absolute;
-  top: 40px;
+    top: 40px;
-  left: 10px;
+    left: 10px;
-  color: red;
+    color: red;
 }
 
 .option {
-  position: absolute;
+    position: absolute;
-  top: 4px;
+    top: 4px;
-  right: 10px;
+    right: 10px;
-  display: flex;
+    display: flex;
-  place-content: center;
+    place-content: center;
-  font-size: 12px;
+    font-size: 12px;
 }
 
 .option span {
-  color: white;
+    color: white;
 }
 
 @media (max-width: 720px) {
-  #container {
+    #container {
-    width: 90vw;
+        width: 90vw;
-    height: 52.7vw;
+        height: 52.7vw;
-  }
+    }
 }
 </style>

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