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 *;。

总结 

到此这篇关于Nginx部署私有Web播放器步骤的文章就介绍到这了,更多相关Nginx部署私有Web播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！