Skip to content

Flv.js

Flv.js is an HTML5-based JavaScript library designed for playing FLV media streams. It relies on Media Source Extensions (MSE), enabling browsers that do not natively support FLV (e.g., Chrome) to directly play FLV streams.

testFlv(flv, channelName)

Description

testFlv 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 and download speed) and sends it to a data center for analysis. This data helps the system determine the best streaming line, which can later be retrieved using the getResourceUrl method to optimize playback performance.

⚠️ Important Notes

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

  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.

  4. Handling Empty Results
    When getResourceUrl returns no results, ensure you have a fallback mechanism in place, such as using a default line or notifying the user.


Syntax

javascript
testFlv(flv, channelName);

Parameters

NameTypeDescription
flvFlv JS ObjectRequired. An instance of Flv.js to process FLV streams.
channelNameStringRequired. The name of the channel, used to track the current monitoring process.

Features and Use Cases

  1. Stream Monitoring and Data Collection

    • Tests and monitors playback performance of multiple streaming lines within a specific channel.
    • Collects data on buffering, download speed, and error occurrences for each line, sending the data to a centralized data center.
  2. Dynamic Line Selection

    • Once data collection is complete, the getResourceUrl method can be used to retrieve the best-performing streaming line for the channel and switch to it automatically.

Examples

1. Initializing Monitoring

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

javascript
// Import Flv.js and create an instance
import FlvJs from 'flv.js';
import JBLWebSocket from '@/assets/js/jbl.es.js';

const authorizationKey = ${Product authorization key};
const channelName = "MovieChannel";

// Establish a WebSocket connection
JBLWebSocket.connect(authorizationKey, channelName);

// Create a Flv.js instance
if (FlvJs.isSupported()) {
    const flvPlayer = FlvJs.createPlayer({
        type: 'flv',
        url: 'https://example.com/movie_channel/live.flv',
    });

    // Attach the Flv.js player to the video element
    const videoElement = document.getElementById('video');
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();

    // Start monitoring the playback of this channel
    JBLWebSocket.testFlv(flvPlayer, channelName);
} else {
    console.error('Your browser does not support Flv.js!');
}

2. Retrieving the Best Line getResourceUrl

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

javascript
const bestLine = JBLWebSocket.getResourceUrl();

if (bestLine) {
    console.log(`The best streaming line is: ${bestLine}`);
    // Reconfigure the FLV playback URL
} else {
    console.error("No best line found. Please handle this by setting a default line or notifying the user.");
}

Monitoring Mechanism

  1. Playback Event Monitoring

    • Tracks critical events during FLV 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 uploaded data and calculates the best-performing line, which can then be retrieved using the getResourceUrl method.

Overall Process

  1. Use the testFlv 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 effectively monitor FLV stream playback, dynamically adjust streaming lines, and provide users with a seamless viewing experience.