Hls.js

Hls.js 是一個用於播放 HLS (HTTP Live Streaming) 媒體流的 JavaScript 庫。它支援現代瀏覽器，特別是在原生不支援 HLS 的瀏覽器（如 Chrome）中使用，通過將 HLS 視頻轉碼為 MSE（Media Source Extensions）格式進行播放。

testHls(hls, channelName)

描述

testHls 是一個被動監聽方法，主要針對指定頻道（channelName）中的多條串流線路（lines）進行監控，收集播放相關數據（例如：緩衝情況和下載速度）。這些數據將被傳送至數據中心，用於進一步分析，從而協助系統判斷最佳線路，並通過 getResourceUrl 方法取得該頻道中性能最好的線路。

⚠️ 注意事項

1. Hls.js 支援性
   確保 Hls.js 和 Media Source Extensions (MSE) 支援的環境下執行，以正常處理 HLS 串流。

2. 數據中心配置
   確保已經 connect，能夠接收和處理傳送的數據，否則無法使用 getResourceUrl 方法取得最佳線路。

3. 動態切換
   在獲取最佳線路後，應根據播放需求及緩衝情況實現動態切換，以避免播放中斷。

4. 回傳值為空的處理
   當 getResourceUrl 回傳值為空時，請確保已實作預設線路處理機制或提示用戶。

---

語法

testHls(hls, channelName);

參數

名稱	類型	描述
hls	Hls JS Object	必填，Hls.js 的實例化物件，用於處理 HLS 串流。
channelName	String	必填，頻道名稱，用於標記或追蹤當前測試的頻道。

---

功能與用途

1. 線路監控與數據收集

   • 測試和監控指定頻道的多條線路播放狀況。
   • 收集每條線路的緩衝狀態、下載速度和錯誤次數等數據，傳送至數據中心。

2. 動態線路選擇

   • 數據收集完成後，可通過 getResourceUrl 方法獲取當前頻道中性能最好的線路，以便自動切換至最佳線路。

---

使用範例

1. 初始化監控

以下程式碼展示如何使用 testHls 監控指定頻道的播放狀況：

// 引入 Hls.js 並創建實例
import Hls from 'hls.js';
import JBLWebSocket from '@/assets/js/jbl.es.js';
const authorizationKey = ${Product authorization key};

JBLWebSocket.connect(authorizationKey, channelName);

const hls = new Hls();
const channelName = "MovieChannel";

// 將 hls 附加至指定的 video 元素
const videoElement = document.getElementById('video');
hls.attachMedia(videoElement);

// 設定 HLS 流的播放 URL
hls.loadSource('https://example.com/movie_channel/master.m3u8');

// 開始監控該頻道的播放情況
JBLWebSocket.testHls(hls, channelName);

2. 獲取最佳線路 getResourceUrl

當數據中心累積足夠的數據後，開發者可以使用 getResourceUrl 方法取得最佳線路：

const bestLine = JBLWebSocket.getResourceUrl();

if (bestLine) {
    console.log(`最佳線路為：${bestLine}`);
    // 重新設置 HLS 播放 URL
} else {
    console.error("當結果為空時，請自行實作處理機制。");
}

---

監控機制

1. 播放事件監聽

   • 監控 HLS 播放過程中的關鍵事件，例如緩衝開始、緩衝完成、播放錯誤等。

2. 數據上傳

   • 針對每條線路的下載速度、緩衝情況、錯誤次數等數據進行收集，並上傳至數據中心。

3. 最佳線路選擇

   • 數據中心會根據收集到的數據進行分析，計算出性能最好的線路，供 getResourceUrl 方法返回。

---

整體流程

1. 使用 testHls 方法開始監控頻道內的多條線路播放狀況。
2. 數據上傳至數據中心，進行分析與記錄。
3. 當需要更高效的播放性能時，通過 getResourceUrl 方法獲取最佳線路並切換。

透過這個流程，開發者可以實現對 HLS 串流播放的高效監控與動態調整，提升用戶體驗。