Springboot+Vue3 整合海康获取视频流并展示

Bertha 。 2023-10-10 20:12 16阅读 0赞

**目录**

1.后端

1.1 导入依赖

1.2 代码实战

2.前端

2.1 首先安装海康的web插件，前端vue3代码如下：

--------------------

## 1.后端 ##

### 1.1 导入依赖 ###

<dependency>
                <groupId>com.hikvision.ga</groupId>
                <artifactId>artemis-http-client</artifactId>
                <version>1.1.3</version>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.51</version>
            </dependency>

### 1.2 代码实战 ###

新建ArtemisPostTest类，代码如下，设置认证信息，设置ArtemisConfig的host，appKey(AK)，appSecret(SK)。设置接口URL。.设置接口入参。接口调用，调用doPostStringArtemis方法（该方法内部实现了登入认证逻辑），传入接口URL，接口入参，数据提交类型等信息，完成接口调用。

public class ArtemisPostTest {
        static {
            ArtemisConfig.host = "";// 代理API网关nginx服务器ip端口
            ArtemisConfig.appKey = "";// 秘钥appkey
            ArtemisConfig.appSecret = "";// 秘钥appSecret
        }
        /**
         * 能力开放平台的网站路径
         * TODO 路径不用修改，就是/artemis
         */
        private static final String ARTEMIS_PATH = "/artemis";
    
       public static String path="";
       public static JSONObject jsonBody=new JSONObject();
    
        /**
         * 调用POST请求类型(application/json)接口，这里以入侵报警事件日志为例
         * https://open.hikvision.com/docs/918519baf9904844a2b608e558b21bb6#e6798840
         *
         * @return
         */
        public static String callPostStringApi(){
            /**
             * http://10.33.47.50/artemis/api/scpms/v1/eventLogs/searches
             * 根据API文档可以看出来，这是一个POST请求的Rest接口，而且传入的参数值为一个json
             * ArtemisHttpUtil工具类提供了doPostStringArtemis这个函数，一共六个参数在文档里写明其中的意思，因为接口是https，
             * 所以第一个参数path是一个hashmap类型，请put一个key-value，query为传入的参数，body为传入的json数据
             * 传入的contentType为application/json，accept不指定为null
             * header没有额外参数可不传,指定为null
             *
             */
            final String getCamsApi = ARTEMIS_PATH +ArtemisPostTest.path;
            Map<String, String> path = new HashMap<String, String>(2) {
                {
                    put("https://", getCamsApi);//根据现场环境部署确认是http还是https
                }
            };
    
    
    
            String body = jsonBody.toJSONString();
    
            String result = ArtemisHttpUtil.doPostStringArtemis(path,body,null,null,"application/json",null);// post请求application/json类型参数
            return result;
        }
    
       
       
    }

新建实体类Camera代码如下：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    @Accessors(chain = true)
    public class Camera {
        String cameraIndexCode;
        String camereName;
        String url;
    }

在Controller中进行调用，代码如下：

首先根据分页获取监控点列表，这里获取的是第三页，每一页为六个监控点。

查询监控点列表v2

**接口说明**

> 根据条件查询目录下有权限的监控点列表

**接口版本**

> v2

**接口地址**

> /api/resource/v2/camera/search

**请求方法**

> POST

**数据提交方式**

> application/json

然后根据监控点唯一的标识获取预览url

**接口说明**

> 1.平台正常运行；平台已经添加过设备和监控点信息。  
> 2.平台需要安装mgc取流服务。  
> 3.三方平台通过openAPI获取到监控点数据，依据自身业务开发监控点导航界面。  
> 4.调用本接口获取预览取流URL，协议类型包括：hik、rtsp、rtmp、hls。  
> 5.通过开放平台的开发包进行实时预览或者使用标准的GUI播放工具进行实时预览。  
> 6.为保证数据的安全性，取流URL设有有效时间，有效时间为5分钟。

**接口版本**

> v2

**接口地址**

> /api/video/v2/cameras/previewURLs

**请求方法**

> POST

**数据提交方式**

> application/json

最后就是进行属性的赋值，赋值给建立的Camera 实体类。

