添加实时视频查看

zengh

2021-02-05 db7c442b41497d4528ea58a852246ca793a9d099

添加实时视频查看

 src/page/index/logo.vue

@@ -73,7 +73,12 @@
              </el-form-item>
            </el-col>


            <el-col span="12">
              <el-form-item label="实时视频">
                <el-button type="primary" @click.stop="queryOldVideo(form)"
                >查看视频</el-button>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
@@ -111,6 +116,25 @@
          </el-row>
        </el-form>
      </el-dialog>

      <el-dialog
        class="ss-video-dialog"
        :modal="false"
        width="100%"
        title="历史视频"
        :visible.sync="innerVisibleVideo"
        :close-on-press-escape="false"
        append-to-body
        @opened="openOldVideoBox"
        @close="closeOldVideoBox"
      >
        <video
          src=""
          id="old_video"
          style="width: 100%; height: 100%; object-fit:fill"
          controls
        ></video>
      </el-dialog>
    </div>


@@ -121,11 +145,13 @@
<script>
  import { mapGetters } from "vuex";
  import axios from 'axios'
  import Hls from "hls.js";
  export default {
    name: "logo",
    data() {
      return {
        dialogTableVisible:false,
        innerVisibleVideo: false,
        deviceId:null,
        form: {},
      };
@@ -243,7 +269,155 @@
          method: 'post',
        }).then(function () {
        });
      },
      queryOldVideo(data) {
        var newAxios = axios.create({
          baseURL: "https://s16s652780.51mypc.cn",
          withCredentials: false,
          headers: {
            "Content-type": "application/x-www-form-urlencoded"
          }
        });

        var time = this.beginTimeOrEndTime(data.alarmTime);

        newAxios
          .post(
            "/api_control",
            {},
            {
              params: {
                param: JSON.stringify({ PktType: "GetAccessToken" })
              }
            }
          )
          .then(res => {
            newAxios
              .get(
                `/GetPlayUrl?deviceCode=${data.channelNumber}&chl=${data.serialNumber}`
              )
              .then(result => {
                this.innerVisibleVideo = true;

                this.videoSource = result.data.data.m3u8;
              });

            //   newAxios
            //     .post(
            //       "/api_control",
            //       {},
            //       {
            //         params: {
            //           param: JSON.stringify({
            //             PktType: "RemotePlayback",
            //             accessToken: res.data.data.accessToken,
            //             deviceCode: "001231409472",
            //             startTime: "20210130150000",
            //             endTime: "20210130160000",
            //             chl: data.serialNumber
            //           })
            //         }
            //       }
            //     )
            //     .then(result => {

            //       this.innerVisibleVideo = true;

            //       this.videoSource = result.data.data.m3u8;

            //     });
          });
      },

      beginTimeOrEndTime(time) {
        var beginTime = new Date(time);

        var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);

        var beginY = beginTime.getFullYear();

        var beginM =
          beginTime.getMonth() + 1 < 10
            ? "0" + (beginTime.getMonth() + 1)
            : beginTime.getMonth() + 1;

        var beginD =
          beginTime.getDate() < 10
            ? "0" + beginTime.getDate()
            : beginTime.getDate();

        var beginH =
          beginTime.getHours() < 10
            ? "0" + beginTime.getHours()
            : beginTime.getHours();

        var beginm =
          beginTime.getMinutes() < 10
            ? "0" + beginTime.getMinutes()
            : beginTime.getMinutes();

        var begins =
          beginTime.getSeconds() < 10
            ? "0" + beginTime.getSeconds()
            : beginTime.getSeconds();

        var endY = endTime.getFullYear();

        var endM =
          endTime.getMonth() + 1 < 10
            ? "0" + (endTime.getMonth() + 1)
            : endTime.getMonth() + 1;

        var endD =
          endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();

        var endH =
          endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();

        var endm =
          endTime.getMinutes() < 10
            ? "0" + endTime.getMinutes()
            : endTime.getMinutes();

        var ends =
          endTime.getSeconds() < 10
            ? "0" + endTime.getSeconds()
            : endTime.getSeconds();
        return {
          begin: beginY + beginM + beginD + beginH + beginm + begins,
          end: endY + endM + endD + endH + endm + ends
        };
      },
    openOldVideoBox() {
      if (Hls.isSupported()) {
        var dom = document.getElementById("old_video");

        // if (dom.volume) dom.volume = 1.0;

        this.hls = new Hls();

        var m3u8Url = decodeURIComponent(this.videoSource);

        this.hls.loadSource(m3u8Url);

        this.hls.attachMedia(dom);

        this.hls.on(Hls.Events.MANIFEST_PARSED, function() {
          dom.play();
        });
      }
    },
    closeOldVideoBox() {
      var dom = document.getElementById("old_video");

      if (dom.getAttribute("src") != "") {
        dom.pause();

        dom.setAttribute("src", "");

        this.hls.destroy();
      }
    },
    }
  };
</script>
@@ -321,5 +495,31 @@
    border-radius: 10px 10px 10px 10px;
  }

  .ss-video-dialog {
    position: absolute !important;
    top: 50px !important;
    left: auto !important;
    right: 0px !important;
    bottom: 0 !important;
    margin: auto !important;
    width: 476px !important;
  }

  .ss-video-dialog .el-dialog {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    margin-top: 15vh !important;
    height: 520px;
  }

  .ss-video-dialog .el-dialog .el-dialog__body {
    height: calc(100% - 54px);
    box-sizing: border-box;
  }


</style>