vue中播放m3u8格式实时监控画面（取流）--调用后端接口

实现目标：点击按钮，出现弹窗，弹窗中为m3u8格式的监控实时画面。

实现效果：

 

 

1.index.html文件中：

<!-- 取流 -->
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

2.安装：

cnpm install --save video.js

cnpm install --save videojs-contrib-hls

3.main.js文件中引入相关样式（样式可修改）：

import 'video.js/dist/video-js.css'

4.相应的vue文件中：

import videojs from "video.js";
import "videojs-contrib-hls";

弹窗样式（template中）： 

<el-dialog
          title="预  览"
          :visible.sync="dialogVisible"
          width="35%"
          class="video-box"
        >
          <video
            id="myVideo"
            class="video-js vjs-default-skin vjs-big-play-centered"
            controls
            preload="auto"
            width="600"
            height="330"
            data-setup="{}"
          >
            <source id="source" :src="srcPath" type="application/x-mpegURL" />
          </video>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">确   定</el-button>
          </span></el-dialog
        >

点击出现弹窗的按钮样式（template 中）：

<template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="preview(scope.row.cameraIndexCode)"
                title="预览"
              >
                预览
              </el-button>
            </template>

methods中：

preview(cameraIndexCode) {
      this.dialogVisible = true;
      this.srcPath = "";
      this.indexCodeCamera = cameraIndexCode;
      let param = {
        cameraIndexCode: this.indexCodeCamera
      };
      // 获取摄影监控实时画面--调用接口
      videoPreview(param).then((res) => {
        if (res.status == 200) {
          this.srcPath = res.data.data.url;

          setTimeout(() => {
            if (myVideo) {
              myVideo.src(this.srcPath);
              myVideo.play();
            } else {
              myVideo = videojs("myVideo", {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImage: false,
                errorDisplay: false,
              });
              myVideo.src(this.srcPath);
              myVideo.play();
            }

            // myVideo.pause();
          });
        } else {
          this.$message.warning("请稍后再试");
        }
      });
    }

后端的swagger中：