根据业务需要,在公司的IoT平台(WEB端)中需集成海康威视平台的摄像头视频及告警事件,本文结合开发经验及官方文档,简要描述通过海康威视综合安防管理平台中提供的API接口网关服务来获取摄像头视频流及事件的实现方法。

一 安装API接口官关服务

公司使用海康威视的视频监控服务,它提供了监控平台及运管中心两个管理软件。其中监控平台具有web和客户端,用来查看监控点视频及各类事件,运管中心是web端,用来安装、配置基于海康威视平台的各种服务,我们要用到的API接口网关服务就需要通过运管中心来安装,API接口网关服务安装过程不再赘述。

API接口网关服务安装完毕后,可访问xxx.xxx.xxx.xxx/artemis-por… 查看接口文档,一般来说,如果能够正常访问该地址,则网关服务安装成功,安装成功后获取api网关的appkey和secret。

二 获取监控点摄像头视频

监控点摄像头的视频的调用,可通过两种方式来实现,一是安装并调用海康官网的视频WEB插件进行播放,另一种方式是获取视频流(RTSP、RTMP、HLS),前端使用video.js编码实现。

方式一:安装视频WEB插件 播放

首先到海康开放平台下载插件,插件下载地址,需注册。下载解压后,安装bin目录下的VideoWebPlugin.exe。

同时也将OpenApi接口测试工具下载下来,用于快速调试接口。

image-20230308151156388

image-20230308153244446

下面给出两种使用html+js和vue2来实现的方式,注意需要配置相关监控平台IP、appkey、secret和监控点的cameraIndexCode。

