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

目录

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>