Hls.js

Hls.js is a JavaScript library for playing HLS (HTTP Live Streaming) media streams. It supports modern browsers and enables HLS playback in browsers that do not natively support it (e.g., Chrome) by transcoding HLS streams into an MSE (Media Source Extensions) format.

testHls(hls, channelName)

Description

testHls is a passive monitoring method designed to monitor multiple streaming lines (lines) within a specified channel (channelName). It collects playback-related data (e.g., buffering status, download speed) and sends it to a data center for further analysis. This helps the system determine the best streaming line, which can be retrieved using the getResourceUrl method to optimize playback performance.

⚠️ Important Notes

1. Hls.js Compatibility
   Ensure that Hls.js and Media Source Extensions (MSE) are supported in the execution environment to properly handle HLS streams.

2. Data Center Configuration
   Make sure the data center is correctly configured to receive and process the collected data. Otherwise, the getResourceUrl method will not be able to retrieve the best-performing line.

3. Dynamic Switching
   After retrieving the best-performing line, implement logic to dynamically switch streaming lines based on playback needs and buffering status to avoid interruptions.

---

Syntax

testHls(hls, channelName);

Parameters

Name	Type	Description
hls	Hls JS Object	Required. An instance of Hls.js used to process HLS streams.
channelName	String	Required. The name of the channel, used to track the current monitoring process.

---

Features and Use Cases

1. Line Monitoring and Data Collection

   • Tests and monitors the playback performance of multiple streaming lines within a specified channel.
   • Collects data on buffering status, download speed, and error occurrences for each line, and sends the data to a centralized data center.

2. Dynamic Line Selection

   • After data collection, the getResourceUrl method can be used to retrieve the best-performing line for the channel, allowing for automatic switching to the optimal line.

---

Examples

1. Initializing Monitoring

The following code demonstrates how to use testHls to monitor the playback performance of a specified channel:

// Import Hls.js and create an instance
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";

// Attach Hls.js to a video element
const videoElement = document.getElementById('video');
hls.attachMedia(videoElement);

// Set the HLS stream's playback URL
hls.loadSource('https://example.com/movie_channel/master.m3u8');

// Start monitoring the channel's playback
JBLWebSocket.testHls(hls, channelName);

2. Retrieving the Best Line getResourceUrl

Once the data center has accumulated enough data, developers can use the getResourceUrl method to retrieve the best-performing line:

const bestLine = JBLWebSocket.getResourceUrl();

if (bestLine) {
    console.log(`The best streaming line is: ${bestLine}`);
    // Reconfigure the HLS playback URL
} else {
    console.error("When the result is empty, please implement a fallback mechanism.");
}

---

Monitoring Mechanism

1. Playback Event Monitoring

   • Tracks critical events during HLS playback, such as buffering start, buffering completion, and playback errors.

2. Data Upload

   • Collects data for each streaming line, such as download speed, buffering status, and error occurrences, and uploads it to the data center.

3. Best Line Selection

   • The data center analyzes the collected data and calculates the best-performing line, which can be retrieved using the getResourceUrl method.

---

Overall Process

1. Use the testHls method to monitor the playback performance of multiple streaming lines within a channel.
2. Upload collected data to the data center for analysis and logging.
3. Retrieve the best-performing line using the getResourceUrl method and switch to it for improved playback performance.

By following this process, developers can efficiently monitor HLS stream playback, dynamically adjust streaming lines, and provide users with a seamless viewing experience.