1 HTML+JS

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>preview_demo</title>
    </head>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
        }

        .playWnd {
            margin: 30px 0 0 400px;
            width: 1000px;
            /*播放容器的宽和高设定*/
            height: 600px;
            border: 1px solid red;
        }

        .operate {
            margin-top: 24px;
        }

        .operate::after {
            content: '';
            display: block;
            clear: both;
        }

        .module {
            float: left;
            width: 340px;
            /*min-height: 320px;*/
            margin-left: 16px;
            padding: 16px 8px;
            box-sizing: border-box;
            border: 1px solid #e5e5e5;
        }

        .module .item {
            margin-bottom: 4px;
        }

        .module input[type="text"] {
            box-sizing: border-box;
            display: inline-block;
            vertical-align: middle;
            margin-left: 0;
            width: 150px;
            min-height: 20px;
        }

        .module .btn {
            min-width: 80px;
            min-height: 24px;
            margin-top: 100px;
            margin-left: 80px;
        }
    </style>

    <body>
        <!--预览界面-->
        <div id="operate" class="operate">
            <div class="module">
                <div class="item"><span class="label">监控点编号:</span><input id="cameraIndexCode" type="text"
                        value="913b19ec5f204c2d9d21c8d612ba5fdf">
                </div>
                <div class="item" style="margin-top: 20px;margin-left: -20px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button>
                </div>
            </div>
        </div>
        <!--视频窗口展示-->
        <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
    </body>

    <!--三个必要的js文件引入-->
    <script src="jquery-1.12.4.min.js"></script>
    <script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
    <script src="web-control_1.2.5.min.js"></script> <!-- 用于前端与插件交互 -->

    <script type="text/javascript">
        //页面加载时创建播放实例初始化
        $(window).load(function() {
            initPlugin();
        });

        //声明公用变量
        var initCount = 0;
        var pubKey = '';

        // 创建播放实例
        function initPlugin() {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd", // 指定容器id
                iServicePortStart: 15900, // 指定起止端口号,建议使用该值
                iServicePortEnd: 15900,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                cbConnectSuccess: function() { // 创建WebControl实例成功                                          
                    oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
                        dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死 
                    }).then(function() { // 启动插件服务成功
                        oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
                            // cbIntegrationCallBack: cbIntegrationCallBack
                        });

                        oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(
                            function() { //JS_CreateWnd创建视频播放窗口,宽高可设定
                                init(); // 创建播放实例成功后初始化
                            });
                    }, function() { // 启动插件服务失败
                    });
                },
                cbConnectError: function() { // 创建WebControl实例失败
                    oWebControl = null;
                    $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function() {
                            initPlugin();
                        }, 3000)
                    } else {
                        $("#playWnd").html("插件启动失败,请检查插件是否安装!");
                    }
                },
                cbConnectClose: function(bNormalClose) {
                    // 异常断开:bNormalClose = false
                    // JS_Disconnect正常断开:bNormalClose = true    
                    console.log("cbConnectClose");
                    oWebControl = null;
                    $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://");
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function() {
                            initPlugin();
                        }, 3000)
                    } else {
                        $("#playWnd").html("插件启动失败,请检查插件是否安装!");
                    }
                }
            });
        }

        // 设置窗口控制回调
        function setCallbacks() {
            oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: cbIntegrationCallBack
            });
        }

        // 推送消息
        function cbIntegrationCallBack(oData) {
            showCBInfo(JSON.stringify(oData.responseMsg));
        }

        //初始化
        function init() {
            getPubKey(function() {

                ////////////////////////////////// 请自行修改以下变量值   ////////////////////////////////////        
                var appkey = "234234234"; //综合安防管理平台提供的appkey,必填
                var secret = setEncrypt("ASDFSDFSDA"); //综合安防管理平台提供的secret,必填
                var ip = "172.16.5.11"; //综合安防管理平台IP地址,必填
                var playMode = 0; //初始播放模式:0-预览,1-回放
                var port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443
                var snapDir = "D:\\SnapDir"; //抓图存储路径
                var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
                var layout = "1x1"; //playMode指定模式的布局
                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
                var encryptedFields = 'secret'; //加密字段,默认加密领域为secret
                var showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
                var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
                var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                ////////////////////////////////// 请自行修改以上变量值   ////////////////////////////////////

                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 //自定义工具条按钮
                    })
                }).then(function(oData) {
                    oWebControl.JS_Resize(1000, 600); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                });
            });
        }

        //获取公钥
        function 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加密
        function setEncrypt(value) {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(pubKey);
            return encrypt.encrypt(value);
        }

        // 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
        $(window).resize(function() {
            if (oWebControl != null) {
                oWebControl.JS_Resize(1000, 600);
                setWndCover();
            }
        });

        // 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动
        $(window).scroll(function() {
            if (oWebControl != null) {
                oWebControl.JS_Resize(1000, 600);
                setWndCover();
            }
        });


        // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        function setWndCover() {
            var iWidth = $(window).width();
            var iHeight = $(window).height();
            var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

            var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
            var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
            var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
            var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

            iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
            iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
            iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
            iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

            oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
                oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
            }
            if (iCoverTop != 0) {
                oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
                oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
            }
            if (iCoverBottom != 0) {
                oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
            }
        }

        //视频预览功能
        $("#startPreview").click(function() {
            var cameraIndexCode = $("#cameraIndexCode").val(); //获取输入的监控点编号值,必填
            var streamMode = 0; //主子码流标识:0-主码流,1-子码流
            var transMode = 1; //传输协议:0-UDP,1-TCP
            var gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
            var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)

            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

            oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId //可指定播放窗口
                })
            })
        });

        //停止全部预览
        $("#stopAllPreview").click(function() {
            oWebControl.JS_RequestInterface({
                funcName: "stopAllPreview"
            });
        });

        // 标签关闭
        $(window).unload(function() {
            if (oWebControl != null) {
                oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题 
                oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
                    },
                    function() { // 断开与插件服务连接失败
                    });
            }
        });
    </script>
</html>

2 Vue2

  1. public/index.html 引入必要js
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title>default</title>
        <!-- 海康插件 -->
        <script src="./static/haikang/jquery-1.12.4.min.js"></script>
        <script src="./static/haikang/jsencrypt.min.js"></script>
        <script src="./static/haikang/web-control_1.2.5.min.js"></script>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>
  1. vue页面
