一.对接视频流的方法

    既然要对接海康的视频，那自然少不了怎样去处理视频流。其实通过这几天的探索，我个人大概总结了如下几种方式。（如有解释不对，欢迎大佬指点）

首先 海康支持下图几种协议

     1.就是用 video.js 、videojs-flash、vue-video-player来播放 ‘rtmp’协议的视频流，这种例子有很  多，大家可以自行查阅一下。但是这种方法有个很大的弊端，就是它需要依赖于浏览器的  flash 插件，但是谷歌已经明确的表示，2020年底将不再用flash,因此，你没有flash插件，去使用这种方式播放浏览器是会报错的。

   2.用nginx搭建一个流媒体服务器，这种方式网上也很多例子，我对他的理解，就是通过ffmpe这个工具推流到nginx上，然后你去访问nginx，通过nginx监听的端口，他在将这个流转发给你，你再通过地址将流拉下来。然后播放，但是我们这海康安防平台貌似并没有开启推流功能。而且400多个人工摄像头推起来成本太大，所以这地方我就没在深入研究。感兴趣的可参考 ffmpeg+nginx-rtmp转发视频流_nginx 视频流-CSDN博客

   3.通过@easydarwin/easyplayer插件（亲测有效），地址 @easydarwin/easyplayer - npm 里面文档很详细,根据文档部署在vue项目中即可（知道你们不一定看，那，这有手把手教的Easy-player.js在vue中的使用教程 - 知乎）但是话说回来，这个插件对于海康返回的接口协议而言，只能播放 m3u8/HLS 协议了，这种视频流需要你在查询海康视频地址的时候（/api/video/v2/cameras/previewURLs）将 protocol=“hls”这个参数加上

  4.最简单，开发成本最少的。就是用人家海康的已经封装好的web插件了，如果没什么特别的项目需求的话，强烈推荐这种方式，下面会详细解说用法，以及踩坑

至于怎么获取海康的视频地址，以及接口安全认证， 参考我上篇文章vue对接海康安防平台接口，以及处理接口认证规则流程-CSDN博客

这里给大家一些现在视频流地址，迄今为止还有效，可供测试用，用Vlc打开即可

rtmp://ns8.indexforce.com/home/mystream

https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8

https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8

https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8

二、通过插件，实现视频播放、回放功能（末尾源码附上）

1.首先在海康平台下载 web插件 海康开放平台

2.解压下载好的压缩包，将bin目录下的程序安装好

3.可以将demo中的.html的必要参数修改，然后运行到浏览器中查看

 测试没问题后，既可以将他整理到Vue项目中了，

4.将

这里面的Js文件通通放到vue的public目录下

并且在必须！必须！必须！vue 的index.html中引用

3.这样在我们的.vue组件中就可以直接使用了，不墨迹了，直接上代码了

根据自己业务对立面的数据进行修改

<template>
  <div class="home">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside width="200px">
        <el-menu>
          <div class="search-input">
            <el-input
              @keydown.enter="fuzzyRetrieval"
              clearable
              size="small"
              v-model="searhKey"
              placeholder="请输入关键字"
            ></el-input>
            <el-button class="serachButton" size="small" @click="fuzzyRetrieval"
              ><i class="el-icon-search"></i
            ></el-button>
          </div>

          <el-menu-item-group v-if="cameraList.length" style="margin-top: 20px">
            <el-menu-item
              v-for="item in cameraList"
              :key="item.cameraIndexCode"
              :index="item.cameraIndexCode"
            >
              <div
                @dblclick="videoDetails(item.cameraIndexCode)"
                @click="cameraIndexCode = item.cameraIndexCode"
                :title="item.cameraName"
                class="cameraName-list"
              >
                {{ item.cameraName }}
              </div>
            </el-menu-item>
          </el-menu-item-group>

          <el-empty v-else description="暂无数据"></el-empty>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <div>
            <el-button type="primary" plain>停止所有预览</el-button>
            <el-button type="primary" plain>停止所有回放</el-button>
          </div>
          <div>
            <el-radio-group v-model="radioType" @input="changeVideoType">
              <el-radio-button label="0">实时预览</el-radio-button>
              <el-radio-button label="1">录像回放</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="playbackTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :unlink-panels="false"
              value-format="timestamp"
              :disabled="radioType === '0'"
              @focus="focusEvent"
              @blur="blurEvent"
              @change="videoDetails(cameraIndexCode)"
            >
            </el-date-picker>
          </div>
        </el-header>

        <el-main>
          <div id="video_home"></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import request from "@/utils/request.js";
