海康视频 h5player 配置 proxy 代理websocket播放视频问题(websocket在业务系统https方式访问http的播放视频)

前言:系统网站安装了https证书,但访问无法访问海康http方式的视频资源,如下解决方案。

通过一下步骤可正常安装:

一、获取海康视频的播放ip地址,通过接口获取到地址如下(需要做处理):

bash 复制代码
# 地址结构
"url": "wss://网站域名:网站端口/proxy/海康视频IP:海康视频端口/openUrl/AqpVY08"
# 1、海康获取到的源url为:ws://192.168.110.11:559/openUrl/AqpVY08
# 2、需要通过字符串处理,把ws://后面的信息截取出来
# 3、然后把通过自己的本地域名,拼接海康的url进行整合
# 4、最后生成实例:"url": "wss://wwwp.xxxx.com:80/proxy/192.168.110.11:559/openUrl/AqpVY08"

二、后端配置nginx代理方式:

1、配置proxy_headers_hash_max_size和proxy_headers_hash_bucket_size,如果不配置重启Nginx会有警告。值尽量设置大一些

2、/proxy/ 的代理配置,需要结合url的地址进行转发。

nginx 复制代码
http {
    proxy_headers_hash_max_size 1024;
    proxy_headers_hash_bucket_size 512;
    
	# 海康平台配置,只能配置成proxy,需要和前端的代码对接
        location /proxy/ {
            proxy_pass http://192.168.110.11:559;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_buffering off;
            proxy_redirect off;
        }
}
	    

三、生成海康的地址修改(有则修改,没有则忽略这步)

bash 复制代码
# 如果是存在proxy=wss需要把后面的这段去掉,如果没有则忽略
# 源url:http://x.x.x.x:p/media?version=1.0&cipherSuites=0&sessionID=&proxy=wss:
# 改成url:http://x.x.x.x:p/media?version=1.0&cipherSuites=0&sessionID=
相关推荐
Thanks_ks14 小时前
HTTP 请求方法与 RESTful 接口设计:GET 和 POST 到底怎么用
http·api·restful·状态码·get·post·接口设计
一条破秋裤1 天前
【V4L2采集视频】
音视频
LK_072 天前
【FastAPI】基础篇 01|开始之前:API、HTTP 与 FastAPI 到底是什么
网络协议·http·fastapi
阿星_2 天前
pydio登陆不了分析问题
网络协议·http·https
橙橙笔记2 天前
QT的学习第四部分
linux·qt·学习·音视频
Joy T2 天前
Gzip 压缩原理与实践:HTTP 响应压缩、性能收益与工程配置
网络·网络协议·http
AI视频工具指南2 天前
用 AI 能做哪些视频?按想交付的作品选做法
人工智能·aigc·音视频
希和20273 天前
免费AI视频生成工具汇总(国内优先,适合做漫剧、短视频,Obsidian笔记版)
人工智能·笔记·音视频
謓泽3 天前
【插件】用写网页的方式做视频?HyperFrames 让我重新理解了“做视频“这件事!
gpt·ai·大模型·音视频·媒体·claude·视频
无忧_wy3 天前
MoneyPrinterTurbo 自动化视频生成实战指南
运维·人工智能·自动化·音视频