Web端嵌入海康视频监控组件

最新推荐文章于 2025-03-28 15:00:08 发布

Chx.zhang

最新推荐文章于 2025-03-28 15:00:08 发布

阅读量3.1k

点赞数 2

文章标签：前端音视频 vue.js

本文链接：https://blog.csdn.net/qq_38987146/article/details/117123272

版权

本文档详细记录了在Web前端项目中嵌入海康视频监控组件的步骤，包括引入JS文件、安装SDK插件、初始化、视频预览及回放功能的实现，特别强调了初始化过程中的加密处理和视频ID的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近今天在做一个监控系统，需要嵌入海康的SDK。之前做这块的人已经走了，无奈只能从头开始。然而，去下载了海康的SDK使用文档，真的是想死的心都有了，看一遍完全没啥感觉。问了一下度娘，看到很多骗阅读量的无用分享，于是决定记录分享一下自己的成功调用，废话不多说，开始上干货。

1. 引入js文件

与其他分享一样，先把海康的三个js文件引入到根html文件，楼主做的是VUE项目，所以放在了public文件夹下的index.html中。

<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script> // 用于 RSA 公钥加密
<script src="jsWebControl-1.0.0.min.js"></script> // 用于前端与插件交互

2. 安装海康SDK插件

安装海康插件：WebBrowser-Plugin，可以自己去海康平台下载，友情链接，配套资料里一般也会带。然后写好视频显示的div:

 <div class="video-player"  style="positive:relative;">
        <div id="playWinPlugin" class="playWinPlugin" ref="playWinPlugin" v-if="plugin"></div>
  </div>

3. 插件调用初始化

插件初始化，按照官方文档，**照猫画虎！**具体初始化参数可以根据自己的需要进行设定，比如初始化后的布局模式layout，这里是需要1x1，可以自行设置（可设值见官方文档说明）。

注意：别忘了对secret进行加密处理，这个是必须做的，其他的ip、appkey什么的，就看个人需要了。

        //   插件初始化
        initPlugin () {
   
            let _this = this
            this.oWebControl = new WebControl({
   
                szPluginContainer: "playWinPlugin", // 要绑定容器的id
                iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909,