Uniapp_集成海康监控视频

Rainbow_Pearl

已于 2024-09-20 10:45:09 修改

阅读量382

点赞数 2

文章标签： uni-app

于 2024-09-12 17:03:10 首次发布

本文链接：https://blog.csdn.net/Rainbow_bead/article/details/141823825

版权

展示效果如下：

1、到海康开放平台下载播放器开发包，并解压

2、将海康文件夹 bin 中文件除 txt 文件，放入当前 uniapp 项目中（在 static 中新建文件夹 lib 放置其中）

3、在 lib 目录下创建 webplayer.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="./h5player.min.js"></script>
    <style type="text/css">
      .myplayer {
        width: 90vw;
        height: 28vh;
        border-radius: 2vh;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="play_window" class="myplayer"></div>

    <script>
      // 初始化插件
      var myPlugin = new JSPlugin({
        szId: "play_window", //需要英文字母开头 必填
        szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
      });
      play();

      function play() {
        // 视频流
        var playURL = GetQueryString("cameraUrl");
        console.log("视频流地址：", playURL);
        // 窗口下标
        var curIndex = 0;
        // 获取监控点唯一标识，方便作为抓图存储的key
        // var cameraIndexCode = GetQueryString("cameraIndexCode")
        // 视频预览
        myPlugin
          .JS_Play(
            playURL,
            {
              playURL,
              mode: 1, // 0 普通模式 / 1 高级模式
            },
            curIndex
          )
          .then(
            () => {
              console.info("JS_Play success ");
              // 设置取流连接超时时间
              let nTime = 300000;
              myPlugin.JS_SetConnectTimeOut(curIndex, nTime).then(
                () => {
                  console.info("JS_SetConnectTimeOut success");
                  myPlugin.JS_OpenSound(curIndex).then(
                    () => {
                      console.info("JS_OpenSound success");
                    },
                    (err) => {
                      console.info("JS_OpenSound failed");
                    }
                  );
                },
                (err) => {
                  console.info("JS_SetConnectTimeOut failed", err);
                }
              );
            },
            (err) => {
              console.info("JS_Play failed:", err);
            }
          );
        myPlugin.JS_FullScreenDisplay(true);
        // myPlugin.JS_FullScreenSingle(curIndex)
        //开启声音
      }

      // 截图
      function onScreenshot() {
        console.log("点击截屏");
        // 窗口下标
        var curIndex = 0;
        // 获取监控点唯一标识，方便作为抓图存储的key
        // var cameraIndexCode = GetQueryString("cameraIndexCode")
        // 文件名称
        var fileName = "img";
        // 文件类型
        var fileType = "JPEG";
        //下载到本地
        myPlugin.JS_CapturePicture(curIndex, fileName, fileType).then(
          (res) => {
            console.info("JS_CapturePicture success");
          },
          (err) => {
            console.info("JS_CapturePicture failed", err);
          }
        );
      }

      //取url中的参数值
      function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      }
    </script>
  </body>
</html>

4、集成在监控播放页面中

项目中的海康监控播放页面使用 web-view 控件，通过传入的动态src【插件播放器页面地址+监控通道url地址】向页面传入参数等即可实现监控播放器播放

<template>
  <view class="video">
    <web-view :src="webURL"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      webURL: "", // web-view要引入的页面url
      cameraIndexCode: "", // 监控设备编号
      url: "", //接口回调的url播放地址
    };
  },
  onLoad(option) {
    this.getDetail(option.id);
  },
  methods: {
    getDetail(idData) {
      this.$u.api
        .getmonitor({
          id: idData,
          protocol: "ws",
        })
        .then((res) => {
          if (res.data == null) {
            this.$u.toast("视频流地址为空");
          }
          this.url = res.data;
          this.previewURLs();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    // 获取视频流
    previewURLs() {
      // 视频流需要根据监控设备编号获取 接口请求这里省略
      // cameraUrl 走后台接口获取到监控的视频流
      this.webURL = "/static/lib/webplayer.html?cameraUrl=" + this.url;
    },
  },
};
</script>
<style scoped lang="scss"></style>