海康视频Web插件踩坑及解决实战记录

 更新时间:2026年07月03日 08:48:23   作者:我好帅啊~  
随着视频监控技术的不断进步,海康浏览器插件应运而生,成为连接用户与视频监控系统的重要桥梁,这篇文章主要介绍了海康视频Web插件踩坑及解决的相关资料,文中介绍的非常详细,需要的朋友可以参考下

视频插件实际已安装,提示未安装

问题详细描述

  • 海康视频插件已安装正确版本,并且已确认插件服务正常运行,但前端页面还是提示未安装。
  • 浏览器网站请求,海康视频插件唤起接口http://127.0.0.1:1590x/imghttp/local 被瞬间拒绝
  • 浏览器控制台,报错:Access to image at http://127.0.0.1:1590x/imghttp/local?update=xxxxxxxxxxxxx from origin http://xxx.xxx.xxx.xxx:xxxx/ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local
  • 如图

原因解析

浏览器认为页面是不安全的,拒绝调用海康视频插件。

处理方法(一:新版谷歌内核浏览器)

  1. 打开浏览器 实验性功能页面
    • edge浏览器:edge://flags/
    • 谷歌浏览器:chrome://flags/
  2. 搜索 insecure origins treated as secure 选项

使用此选项将给定的(不安全的)来源视为安全来源。可以提供多个来源,用逗号分隔。来源必须指定其协议,例如 “http://example.com”。有关安全环境的定义,请参见 https://w3c.github.io/webappsec-secure-contexts/ – Mac、Windows、Linux、Android

  1. 将域名填入输入框并选择启用

  2. 关闭浏览器,重新打开页面即可正常调用

处理方法(二:旧版谷歌内核浏览器)

  1. 打开浏览器 实验性功能页面
    • edge浏览器:edge://flags/
    • 谷歌浏览器:chrome://flags/
  2. 搜索secure
  3. 找到 Block-insecure-private-network-requests 设置为 禁用
  4. 找到 Allow invalid certificates for resources loaded from localhost 设置为 启用

视频插件播放不正常,插件小窗口看不到画面,全面可看到画面

问题详细描述

  • 海康视频Web插件加载完成后显示不正常,为白色页面或其他纯色页面。但实际已加载完成。
  • 开始视频播放后,视频已开始播放,但页面中无法看到,盲点右下角全屏按钮,全屏后可正常查看

原因解析

海康视频插件嵌入模式错乱,导致页面无法正常显示

处理方法

在初始化调用JS_CreateWnd方法时,添加bEmbed参数并设置为false

this.webControlInstance.JS_CreateWnd(id, width, height, { bEmbed: false })

总结 

到此这篇关于海康视频Web插件踩坑及解决实战的文章就介绍到这了,更多相关海康视频Web插件踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS+Vue实现三级全选单选

    JS+Vue实现三级全选单选

    这篇文章主要为大家详细介绍了JS+Vue实现三级全选单选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 如何用JS实现网页瀑布流布局

    如何用JS实现网页瀑布流布局

    这篇文章主要介绍了如何用JS实现网页瀑布流布局,帮助大家更好的利用JavaScript制作网页,感兴趣的朋友可以了解下
    2021-04-04
  • js控制iframe的高度/宽度让其自适应内容

    js控制iframe的高度/宽度让其自适应内容

    这篇文章主要介绍了如何使用js控制iframe的高度/宽度让其自适应内容,需要的朋友可以参考下
    2014-04-04
  • elementui的select实现多选添加功能

    elementui的select实现多选添加功能

    这篇文章主要介绍了elementui的select实现多选添加功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • 前端项目打包生成 JS 文件的核心步骤完整记录

    前端项目打包生成 JS 文件的核心步骤完整记录

    这篇文章主要给大家介绍了关于前端项目打包生成JS文件的核心步骤,前端项目打包过程包括项目准备、配置、执行和输出,Webpack、Vite和Rollup是主流工具,文中通过代码将实现步骤介绍的非常详细,需要的朋友可以参考下
    2025-05-05
  • uni-app路由配置文件pages.json平台化拆分

    uni-app路由配置文件pages.json平台化拆分

    这篇文章主要为大家介绍了uni-app路由配置文件pages.json平台化拆分示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 微信小程序canvas截取任意形状的实现代码

    微信小程序canvas截取任意形状的实现代码

    这篇文章主要介绍了微信小程序canvas截取任意形状的实现代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能...
    2007-01-01
  • JS添加删除DIV的简单实例

    JS添加删除DIV的简单实例

    下面小编就为大家带来一篇JS添加删除DIV的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 网页加载速度优化技巧的方案详解

    网页加载速度优化技巧的方案详解

    这篇文章主要为大家介绍了网页加载速度优化技巧的方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-05-05

最新评论