@GetMapping("/test")
        public List<Camera> test(){
            ArtemisPostTest.path="/api/resource/v1/cameras";
            ArtemisPostTest.jsonBody.clear();
            ArtemisPostTest.jsonBody.put("pageNo", 3);
            ArtemisPostTest.jsonBody.put("pageSize", 6);
            String StringeResult = ArtemisPostTest.callPostStringApi();
            JSONObject result = (JSONObject) JSONObject.parse(StringeResult);
            String data = result.get("data").toString();
            JSONObject resultdata = (JSONObject) JSONObject.parse(data);
            JSONArray list = resultdata.getJSONArray("list");
    //        System.out.println("StringeResult结果示例: "+JSONObject.toJSON(StringeResult));
    //		callPostImgStringApi();
            ArtemisPostTest.path="/api/video/v2/cameras/previewURLs";
            List<Camera> cameraList=new ArrayList<>();
            for (Object i : list) {
                Camera camera=new Camera();
                JSONObject jsonObject = (JSONObject) JSONObject.parse(i.toString());
                String cameraIndexCode = jsonObject.get("cameraIndexCode").toString();
                String cameraName = jsonObject.get("cameraName").toString();
                ArtemisPostTest.jsonBody.clear();
                ArtemisPostTest.jsonBody.put("cameraIndexCode",cameraIndexCode);
                ArtemisPostTest.jsonBody.put("protocol","rtsp");
                String m = ArtemisPostTest.callPostStringApi();
                JSONObject jsonObject1 = (JSONObject) JSONObject.parse(m);
                JSONObject data1 = (JSONObject) jsonObject1.get("data");
                String url = data1.get("url").toString();
                camera.setCameraIndexCode(cameraIndexCode).setCamereName(cameraName).setUrl(url);
                cameraList.add(camera);
            }
            return cameraList;
        }

## 2.前端 ##

### 2.1 首先安装海康的web插件，前端vue3代码如下： ###

