Nginx 部署私有 Web 播放器需上传前端资源文件并配置 WASM MIME 类型。通过 WebSocket 接入 RTMS 流媒体服务器实现低延迟监控。常见故障包括 WASM 编译错误、视频黑屏及跨域问题，可通过检查 Nginx 配置、网络连通性及 CORS 设置解决。
本文档指导如何在 Nginx 服务器上部署私有 Web 播放器（基于 hancplayer），并通过 WebSocket 协议接入 RTMS 流媒体服务器，实现低延迟视频实时监控。
5555)index.html (播放页面)hancplayer.js (播放器主逻辑)hancmedia.js (媒体处理模块)hancmedia.wasm (WebAssembly 解码核心)将以下四个文件上传至 Nginx 的站点根目录（例如 /usr/share/nginx/html 或自定义目录），确保它们处于同级目录：
index.htmlhancplayer.jshancmedia.jshancmedia.wasm⚠️ 重要：浏览器加载 .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
编辑 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，摄像头信息如下：
192.168.0.2228000 (海康默认)admin1234560 (海康)10 (主码流)完整播放地址：
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
Failed to compile WebAssembly 或 Incorrect response MIME type.wasm 后缀，返回了错误的 Content-Type。mime.types 中已添加 application/wasm wasm; 且 Nginx 已重载。hancmedia.wasm 请求，查看 Response Headers 中的 Content-Type 是否为 application/wasm。192.168.0.14) 和 Nginx 服务器 (192.168.0.141)。5555 端口和 Nginx 的 8080 端口已在防火墙放行。index.html 所在的域名/端口 与 hancplayer.js 或 WS 地址不一致。add_header Access-Control-Allow-Origin *;。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online