web端对接海康平台V1.5.1插件

1、下载webv1.5.1插件

2、获取APPKey和APPSecret

需要登录综合安防平台（可以对接平台的话会有一套可访问的管理页面），点击状态监控，选择API网关下的API管理，进入API网关后，点击合作方管理，点击合作方名称，获取AK/SK，AK对应合作方Key，Sk对应合作方secret。

3、运行demo

安装bin目录下的VideoWebPlugin.exe，然后运行demo下的webs.exe，打开demo_window_integration.html，输入appkey、secret、ip、port点击下面的执行按钮，成功之后红色的视频框会加载成功变成下图。

将视频监控点编号输入到如图位置，点击执行，即可预览视频画面

如果视频非常卡顿，可将主码流改为子码流，如果还是卡顿，在运管中心/状态监控/API网关/API管理/API列表里找到“获取监控点预览取流URLv2”，点击在线调试，输入监控点编号、appKey和APPsecret，将”streamform”参数改为”rtp”，右侧会返回rtsp视频流，在VLC播放器里播放，看看丢包率，查看是否是网络问题。如果返回的视频一直播放不成功，排查①设备本身不在线②554端口不通

4、在项目中使用

注释：
/**
 * oWebControl是配置的全局变量
 * 需要考虑切换web3.2控件的情况，所以V1.5.1做显隐，如果只需要加载V1.5.1，显隐相关的方法可以忽略，直接初始化和销毁v1.5.1插件
 * HikPlatformRef是封装的组件，后面会统一放上来，本页只放调用
 */

//未初始化过平台插件
if(!this.$url.oWebControl){
	this.$refs.HikPlatformRef.initPlugin(0);  //初始化平台视频插件
}else{
	this.$url.PlatVideo_Total.ShowWnd();  //显示1.5.1视频
}


//点击视频加载对应的画面 serialNumber是视频的code码
this.$refs.HikPlatformRef.lookVideo(serialNumber);  //查看视频

<template>
    <div :id="videoParam.warpId" class="playWnd" :style="videoParam.styleData"></div>
</template>