<template>
    <div id="app">

        <!--视频窗口展示-->
        <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
        <button @click="previewVideo(cameraIndexCode)">预览</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                // 视频盒子的高度
                playWndHeight: "500",
                // 视频盒子的宽度
                playWndWidth: "700",
                oWebControl: null,
                initCount: 0,
                pubKey: "",
                cameraIndexCode: "323123123123123123", // 这里面是监控点编号
                objData: {
                    appkey: "3232", //海康平台提供的appkey
                    ip: "172.16.5.10", //平台地址
                    port: 443,
                    playMode: 0, // 0 预览 1回放
                    layout: "1x1", //页面展示的模块数【16】
                    secret: "Z7xua5AfotB8pTlyW9QL", //海康平台提供的secret
                },
            }
        },
        created() {
            this.initPlugin()
        },
        methods: {
            // 创建播放实例
            initPlugin() {
                let that = this;
                this.oWebControl = null;
                that.oWebControl = new WebControl({
                    szPluginContainer: "playWnd", // 指定容器id
                    iServicePortStart: 15900, // 指定起止端口号,建议使用该值
                    iServicePortEnd: 15909,
                    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                    cbConnectSuccess: () => {
                        // 创建WebControl实例成功
                        that.oWebControl
                            .JS_StartService("window", {
                                // WebControl实例创建成功后需要启动服务
                                // 值"./VideoPluginConnect.dll"写死
                                dllPath: "./VideoPluginConnect.dll",
                            })
                            .then(
                                function() {
                                    // 设置消息回调
                                    that.oWebControl.JS_SetWindowControlCallback({
                                        cbIntegrationCallBack: that.cbIntegrationCallBack,
                                    });
                                    //JS_CreateWnd创建视频播放窗口,宽高可设定
                                    that.oWebControl.JS_CreateWnd("playWnd", 2040, 945, {
                                            bEmbed: true
                                        })
                                        // JS_CreateWnd('playWnd2', width, height, { bEmbed: true })
                                        .then(function() {
                                            // 创建播放实例成功后初始化
                                            that.init();
                                        });
                                },
                                function() {
                                    // 启动插件服务失败
                                }
                            );
                    },
                    // 创建WebControl实例失败
                    cbConnectError: function() {
                        that.oWebControl = null;
                        // alert('插件未启动,正在尝试启动,请稍候...')
                        // that.$message.warning("插件未启动,正在尝试启动,请稍候...");
                        // 程序未启动时执行error函数,采用wakeup来启动程序
                        window.WebControl.JS_WakeUp("VideoWebPlugin://");
                        that.initCount++;
                        if (that.initCount < 3) {
                            setTimeout(function() {
                                that.initPlugin();
                            }, 3000);
                        } else {
                            // that.messageBox = true
                            // alert('插件启动失败,请安装插件并重新启动!')
                            // that.downloadHikVideo()
                            // setTimeout(function () {
                            //     that.messageBox = false
                            // }, 5000)
                            // setTimeout(function () {
                            //     alert('插件启动失败,请检查插件是否安装!')
                            //     that.$message({
                            //         message: '插件启动失败,请检查插件是否安装! \n 插件下载地址:https://www.baidu.com',
                            //         type: 'warning'
                            //     });
                            // }, 5000)
                        }
                    },
                    cbConnectClose: () => {
                        // 异常断开:bNormalClose = false
                        // JS_Disconnect正常断开:bNormalClose = true
                        // console.log("cbConnectClose");
                        that.oWebControl = null;
                    },
                });
            },
            // 初始化
            init(callback) {
                let that = this;
                that.getPubKey(() => {
                    let appkey = that.objData.appkey; //综合安防管理平台提供的appkey,必填
                    let secret = that.setEncrypt(that.objData.secret); //综合安防管理平台提供的secret,必填
                    let ip = that.objData.ip; //综合安防管理平台IP地址,必填
                    let playMode = that.objData.playMode; //初始播放模式:0-预览,1-回放
                    let port = that.objData.port; //综合安防管理平台端口,若启用HTTPS协议,默认443
                    let snapDir = "D:\\SnapDir"; //抓图存储路径
                    let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
                    let layout = that.objData.layout; //playMode指定模式的布局
                    let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
                    let encryptedFields = "secret"; //加密字段,默认加密领域为secret
                    let showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
                    let showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
                    let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                    // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮

                    that.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) {
                            that.oWebControl.JS_Resize(that.playWndWidth, that
                                .playWndHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                            if (callback) {
                                callback();
                            }
                            // 隐藏
                            // that.oWebControl.JS_HideWnd()
                        });
                });
            },
            // 获取公钥
            getPubKey(callback) {
                let that = this;
                this.oWebControl.JS_RequestInterface({
                        funcName: "getRSAPubKey",
                        argument: JSON.stringify({
                            keyLength: 1024,
                        }),
                    })
                    .then(function(oData) {
                        if (oData.responseMsg.data) {
                            that.pubKey = oData.responseMsg.data;
                            callback();
                        }
                    });
            },
            // RSA 加密
            setEncrypt(value) {
                let that = this;
                let encrypt = new window.JSEncrypt();
                encrypt.setPublicKey(that.pubKey);
                return encrypt.encrypt(value);
            },
            // 回调的消息
            cbIntegrationCallBack(oData) {
                let {
                    responseMsg: type
                } = oData;
                if (type === "error") {} else {}
            },
            // 视频预览功能
            previewVideo(data) {
                let that = this;
                let cameraIndexCode = data; // 获取输入的监控点编号值,必填
                let streamMode = 0; // 主子码流标识:0-主码流,1-子码流
                let transMode = 0; // 传输协议:0-UDP,1-TCP
                let gpuMode = 0; // 是否启用GPU硬解,0-不启用,1-启用
                let wndId = -1; // 播放窗口序号(在2x2以上布局下可指定播放窗口)
                // console.log(cameraIndexCode, "-------cameraIndexCode-");

                that.oWebControl.JS_RequestInterface({
                    funcName: "startPreview",
                    argument: JSON.stringify({
                        cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
                        streamMode: streamMode, // 主子码流标识
                        transMode: transMode, // 传输协议
                        gpuMode: gpuMode, // 是否开启GPU硬解
                        wndId: wndId, // 可指定播放窗口
                    }),
                });
            },
            // 停止全部预览
            stopAllPreview() {
                this.oWebControl.JS_RequestInterface({
                    funcName: "stopAllPreview",
                });
            },
            // 格式化时间
            dateFormat(oDate, fmt) {
                let o = {
                    "M+": oDate.getMonth() + 1, //月份
                    "d+": oDate.getDate(), //日
                    "h+": oDate.getHours(), //小时
                    "m+": oDate.getMinutes(), //分
                    "s+": oDate.getSeconds(), //秒
                    "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
                    S: oDate.getMilliseconds(), //毫秒
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1,
                        (oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
                    );
                }
                for (let k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(
                            RegExp.$1,
                            RegExp.$1.length == 1 ?
                            o[k] :
                            ("00" + o[k]).substr(("" + o[k]).length)
                        );
                    }
                }
                return fmt;
            },

            // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
            setWndCover() {
                var iWidth = $(window).width();
                var iHeight = $(window).height();
                var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

                var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
                var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
                var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
                var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

                iCoverLeft = (iCoverLeft > 2041) ? 2041 : iCoverLeft;
                iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop;
                iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight;
                iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom;

                this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946); // 多1个像素点防止还原后边界缺失一个像素条
                if (iCoverLeft != 0) {
                    this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946);
                }
                if (iCoverTop != 0) {
                    this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
                }
                if (iCoverRight != 0) {
                    this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946);
                }
                if (iCoverBottom != 0) {
                    this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom);
                }
            },
        },
    }