import {
  SIGNATURE,
  SECRET,
  VIDEO_IP,
  VIDEO_PORT,
  APPKEY,
} from "@/components/basicStaticData.js";

//声明公用变量
var initCount = 0;
var pubKey = "";
var oWebControl = null; //webc插件的实例对象

export default {
  data() {
    return {
      //监控站点列表数据
      cameraList: [],
      //监控站点列表数据 备用
      cameraList_standby: [],
      //预览与回放的切换
      radioType: "0",
      //搜索框绑定的值
      searhKey: "",
      //日期输入框
      playbackTime: [],
      //当前用户点击的 监控点编号
      cameraIndexCode: "",
      //视频窗口初始的固定宽度
      idWidth: "",
      //视频窗口初始的固定高度
      idHeight: "",
    };
  },
  watch: {
    searhKey(newValue, oldValue) {
      if (!newValue) {
        this.cameraList = this.cameraList_standby;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      //视频窗口初始的固定宽度,当前屏幕父元素的宽度
      this.idWidth = $("#video_home").width();

      //视频窗口初始的固定高度,当前屏幕父元素的高度
      this.idHeight = $("#video_home").height();

      // 初始化web插件
      this.initPlugin();

      // 监听浏览器的变化
      this.monitoringWindow();
    });
    //查询监控列表
    this.getCamerasList();
  },
  destroyed() {
    // 页面销毁后，将插件先隐藏，再销毁
    oWebControl.JS_HideWnd();
    oWebControl.JS_Disconnect();
  },
  methods: {
    /**
     * 分页查询查询的监控列表
     *
     */
    async getCamerasList() {
      const res = await request({
        url: "artemis/api/resource/v1/cameras",
        headers: {
          "x-ca-signature": SIGNATURE,
        },
        method: "POST",
        data: {
          pageNo: 1,
          pageSize: 460,
        },
      });
      const {
        data: { list },
      } = res.data;
      this.cameraList = list;
      this.cameraList_standby = list;
    },

    /**
     * 创建WebControl实例与启动插件
     */
    initPlugin() {
      oWebControl = new WebControl({
        szPluginContainer: "video_home", //指定容器id
        iServicePortStart: 15900, //指定起止端口号，建议使用该值
        iServicePortEnd: 15900,
        cbConnectSuccess: () => {
          //实例创建成功后需要启动服务
          oWebControl
            .JS_StartService("window", {
              dllPath: "./VideoPluginConnect.dll",
            })
            .then(
              () => {
                oWebControl.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: this.cbIntegrationCallBack(),
                });

                oWebControl
                  .JS_CreateWnd("video_home", this.idWidth, this.idHeight)
                  .then(() => {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    this.init(); //创建播放实例成功后初始化
                  });
              },
              function () {}
            );
        },
        cbConnectError: function () {
          oWebControl = null;
          $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
          WebControl.JS_WakeUp("VideoWebPlugin://"); //程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(() => {
              this.initPlugin();
            }, 3000);
          } else {
            $("#playWnd").html("插件启动失败，请检查插件是否安装！");
          }
        },
      });
    },

    /**
     * 海康视频插件初始化，用于为之后的回放，预览视频做准备
     */
    init() {
      // 获取公钥
      this.getPubKey(() => {
        var appkey = APPKEY; //综合安防管理平台提供的appkey，必填
        var secret = this.setEncrypt(SECRET); //综合安防管理平台提供的secret，必填
        var ip = VIDEO_IP; //综合安防管理平台IP地址，必填
        var playMode = Number(this.radioType); //初始播放模式：0-预览，1-回放
        var port = VIDEO_PORT; //综合安防管理平台端口，若启用HTTPS协议，默认443
        var snapDir = "D:\\SnapDir"; //抓图存储路径
        var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "2x2"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
        var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
        var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        var buttonIDs =
          "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        var reconnectTimes = 2; // 重连次数，回放异常情况下有效
        //var reconnectTime = 4;  // 每次重连的重连间>=reconnectTime

        //  ****** 请自行修改以上变量值********

        oWebControl
          .JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: appkey, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式（决定显示预览还是回放界面）
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs, //自定义工具条按钮
              reconnectTimes: reconnectTimes, //重连次数
              //reconnectDuration：reconnectTime           //重连间隔
            }),
          })
          .then(() => {
            // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            oWebControl.JS_Resize(this.idWidth, this.idHeight);
          });
      });
    },

    /**
     * 监控视频实时预览
     * @param {String} cameraIndexCode 监控站点的编号
     */
    video_Preview(cameraIndexCode) {
      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode, //监控点编号，必填
          streamMode: 0, //主子码流标识：0-主码流，1-子码流，选填
          transMode: 1, // 传输协议：0-UDP，1-TCP，选填
          gpuMode: 0, //是否启用 GPU 硬解，0-不启用，1-启用，选填
          // wndId: playback_wind, // 播放窗口序号（在 2x2 以上布局下可指定播放窗口）选填
        }),
      });
    },

    /**
     * 监控视频回放
     * @param {String} cameraIndexCode 监控站点的编号
     * @param {Number} startTimeStamp 录像查询开始时间戳，单位：秒
     * @param {Number} endTimeStamp 录像查询结束时间戳，单位：秒
     */
    video_Playback(cameraIndexCode, startTimeStamp, endTimeStamp) {
      oWebControl.JS_RequestInterface({
        funcName: "startPlayback",
        argument: JSON.stringify({
          cameraIndexCode, //监控点编号，必填
          startTimeStamp, // 录像查询开始时间戳，单位：秒
          endTimeStamp, // 录像查询结束时间戳，单位：秒
          recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储
          transMode: 1, // 传输协议 ，0-UDP 1-TCP
          gpuMode: 0, // 是否开启 GPU 硬解，0-不开启 1-开
          // wndId: playback_wind, // 播放窗口序号（在 2x2 以上布局下可指定播放窗口）选填
        }),
      });
    },
    // 获取公钥
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          // console.log(oData);
          if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },

    // RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },

    // 推送消息
    cbIntegrationCallBack(oData) {
      // console.log(55555, JSON.stringify(oData));
    },

    /**
     * 用户点击左侧监控列表，调用安防平台接口，获取视频流
     * @param {*} cameraIndexCode 当前点击的监控列表的唯一值，用于接口传参
     */
    videoDetails(cameraIndexCode) {
      if (this.radioType === "0") {
        this.video_Preview(cameraIndexCode);
      } else {
        // 判断是否填写了回放时间

        if (!this.playbackTime.length) {
          this.$message.warning("请选择回放时间");
          return;
        }
        this.video_Playback(
          cameraIndexCode,
          Number(this.playbackTime[0]) / 1000,
          Number(this.playbackTime[1]) / 1000
        );
      }
    },

    /**
     * 对监控列表进行模糊检索
     */
    fuzzyRetrieval() {
      const new_CameraList = this.cameraList_standby.filter((item) => {
        return item.cameraName.indexOf(this.searhKey) > -1 ? true : false;
      });
      this.cameraList = new_CameraList;
    },

    /**
     * 时间输入框focus事件
     */
    focusEvent() {
      oWebControl.JS_Resize(this.idWidth - 650, this.idHeight);
    },

    /**
     * 时间输入框blur事件
     */
    blurEvent() {
      oWebControl.JS_Resize(this.idWidth, this.idHeight);
    },

    /**
     * 回放与预览的切换事件
     */
    changeVideoType() {
      // 先销毁 在创建,如果不这么做，只是单纯调用this.init()方法修改里面的预览和回放的参数值是行不通的
      oWebControl.JS_Disconnect().then(() => {
        this.initPlugin();
      });
    },
    /**
     * 监听浏览器窗口变化，以及关闭标签页变，并对插件做出处理
     */
    monitoringWindow() {
      // 标签关闭
      $(window).unload(function () {
        if (oWebControl != null) {
          oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
          oWebControl.JS_Disconnect().then(
            function () {},
            function () {}
          );
        }
        // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
        $(window).resize(() => {
          if (oWebControl != null) {
            oWebControl.JS_Resize(
              $("#video_home").width(),
              $("#video_home").height()
            );
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#video_home {
  width: 100%;
  height: 92vh;
}
.cameraName-list {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none; /*webkit浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}
.el-main {
  padding: 0.3vh;
}
.el-header {
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .el-radio-button__inner,
.el-radio-group {
  vertical-align: baseline;
}
.search-input {
  width: 180px;
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 99;
  box-shadow: 0px 5px 5px #d6d2d2;
}
.serachButton {
  font-size: 15px;
  padding: 7px 11px;
  background-color: #ecf1f8;
}
</style>

来看效果吧

回放

4.注意点

1.这个插件会置于浏览器的最上层，也就是说他会挡住你所有的页面元素，导致我日期没办法在        插件上边选择，如有办法，还请不吝赐教

2. 回放与预览切换时，通过直接改数值是没有用的，要先销毁，再创建

3.有不懂得多看看看插件开发指南

ok 就这样，如再发现问题会及时更新的，后续更新uni.app播放海康 欢迎评论区指正