概述
本文档指导如何在 Nginx 服务器上部署私有 Web 播放器（基于 hancplayer），并通过 WebSocket 协议接入 RTMS 流媒体服务器，实现低延迟视频实时监控。
前置准备
- Web 服务器：Nginx (已安装并运行)
- 流媒体服务：RTMS 服务器 (已运行，端口
5555) - 前端文件：
index.html(播放页面)hancplayer.js(播放器主逻辑)hancmedia.js(媒体处理模块)hancmedia.wasm(WebAssembly 解码核心)
部署步骤
文件上传
将以下四个文件上传至 Nginx 的站点根目录（例如 /usr/share/nginx/html 或自定义目录），确保它们处于同级目录：
index.htmlhancplayer.jshancmedia.jshancmedia.wasm
关键配置：添加 WASM MIME 类型支持
⚠️ 重要：浏览器加载 .wasm 文件时，要求服务器返回正确的 Content-Type。若未配置，播放器将无法初始化解码器。
验证并重载 Nginx
# 检查配置语法
sudo nginx -t
# 重载配置使生效
sudo nginx -s reload
添加映射规则
在 types { ... } 代码块内添加以下行：
types {
# ... 其他现有配置 ...
application/wasm wasm;
}
编辑 Nginx 配置文件
打开全局 MIME 类型配置文件（通常位于 /etc/nginx/mime.types）：
sudo vim /etc/nginx/mime.types
修改 HTML 引用路径
编辑 index.html 文件，将播放器脚本的引用地址指向您的 Nginx 服务器地址。
修改前：
<script src="./hancplayer.js"></script>
修改后（示例）：
<!-- 将 IP 和端口替换为您实际的 Nginx 地址 -->
<script src="http://192.168.0.141:8080/hancplayer.js"></script>
(注：如果 index.html 也托管在同一 Nginx 下，也可以直接使用相对路径 ./hancplayer.js，但需确保所有资源都在同一域下以避免跨域问题)
播放测试
访问播放页面
在浏览器中访问部署好的 Nginx 地址：
http://192.168.0.141:8080/
(请根据实际 IP 和端口调整)
输入播放地址
在页面提供的输入框中，填入 RTMS 服务器生成的 WebSocket 播放地址。
URL 格式模板：
ws://<RTMS 服务器 IP>:<WS 端口>/play.pro?cmd=live&ip=<设备 IP>&port=<设备端口>&user=<用户名>&pass=<密码>&ftype=<厂家类型>&chan=<通道号>&stream=<码流类型>
测试用例：
假设 RTMS 服务器 IP 为 192.168.0.14，摄像头信息如下：
- 设备 IP:
192.168.0.222 - 设备端口:
8000(海康默认) - 用户名:
admin - 密码:
123456 - 厂家类型:
0(海康) - 通道号:
1 - 码流:
0(主码流)
完整播放地址：
ws://192.168.0.14:5555/play.pro?cmd=live&ip=192.168.0.222&port=8000&user=admin&pass=123456&ftype=0&chan=1&stream=0
开始播放
- 将上述地址粘贴到网页输入框中。
- 点击 '实时播放' (或对应按钮)。
- 若配置正确，视频画面将在 1-2 秒内加载出来。
常见问题排查 (FAQ)
Q1: 控制台报错 Failed to compile WebAssembly 或 Incorrect response MIME type
- 原因：Nginx 未识别
.wasm后缀，返回了错误的 Content-Type。 - 解决：请严格检查 步骤 3.2，确认
mime.types中已添加application/wasm wasm;且 Nginx 已重载。 - 验证方法：在浏览器 F12 -> Network 标签页，点击
hancmedia.wasm请求，查看 Response Headers 中的Content-Type是否为application/wasm。
Q2: 视频黑屏或一直加载中
- 检查网络连通性：确保运行浏览器的电脑能 ping 通 RTMS 服务器 (
192.168.0.14) 和 Nginx 服务器 (192.168.0.141)。 - 检查防火墙：确认 RTMS 服务器的
5555端口和 Nginx 的8080端口已在防火墙放行。 - 检查参数：确认 URL 中的设备 IP、账号密码、通道号是否正确。可先用 VLC 测试 RTSP 地址是否可用。
Q3: 浏览器控制台报 CORS (跨域) 错误
- 原因：
index.html所在的域名/端口 与hancplayer.js或 WS 地址不一致。 - 解决：
- 尽量让所有资源（HTML, JS, WASM）托管在同一个 Nginx 站点下（同源）。
- 如果必须跨域，需在 Nginx 配置中添加
add_header Access-Control-Allow-Origin *;。