<template>
        <div style="display: flex;flex-direction: row;flex-wrap: wrap">
        <div v-for="item in state.list">
            <el-button @click="go(item.cameraIndexCode)">预览{
       {item.camereName}}</el-button>
        </div>
        </div>
        <div class="main" ref="playWndBox">
            <div
                    id="playWnd"
                    class="playWnd"
                    :style="{
            height: playWndHeight + 'px',
            width: playWndWidth + 'px',
          }"
            ></div>
        </div>
    </template>
    
    <script setup>
        import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick,reactive } from 'vue'
        import axios from "../utils/axios.js"
        const playWndBox = ref(null)
        let playWndHeight = ref('')
        let playWndWidth = ref('')
        let pubKey = ref('')
        let oWebControl = ref(null)
        let objData = ref({
            appkey: "",                 //海康提供的appkey
            ip: "",                     //海康提供的ip
            secret: "",                 //海康提供的secret
            port: 443,
            playMode: 0,        // 0 预览 1回放
            layout: "1x1",      //页面展示的模块数【16】
        })
        const go=(data)=>{
            previewVideo(data)
        }
        const state=reactive({
            list:[]
        })
        const load=()=>{
            axios.get("/test").then(res=>{
               state.list=res
                console.log(res)
            })
    
        }
        load()
    
        onMounted(() => {
    
            // 获取页面的实例对象
            const pageInstance = getCurrentInstance();
            // 获取dom节点对象
            const tagDomObj = pageInstance.refs.playWndBox;
            playWndHeight.value = tagDomObj.clientHeight;
            playWndWidth.value = tagDomObj.clientWidth;
    
            // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
            window.addEventListener("scroll", () => {
                console.log(5);
    
                // return
                if (oWebControl.value != null) {
                    oWebControl.JS_Resize(
                        tagDomObj.clientWidth,
                        tagDomObj.clientHeight
                    );
                    this.setWndCover();
                }
            });
    
            // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
            window.addEventListener("resize", (e) => {
                console.log(0);
    
                if (oWebControl.value != null) {
                    oWebControl.JS_Resize(
                        tagDomObj.clientWidth,
                        tagDomObj.clientHeight
                    );
                    this.setWndCover();
                }
            });
    
            // 初始化播放器插件
            nextTick(() => {
                initPlugin();
            })
        })
    
        onBeforeUnmount(() => {
            if (oWebControl.value != null) {
                // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                oWebControl.JS_HideWnd();
                // 销毁当前播放的视频
                oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
                // 断开与插件服务连接
                oWebControl.JS_Disconnect();
            }
        })
    
    
    
        const initPlugin = () => {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd", // 指定容器id
                iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                iServicePortEnd: 15900,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: () => {
                    // 创建WebControl实例成功
                    oWebControl
                        .JS_StartService("window", {
                            // WebControl实例创建成功后需要启动服务
                            // 值"./VideoPluginConnect.dll"写死
                            dllPath: "./VideoPluginConnect.dll",
                        })
                        .then(
                            function () {
                                // 设置消息回调
                                oWebControl.JS_SetWindowControlCallback({
                                    // cbIntegrationCallBack: cbIntegrationCallBack,
                                });
                                //JS_CreateWnd创建视频播放窗口，宽高可设定
                                oWebControl
                                    .JS_CreateWnd("playWnd", 1152, 581, { bEmbed: true })//这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
                                    .then(function () {
                                        // 创建播放实例成功后初始化
                                        init();
                                    });
                            },
                            function () {
                                // 启动插件服务失败
                            }
                        );
                },
                // 创建WebControl实例失败
                cbConnectError: function () {
                    // 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
    
    
                    // console.log(0);
                    // oWebControl.value = null;
                    // // 程序未启动时执行error函数，采用wakeup来启动程序
                    // window.WebControl.JS_WakeUp("VideoWebPlugin://");
                    // initCount++;
                    // if (initCount < 3) {
                    //   setTimeout(function () {
                    //     initPlugin();
                    //   }, 3000);
                    // } else {
                    //   setTimeout(function () {
                    //     setTimeout(function () {
                    //       $router.push('/home/PlugDown')
                    //     }, 4000)
                    //   }, 4000)
                    // }
                },
                cbConnectClose: () => {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    // console.log("cbConnectClose");
                    oWebControl.value = null;
                },
            });
            // oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
    
        }
    
    
    
    
        // 初始化
        const init = (callback) => {
            getPubKey(() => {
                let appkey = objData.value.appkey;                   //综合安防管理平台提供的appkey，必填
                let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
                let ip = objData.value.ip;                           //综合安防管理平台IP地址，必填
                let playMode = objData.value.playMode;                //初始播放模式：0-预览，1-回放
                let port = objData.value.port;                        //综合安防管理平台端口，若启用HTTPS协议，默认443
                let snapDir = "D:\\SnapDir";                        //抓图存储路径
                let videoDir = "D:\\VideoDir";                      //紧急录像或录像剪辑存储路径
                let layout = objData.value.layout;                   //playMode指定模式的布局
                let enableHTTPS = 1;                                //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                let encryptedFields = "secret";                     //加密字段，默认加密领域为secret
                let showToolbar = 1;                                //是否显示工具栏，0-不显示，非0-显示
                let showSmart = 0;                                  //是否显示移动框线框，0-不显示，非0-显示
                let buttonIDs =
                    "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
                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,              //自定义工具条按钮
                        }),
                    })
                    .then(function (oData) {
                        oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                        if (callback) {
                            callback();
                        }
                        // 隐藏
                        // oWebControl.JS_HideWnd()
                    });
            });
        }
    
        // RSA 加密
        let setEncrypt = (value) => {
            let encrypt = new window.JSEncrypt();
            encrypt.setPublicKey(pubKey);
            return encrypt.encrypt(value);
        }
        // 获取公钥
        const getPubKey = (callback) => {
            oWebControl
                .JS_RequestInterface({
                    funcName: "getRSAPubKey",
                    argument: JSON.stringify({
                        keyLength: 1024,
                    }),
                })
                .then(function (oData) {
                    if (oData.responseMsg.data) {
                        pubKey = oData.responseMsg.data;
                        callback();
                    }
                });
        }
    
    
    
        // 调用这个函数可进行视频播放
        // 视频预览功能
        const previewVideo = (data) => {
            let cameraIndexCode = data;  // 获取输入的监控点编号值，必填
            let streamMode = 0;          // 主子码流标识：0-主码流，1-子码流
            let transMode = 1;           // 传输协议：0-UDP，1-TCP
            let gpuMode = 0;             // 是否启用GPU硬解，0-不启用，1-启用
            let wndId = -1;              // 播放窗口序号（在2x2以上布局下可指定播放窗口）
    
            oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode, // 监控点编号
                    streamMode: streamMode,                 // 主子码流标识
                    transMode: transMode,                   // 传输协议
                    gpuMode: gpuMode,                       // 是否开启GPU硬解
                    wndId: wndId,                           // 可指定播放窗口
                }),
            })
                .then(function () {
                    oWebControl.JS_SetWindowControlCallback({
    
                    });
                });
        }
    
    </script>
    
    <style scoped>
        .main {
            position: fixed;
            top: 50%;
            left: 20%;
            transform: translateY(-50%);
            width: 60vw;
            height: 60vh;
            margin: auto;
            background-color: #ccc;
        }
    </style>