<script>
    import {WebControl} from "../../../public/js/v1.5.1/jsWebControl-1.0.0.min"
    export default {
        name: "hik_platform_video",
        data(){
            return{
                // 是否为IE浏览器
                bIE:(!!window.ActiveXObject || 'ActiveXObject' in window),
                initCount:0,
                pubKey:''
            }
        },
        props:{
            videoParam:Object
        },
        methods:{
            // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
            initPlugin(playModeValue){
                var that = this;
                this.$url.oWebControl = new WebControl({
                    szPluginContainer: that.videoParam.warpId,          // 指定容器id
                    iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                    iServicePortEnd: 15909,
                    // 用于IE10使用ActiveX的clsid
                    szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   
                    // 创建WebControl实例成功
                    cbConnectSuccess: function () {                     
                        that.initCount = 0;
                        // WebControl实例创建成功后需要启动服务
                        that.$url.oWebControl.JS_StartService("window", { 
                            // 值"./VideoPluginConnect.dll"写死        
                            dllPath: "./VideoPluginConnect.dll"  
                        // 启动插件服务成功
                        }).then(function () {                           
                           that.$url.oWebControl.JS_CreateWnd(
                               that.videoParam.warpId, that.videoParam.windowWidth, 
                               that.videoParam.windowHeight)
                            //JS_CreateWnd创建视频播放窗口，宽高可设定
                            .then(function () { 
                                that.init(playModeValue);  // 创建播放实例成功后初始化
                            });
                        }, function () { // 启动插件服务失败
                        });
                    },
                    cbConnectError: function () { // 创建WebControl实例失败
                        that.$url.oWebControl = null;
                        $("#"+that.videoParam.warpId).html("插件未启动，正在尝试启动，请稍候...");
                    // 程序未启动时执行error函数，采用wakeup来启动程序                        
                    WebControl.JS_WakeUp("VideoWebPlugin://"); 
                        that.initCount ++;
                        if (that.initCount < 3) {
                            setTimeout(function () {
                                that.initPlugin(playModeValue);
                            }, 3000)
                        } else {
                            $("#"+that.videoParam.warpId).html("插件启动失败，请检查插件是否安装！<input type='button' value='点击下载' id='download_video_plugin'>");
                        }
                    },
                    cbConnectClose: function (bNormalClose) {
                        // 异常断开：bNormalClose = false
                        // JS_Disconnect正常断开：bNormalClose = true
                        console.log("cbConnectClose");
                        that.$url.oWebControl = null;
                    }
                });
            },
            //初始化
            init(playModeValue){
                var that = this;
                this.getPubKey(function () {
                    //请自行修改以下变量值
                    //综合安防管理平台提供的secret，必填
                    var secret = that.setEncrypt(that.$url.PlatVideoParam.secret);   
                    var playMode = playModeValue;  //初始播放模式：0-预览，1-回放
                    var snapDir = "D:\\SnapDir";    //抓图存储路径
                    var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
                    var layout = "1x1";   //playMode指定模式的布局
                    //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                    var enableHTTPS = 1; 
                    var encryptedFields = 'secret';	 //加密字段，默认加密领域为secret
                    var showToolbar = 1;  //是否显示工具栏，0-不显示，非0-显示
                     //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                    var showSmart = 1;
                    var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
                    // 请自行修改以上变量值
                    that.$url.oWebControl.JS_RequestInterface({
                        funcName: "init",
                        argument: JSON.stringify({
                            //API网关提供的appkey                           
                            appkey: that.$url.PlatVideoParam.appkey,
                            secret: secret,    //API网关提供的secret
                            ip: that.$url.PlatVideoParam.ip, //API网关IP地址                                   
                            playMode: playMode,   //播放模式（决定显示预览还是回放界面）
                            port: that.$url.PlatVideoParam.port,//端口                      
                            snapDir: snapDir,     //抓图存储路径
                            videoDir: videoDir,   //紧急录像或录像剪辑存储路径
                            layout: layout,        //布局
                            enableHTTPS: enableHTTPS,  //是否启用HTTPS协议
                            encryptedFields: encryptedFields, //加密字段
                            showToolbar: showToolbar,   //是否显示工具栏
                            showSmart: showSmart,     //是否显示智能信息
                            buttonIDs: buttonIDs    //自定义工具条按钮
                        })
                    }).then(function (oData) {
           // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                        that.$url.oWebControl.JS_Resize(
                            that.videoParam.windowWidth, 
                            that.videoParam.windowHeight);  
                    });
                });
            },
            //反初始化
            uninit(){
                this.$url.oWebControl.JS_RequestInterface({
                    funcName: "uninit"
                });
            },
            //获取公钥
            getPubKey (callback) {
                var that = this;
                this.$url.oWebControl.JS_RequestInterface({
                    funcName: "getRSAPubKey",
                    argument: JSON.stringify({
                        keyLength: 1024
                    })
                }).then(function (oData) {
                    console.log(oData);
                    if (oData.responseMsg.data) {
                        that.pubKey = oData.responseMsg.data;
                        callback()
                    }
                })
            },
            //RSA加密
            setEncrypt (value) {
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(this.pubKey);
                return encrypt.encrypt(value);
            },
            //开启预览
            lookVideo(carCode){
                var cameraIndexCode  = carCode;     //获取输入的监控点编号值，必填
                var streamMode = 1;  //主子码流标识：0-主码流，1-子码流
                var transMode = 1;   //传输协议：0-UDP，1-TCP
                var gpuMode = 0;     //是否启用GPU硬解，0-不启用，1-启用
                var wndId = -1;       //播放窗口序号（在2x2以上布局下可指定播放窗口）

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

                this.$url.oWebControl.JS_RequestInterface({
                    funcName: "startPreview",
                    argument: JSON.stringify({
                        cameraIndexCode:cameraIndexCode,   //监控点编号
                        ezvizDirect: 0,
                        gpuMode: gpuMode,    //是否开启GPU硬解
                        streamMode: streamMode,   //主子码流标识
                        transMode: transMode,   //传输协议
                        wndId:wndId        //可指定播放窗口
                    })
                })
            }
        },
        mounted(){
            //下载插件
            $("body").on("click", "#download_video_plugin", function () {
               window.open("../../../monitor/js/v1.5.1/VideoWebPlugin.exe","_blank");
            });
        }
    }
</script>

<style scoped lang="scss">
</style>

原文链接：https://blog.csdn.net/qq_42129143/article/details/119936560

你可能也喜欢