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

海康H5Player WebSocket代理配置

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

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

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

# 地址结构
"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的地址进行转发。

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;
        }
}
	    

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

# 如果是存在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=
<think>根据用户的问题,用户想要在Vue2项目中实现FLV视频流的播放。根据提供的引用信息,有两种方案: 1. 使用EasyPlayer(引用[1]中提到) 2. 使用flv.js(引用[2]中提到) 由于用户使用的是Vue2,且flv.js是一个纯JavaScript的FLV播放器,无需Flash,且由bilibili开源,社区支持较好,因此推荐使用flv.js。 实现步骤: 1. 安装flv.js依赖 2. 在Vue组件中引入flv.js 3. 创建视频元素,并在合适的生命周期钩子中初始化flv播放器 4. 传入视频流地址(如ws://或http-flv地址) 5. 在组件销毁时,记得销毁flv播放器实例,释放资源 下面是一个具体的实现示例:</think>### Vue2 实现 FLV 视频播放方案 在 Vue2 项目中实现 FLV 视频播放,推荐使用 **flv.js** 方案(基于引用[2]),这是一个由 Bilibili 开源的纯 JavaScript FLV 播放器,无需 Flash 支持[^2]。以下是完整实现步骤: --- #### 1. **安装依赖** ```bash npm install flv.js --save ``` --- #### 2. **创建视频播放组件** 在 `src/components/FlvPlayer.vue` 文件中: ```vue <template> <div> <video ref="videoElement" controls muted autoplay width="800"></video> </div> </template> <script> import flvjs from 'flv.js' export default { props: { // 视频流地址 (示例: ws://ip:port/play/xxx.flv) videoUrl: { type: String, required: true } }, mounted() { this.initPlayer(); }, beforeDestroy() { this.destroyPlayer(); }, methods: { initPlayer() { if (flvjs.isSupported()) { const flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: true, // 直播流模式 url: this.videoUrl }); flvPlayer.attachMediaElement(this.$refs.videoElement); flvPlayer.load(); flvPlayer.play(); this.flvPlayer = flvPlayer; // 保存实例 } else { alert('浏览器不支持flv.js'); } }, destroyPlayer() { if (this.flvPlayer) { this.flvPlayer.pause(); this.flvPlayer.unload(); this.flvPlayer.detachMediaElement(); this.flvPlayer.destroy(); this.flvPlayer = null; } } } } </script> ``` --- #### 3. **在父组件中使用** ```vue <template> <div> <FlvPlayer :video-url="flvUrl" /> </div> </template> <script> import FlvPlayer from '@/components/FlvPlayer.vue' export default { components: { FlvPlayer }, data() { return { // 示例地址 (替换为实际海康威视流地址) flvUrl: 'ws://192.168.1.100:8080/play/JV0124102/fe8bfad5-3b48-4965-98d9-4fbb168898eb.flv' } } } </script> ``` --- #### 关键配置说明 1. **视频流地址格式**: ```text ws://[IP]:[端口]/play/[设备ID]/[视频ID].flv ``` 参考海康威视 FLV 流格式[^1] 2. **跨域问题**: - 开发环境:在 `vue.config.js` 中配置代理 ```js devServer: { proxy: { '/play': { target: 'http://your-video-server-ip', ws: true // 启用WebSocket代理 } } } ``` - 生产环境:需配置 Nginx 反向代理 3. **自动播放策略**: - 添加 `muted` 属性(`<video muted>`) - Chrome 等浏览器要求静音才能自动播放 --- #### 备选方案:EasyPlayer 若 flv.js 不兼容(如旧版浏览器),可参考 [EasyPlayer](https://www.tsingsee.com/download/EasyPlayer.html) 方案[^1]: ```vue <template> <div ref="playerContainer"></div> </template> <script> export default { mounted() { const script = document.createElement('script'); script.src = 'https://cdn.tsingsee.com/easyplayer/easyplayer.min.js'; script.onload = () => { new EasyPlayer({ container: this.$refs.playerContainer, videoUrl: this.videoUrl, decoder: 'flv.js' // 或 'hls.js' }); }; document.head.appendChild(script); } } </script> ``` --- #### 常见问题解决 1. **无法播放**: - 检查视频流是否为 **FLV over WebSocket** 格式 - 确认服务端支持 WebSocket 协议 - 使用 [VLC 播放器](https://www.videolan.org/) 测试流地址有效性 2. **性能优化**: ```js flvjs.createPlayer({ // ... enableWorker: true, // 启用WebWorker解码 enableStashBuffer: false // 直播流禁用缓存 }) ``` 3. **移动端适配**: ```html <video playsinline webkit-playsinline></video> ``` --- ### 相关问题 1. 如何解决 flv.js 在 iOS 上的兼容性问题? 2. 除了海康威视,flv.js 是否支持其他厂商的 FLV 流媒体协议? 3. 如何实现 FLV 视频流的实时截图功能? [^1]: vue2播放海康.flv格式视频流。参考:https://www.tsingsee.com/download/EasyPlayer.html [^2]: flv.js 开源地址: https://github.com/Bilibili/flv.js/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laravel技术社区

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值