添加自动通道刷新

648540858

2020-11-19 120eaa534e18749cc3e6aba0772e90fbdd790f5b

 web_src/src/components/gb28181/devicePlayer.vue

@@ -1,7 +1,7 @@
<template>
<div id="devicePlayer">
<div id="devicePlayer" v-loading="isLoging">
    <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="close()">
        <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
        <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer>
        <div id="shared" style="text-align: right; margin-top: 1rem;">
            <el-tabs v-model="tabActiveName">
                <el-tab-pane label="实时视频" name="media">
@@ -26,20 +26,6 @@
                <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
                <el-tab-pane label="录像查询" name="record">
                    <el-date-picker size="mini" v-model="videoHistory.date" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="queryRecords()"></el-date-picker>
                    <!--            <el-slider style="margin: 0 1rem 1rem 1rem;"-->
                    <!--                       v-model="timeVal"-->
                    <!--                       :min="timeMin"-->
                    <!--                       :max="timeMax"-->
                    <!--                       :step="5"-->
                    <!--                       :marks="getTimeMakrs()"-->
                    <!--                       :format-tooltip="formatTooltip">-->
                    <!--            </el-slider>-->
                    <!--            <range-slider :min="timeMin"-->
                    <!--                          :max="timeMax"-->
                    <!--                          :step="5"></range-slider>-->

                    <!--      <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"-->
                    <!--       @change="recordList()"></el-date-picker>-->
                    <el-table :data="videoHistory.searchHistoryResult" height="150" v-loading="recordsLoading">
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="文件" prop="filePath"></el-table-column>
@@ -143,41 +129,16 @@
                date: '',
                searchHistoryResult: [] //媒体流历史记录搜索结果
            },
            timeMakrs: {
                // 0   : "0:00",
                // // 60   : "1:00",
                // 120   : "2:00",
                // // 180   : "3:00",
                // 240   : "4:00",
                // // 300 : "5:00",
                // 360   : "6:00",
                // // 420   : "7:00",
                // 480   : "8:00",
                // 540   : "9:00",
                600: "10:00",
                // 660   : "11:00",
                720: "12:00",
                // 780   : "13:00",
                840: "14:00",
                // 900 : "15:00",
                960: "16:00",
                // 1020   : "17:00",
                1080: "18:00",
                // 1140   : "19:00",
                // 1200  : "20:00",
                // // 1260   : "21:00",
                // 1320   : "22:00",
                // // 1380   : "23:00",
                // 1440   : "24:00"
            },
            showVideoDialog: false,
            ssrc: '',
            convertKey: '',
            deviceId: '',
            channelId: '',
            tabActiveName: 'media',
            hasaudio: false,
            loadingRecords: false,
            recordsLoading: false,
            isLoging: false,
            timeVal: 0,
            timeMin: 0,
            timeMax: 1440,
@@ -200,6 +161,7 @@
                this.$refs.videoPlayer.pause();
            }


            switch (tab) {
                case "media":
                    this.play(param.streamInfo, param.hasAudio)
@@ -217,33 +179,97 @@
        timeAxisSelTime: function (val) {
            console.log(val)
        },
        getTimeMakrs() {
            return this.timeMakrs;
        },
        play: function (streamInfo, hasAudio) {
            this.hasaudio = hasAudio;
            // 根据媒体流信息二次判断
            if (!!streamInfo.tracks && streamInfo.tracks.length > 0) {
                var realHasAudio = false;
            var that = this;
            that.isLoging = false;
            if (!!streamInfo.tracks && streamInfo.tracks.length > 0 ) {
                for (let i = 0; i < streamInfo.tracks.length; i++) {
                    if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") { // 判断为AAC音频
                        realHasAudio = true;
                    }
                  if (streamInfo.tracks[i].codec_type == 0 && streamInfo.tracks[i].codec_id_name != "CodecH264") { // 判断为H265视频
                    that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{
                      that.close();
                      return;
                    })
                  }else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name != "CodecAAC") {
                    that.coverPlay(streamInfo, streamInfo.tracks[i].codec_id_name, ()=>{
                      that.playFromStreamInfo(false. streamInfo)
                    })
                  }else if (streamInfo.tracks[i].codec_type == 1 && streamInfo.tracks[i].codec_id_name == "CodecAAC") {
                    that.playFromStreamInfo(true, streamInfo)
                  }else {
                    that.playFromStreamInfo(false, streamInfo)
                  }
                }
                this.hasaudio = realHasAudio && this.hasaudio;
            }else {
              that.playFromStreamInfo(false, streamInfo)
            }
            this.ssrc = streamInfo.ssrc;
            // this.$refs.videoPlayer.hasaudio = hasAudio;
            // this.videoUrl = streamInfo.flv + "?" + new Date().getTime();
            this.videoUrl = streamInfo.ws_flv;
            this.showVideoDialog = true;
            console.log(this.ssrc);
        },
        coverPlay: function (streamInfo, codec_id_name, catchcallback) {
          var that = this;

          that.$confirm(codec_id_name + ' 编码格式不支持播放, 是否转码播放?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              that.isLoging = true;
              that.$axios({
                method: 'post',
                url: '/api/play/' + streamInfo.ssrc + '/convert'
              }).then(function (res) {
                if (res.data.code == 0) {
                  streamInfo.ws_flv = res.data.ws_flv;
                  that.convertKey = res.data.key;
                  setTimeout(()=>{
                    that.isLoging = false;
                    that.playFromStreamInfo(false, streamInfo);
                  }, 2000)
                } else {
                  that.isLoging = false;
                  that.$message({
                    showClose: true,
                    message: '转码失败',
                    type: 'error'
                  });
                }
              }).catch(function (e) {
                that.$message({
                  showClose: true,
                  message: '播放错误',
                  type: 'error'
                });
              });
            }).catch(function (e) {
                if (catchcallback)catchcallback()
            });
        },
        playFromStreamInfo: function (realHasAudio, streamInfo) {
          this.videoUrl = streamInfo.ws_flv;
          this.showVideoDialog = true;
          this.hasaudio = realHasAudio && this.hasaudio;
          this.ssrc = streamInfo.ssrc;
          console.log(this.ssrc);
        },
        close: function () {
            console.log('关闭视频');
            this.$refs.videoPlayer.pause();
            if (!this.$refs.videoPlayer){
              this.$refs.videoPlayer.pause();
            }
            this.videoUrl = '';
            this.showVideoDialog = false;
            if (this.convertKey != '') {
              this.$axios({
                method: 'post',
                url: '/api/play/convert/stop/' + this.convertKey
              }).then(function (res) {
                if (res.data.code == 0) {
                  console.log(res.data.msg)
                }else {
                  console.error(res.data.msg)
                }
              }).catch(function (e) {});
            }
          this.convertKey = ''
        },
        copySharedInfo: function (data) {
            console.log('复制内容：' + data);