</script>

<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }

    .playWnd {
        margin: 30px 0 0 400px;
        width: 1000px;
        /*播放容器的宽和高设定*/
        height: 600px;
        border: 1px solid red;
    }

    .operate {
        margin-top: 24px;
    }

    .operate::after {
        content: '';
        display: block;
        clear: both;
    }

    .module {
        float: left;
        width: 340px;
        /*min-height: 320px;*/
        margin-left: 16px;
        padding: 16px 8px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
    }

    .module .item {
        margin-bottom: 4px;
    }

    .module input[type="text"] {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0;
        width: 150px;
        min-height: 20px;
    }

    .module .btn {
        min-width: 80px;
        min-height: 24px;
        margin-top: 100px;
        margin-left: 80px;
    }
</style>

方式二:接口获取视频流地址 编码播放

image-20230308153732493

通过接口,获得视频流地址,协议可以是rtsp/rtmp/hls,然后前端video.js标签编码实现。

接口地址:https://172.16.5.10/artemis/api/video/v2/cameras/previewURLs

# 字段名 类型 必填 描述
1 cameraIndexCode String true 监控点唯一标识,[分页获取监控点资源]@[软件产品-综合安防管理平台-API列表-视频应用服务-视频资源#分页获取监控点资源]接口获取返回参数cameraIndexCode
2 streamType Number 码流类型,0:主码流 1:子码流 2:第三码流 参数不填,默认为主码流
3 protocol String 取流协议(应用层协议),“hik”:HIK私有协议,使用视频SDK进行播放时,传入此类型;“rtsp”:RTSP协议;“rtmp”:RTMP协议;“hls”:HLS协议(HLS协议只支持海康SDK协议、EHOME协议、ONVIF协议接入的设备;只支持H264视频编码和AAC音频编码;云存储版本要求v2.2.4及以上的2.x版本,或v3.0.5及以上的3.x版本;ISC版本要求v1.2.0版本及以上,需在运管中心-视频联网共享中切换成启动平台内置VOD)。参数不填,默认为RTSP协议
4 transmode Number 传输协议(传输层协议),0:UDP 1:TCP 默认是TCP 注:EHOME设备回放只支持TCP传输 GB28181 2011及以前版本只支持UDP传输
5 expand String 标识扩展内容,格式:key=value, 调用方根据其播放控件支持的解码格式选择相应的封装类型; 支持的内容详见[附录F expand扩展内容说明]@[软件产品-综合安防管理平台-附录-附录F expand扩展内容说明]
6 streamform String 输出码流转封装格式,“ps”:PS封装格式、“rtp”:RTP封装协议。当protocol=rtsp时生效,且不传值时默认为RTP封装协议。

1 使用OpenAPI接口测试工具

请求参数

{
  "cameraIndexCode": "f6cf8b706bb64ddaac202ca3ff37008b",
  "protocol": "rtmp"
}

image-20230222132836298

2 使用Java实现

maven坐标:


        <dependency>

            <groupId>com.hikvision.ga</groupId>

            <artifactId>artemis-http-client</artifactId>

            <version>1.1.3</version>

        </dependency>

代码实现:

import com.hikvision.artemis.sdk.ArtemisHttpUtil;
import com.hikvision.artemis.sdk.config.ArtemisConfig;
import net.minidev.json.JSONObject;

import java.util.HashMap;
import java.util.Map;

public class GetCameraPreviewURL {

    public static String GetCameraPreviewURL() {

        /**
         * STEP1:设置平台参数,根据实际情况,设置host appkey appsecret 三个参数.
         */
        ArtemisConfig.host = "172.16.5.10:443"; // 平台的ip端口
        ArtemisConfig.appKey = "231123123";  // 密钥appkey
        ArtemisConfig.appSecret = "XXXXXXXXX";// 密钥appSecret

        /**
         * STEP2:设置OpenAPI接口的上下文
         */
        final String ARTEMIS_PATH = "/artemis";

        /**
         * STEP3:设置接口的URI地址
         */
        final String previewURLsApi = ARTEMIS_PATH + "/api/video/v2/cameras/previewURLs";
        Map<String, String> path = new HashMap<String, String>(2) {
            {
                put("https://", previewURLsApi);//根据现场环境部署确认是http还是https
            }
        };

        /**
         * STEP4:设置参数提交方式
         */
        String contentType = "application/json";

        /**
         * STEP5:组装请求参数
         */
        JSONObject jsonBody = new JSONObject();
        jsonBody.put("cameraIndexCode", "f6cf8b706bb64ddaac202ca3ff37008b");
        jsonBody.put("streamType", 0);
        jsonBody.put("protocol", "rtmp");
        jsonBody.put("transmode", 1);
//        jsonBody.put("expand", "streamform=ps");
        String body = jsonBody.toJSONString();
        /**
         * STEP6:调用接口
         */
        String result = ArtemisHttpUtil.doPostStringArtemis(path, body, null, null, contentType , null);// post请求application/json类型参数
        return result;
    }

    public static void main(String[] args) {
        String result = GetCameraPreviewURL();
        System.out.println("result结果示例: " + result);
    }
}

三 获取事件

事件可通过综合安防管理平台-事件检索来进行查看,根据API文档,可通过获取联动事件列表接口来获取数据,地址为https://172.16.5.10/artemis/api/els/v1/events/search

# 字段名 类型 必填 描述 示例
1 eventRuleId String 事件规则id 6d442617f7604e569aa1086d67ef61a8
2 ability String 事件分类,详见[附录A.62 事件分类]@[软件产品-综合安防管理平台-附录-附录A 数据字典#附录A.62 事件分类] event_vss
3 regionIndexCode String 区域编号 ec268bf2-9fd7-4815-ac4f-1000003
4 resName String 事件源名称 ehomeNVR-183.104-8-182.73
5 eventType String 事件类型,参考[附录D]@[软件产品-综合安防管理平台-附录-附录D 事件列表] 131329
6 remark String 处理意见 事件处理意见
7 handleStatus Number 处理状态,0-未处理,1-已处理 0
8 startTime String true 开始时间,ISO8601时间 2019-03-18T12:11:38.154+08:00
9 endTime String true 结束时间,ISO8601时间 2019-03-19T12:11:38.154+08:00
10 pageSize Number true 分页大小 20
11 pageNo Number true 页码 1

下面通过接口测试工具来进行测试一下,如图所示,可获取事件列表。

image-20230308160519071

这里代码实现参照

四 常见问题

1 如何获取摄像头标识cameraIndexCode?

  1. 进入综合安防管理平台,右上角系统管理

  2. 左边菜单 设备资源管理-视频设备-选择监控点-某摄像头点击编辑按钮查看监控点编号

    image-20230308160450464

    image-20230222133439883