【问题处理】海康视频websocket代理问题(websocket在业务系统https协议下调用海康ws协议)

简介

本文记录一次海康视频代理websocket 在https业务系统环境下调用海康服务ws协议的问题。

问题描述

起初前端组件展示视频时,业务系统使用的环境是https,此时海康服务调用时,使用的是ws协议,最后前端控制台报错:

复制代码
Failed to construct 'WebSocket':
 An insecure WebSocket connection may 
 not be initiated from a page loaded over HTTPS.

明显是https协议的安全控制,需要通过nginx进行代理,通过观察发现,海康插件会调用类似下面这样一段ws服务地址:

复制代码
ws://IP:PORT/media?version=1.0&cipherSuites=0&sessionID=

先让让前端将ws修改为wss协议,然后由后台nginx进行代理,这里由于是海康的内部代码行为,因此nginx只能对media关键字捕获从而进行代理,如下是代理节:

复制代码
  upstream  haikangstream {
      server ip:port; # 此处对应原海康ws请求地址
  }

server {
   ....
   location /media {
        proxy_pass http://haikangstream;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
     }
}

如此配置后按理说应该没问题,不过前端调用过程中发现,有时候某些视频能正常播放,但极大概率由视频播放不正常,失败的视频请求时nginx报错:

复制代码
2024/07/31 14:01:35 [error] 445170#0: *298 recv() failed (104: Connection reset by peer) while reading 
response header from upstream, client: 192.168.20.165, server: localhost:18000, 
request: "GET /media?version=1.0&cipherSuites=0&sessionID=&proxy=wss: HTTP/1.1", 
upstream: "http://x.x.x.x:p/media?version=1.0&cipherSuites=0&sessionID=&proxy=wss:",
 host: "192.168.20.x:xx000"

其中X是敏感屏蔽,若影响观感,还请见谅。

仔细观察发现代理后的低值http://x.x.x.x:p/media?version=1.0&cipherSuites=0&sessionID=&proxy=wss:最后的传参proxy不太正常,对比原请求ws://IP:PORT/media?version=1.0&cipherSuites=0&sessionID=尝试让前端在海康插件js中找到此处代码,将proxy拼接参数逻辑去除,即不传递此参数,重启前端,视频播放正常。

总结

处理该问题几乎花了一天的时间,但是感觉都不是技术上的问题,不知道海康api有什么考虑,但还是站在无知者的角度建议遇到这个问题之后应该采取的方案:

  1. 建议海康组件此处应考虑对wss协议的兼容。
  2. 修改前端js代码处对proxy拼接逻辑,同时nginx对media请求进行代理。
相关推荐
蝉蜕日记1 小时前
视频压缩 v1.1.31:高效压缩,无损画质,释放存储空间
音视频·生活·视频编解码·视频·软件需求
lumengabc2 小时前
视频制作流程MP4旁白语音生成裁剪视频压缩python处理ppt转视频M4a格式
音视频
乱七八糟的屋子4 小时前
Poco C++高级实战教程:线程池+日志系统+加密算法+WebSocket长连接
c++·websocket·加密解密·#poco·#c++高级开发
音视频牛哥5 小时前
AI浪潮下,实时音视频SDK正在经历怎样的价值重构?
人工智能·音视频·实时音视频·rtmp推流·低延迟rtsp播放器·低延迟rtmp播放器·rtsp转rtmp推流
乐橙开放平台6 小时前
明厨亮灶笔记:乐橙轻应用 H5 + 小程序插件,一套 BFF 出两张播放凭证
人工智能·笔记·物联网·小程序·音视频·notepad++
ofoxcoding7 小时前
Seedance 2.0 与 Wan 2026 视频生成 API 成本效率深度对比分析
网络·人工智能·ai·音视频
xingyuzhisuan7 小时前
星宇智算 AI 视频生成工具九维度全测评与行业对标分析
人工智能·音视频
豌豆学姐7 小时前
likeadmin-api 视频生成工作流实战:Seedance 2.0 接口从素材到任务查询
aigc·音视频·api·视频生成·likeadmin-api
乐橙开放平台8 小时前
养殖 SaaS 笔记:乐橙 IoT 物模型管环境,视频 OpenAPI 管回看
数据库·笔记·物联网·mysql·音视频
触底反弹17 小时前
前后端通信不是魔法,是 HTTP 协议、数据格式和浏览器安全机制共同演奏的交响曲
http·https·浏览器