Nginx部署私有Web播放器完整步骤指南

1. 概述

本文档旨在指导如何在 Nginx 服务器上部署私有 Web 播放器（基于 hancplayer），并通过 WebSocket 协议接入 RTMS 流媒体服务器，实现低延迟视频实时监控。

2. 前置准备

• Web 服务器：Nginx (已安装并运行)
• 流媒体服务：RTMS 服务器 (已运行，端口 5555)
• 前端文件：
  • index.html (播放页面)
  • hancplayer.js (播放器主逻辑)
  • hancmedia.js (媒体处理模块)
  • hancmedia.wasm (WebAssembly 解码核心)

3. 部署步骤

3.1 文件上传

将以下四个文件上传至 Nginx 的站点根目录（例如 /usr/share/nginx/html 或自定义目录），确保它们处于同级目录：

• index.html
• hancplayer.js
• hancmedia.js
• hancmedia.wasm

3.2 关键配置：添加 WASM MIME 类型支持

⚠️ 重要：浏览器加载 .wasm 文件时，要求服务器返回正确的 Content-Type。若未配置，播放器将无法初始化解码器。

• 编辑 Nginx 配置文件打开全局 MIME 类型配置文件（通常位于 /etc/nginx/mime.types）

  sudo vim /etc/nginx/mime.types

• 添加映射规则在 types { ... } 代码块内添加以下行：

  types {    # ... 其他现有配置 ...    application/wasm    wasm;}

• 验证并重载 Nginx

  # 检查配置语法sudo nginx -t# 重载配置使生效sudo nginx -s reload

3.3 修改 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，但需确保所有资源都在同一域下以避免跨域问题)

4. 播放测试

4.1 访问播放页面

在浏览器中访问部署好的 Nginx 地址：

http://192.168.0.141:8080/

(请根据实际 IP 和端口调整)

4.2 输入播放地址

在页面提供的输入框中，填入 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

4.3 开始播放

• 将上述地址粘贴到网页输入框中。
• 点击 “实时播放” (或对应按钮)。
• 若配置正确，视频画面将在 1-2 秒内加载出来。

5. 常见问题排查 (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 *;。

总结