1. 概述

本文檔旨在指導如何在 Nginx 服務器上部署私有 Web 播放器（基于 hancplayer），并通過 WebSocket 協(xié)議接入 RTMS 流媒體服務器，實現(xiàn)低延遲視頻實時監(jiān)控。

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 關(guān)鍵配置：添加 WASM MIME 類型支持

?? 重要：瀏覽器加載 .wasm 文件時，要求服務器返回正確的 Content-Type。若未配置，播放器將無法初始化解碼器。

• 編輯 Nginx 配置文件打開全局 MIME 類型配置文件（通常位于 /etc/nginx/mime.types）

  sudo vim /etc/nginx/mime.types

• 添加映射規(guī)則在 types { ... } 代碼塊內(nèi)添加以下行：

  types {
      # ... 其他現(xiàn)有配置 ...
      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/

(請根據(jù)實際 IP 和端口調(diào)整)

4.2 輸入播放地址

在頁面提供的輸入框中，填入 RTMS 服務器生成的 WebSocket 播放地址。

URL 格式模板：

ws://<RTMS服務器IP>:<WS端口>/play.pro?cmd=live&ip=<設(shè)備IP>&port=<設(shè)備端口>&user=<用戶名>&pass=<密碼>&ftype=<廠家類型>&chan=<通道號>&stream=<碼流類型>

測試用例：假設(shè) RTMS 服務器 IP 為 192.168.0.14，攝像頭信息如下：

• 設(shè)備 IP: 192.168.0.222
• 設(shè)備端口: 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 開始播放

• 將上述地址粘貼到網(wǎng)頁輸入框中。
• 點擊 “實時播放” (或?qū)粹o)。
• 若配置正確，視頻畫面將在 1-2 秒內(nèi)加載出來。

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: 視頻黑屏或一直加載中

• 檢查網(wǎng)絡(luò)連通性：確保運行瀏覽器的電腦能 ping 通 RTMS 服務器 (192.168.0.14) 和 Nginx 服務器 (192.168.0.141)。
• 檢查防火墻：確認 RTMS 服務器的 5555 端口和 Nginx 的 8080 端口已在防火墻放行。
• 檢查參數(shù)：確認 URL 中的設(shè)備 IP、賬號密碼、通道號是否正確?？上扔?VLC 測試 RTSP 地址是否可用。

Q3: 瀏覽器控制臺報 CORS (跨域) 錯誤

• 原因：index.html 所在的域名/端口 與 hancplayer.js 或 WS 地址不一致。
• 解決：
  • 盡量讓所有資源（HTML, JS, WASM）托管在同一個 Nginx 站點下（同源）。
  • 如果必須跨域，需在 Nginx 配置中添加 add_header Access-Control-Allow-Origin *;。

總結(jié) 

到此這篇關(guān)于Nginx部署私有Web播放器步驟的文章就介紹到這了,更多相關(guān)Nginx部署私有Web播放器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論