Lire RTMP/FLV en ligne sans plugin avec FLV.js

Présentation de FLV.js

FLV.js est un lecteur FLV implémenté en pur JavaScript, open source par Bilibili (site B). Il permet de lire des flux vidéo FLV dans les navigateurs modernes prenant en charge MSE (Media Source Extensions), sans utiliser de plugin Flash. Son apparition a résolu le problème de la lecture de flux en direct FLV côté web après le retrait de Flash.

À l'époque de Flash, RTMP/FLV était la solution principale pour la diffusion en direct. Mais avec le retrait de Flash par les principaux navigateurs, la diffusion en direct côté web a dû se transformer. FLV.js a permis à la solution de diffusion basée sur HTTP-FLV de se poursuivre, et combinée à la distribution HTTP des CDN, elle peut offrir une expérience de diffusion en direct à faible latence et haute concurrence.

Caractéristiques principales de FLV.js

• Implémentation pur JavaScript : Aucun plugin requis, fonctionne purement côté navigateur
• Faible latence : La latence de la solution HTTP-FLV peut descendre jusqu'à 1-3 secondes
• Haute performance : Utilise Web Worker pour analyser les données, ne bloque pas le thread principal
• Bonne compatibilité : Prend en charge tous les navigateurs modernes avec MSE
• Fonctionnalités riches : Prend en charge la diffusion en direct, la vidéo à la demande, l'enregistrement en direct, la commutation de flux en temps réel, etc.
• Open source et gratuit : Open source sous licence MIT, utilisation libre

Contexte de l'open source par Bilibili

Le projet FLV.js est né de l'équipe front-end de Bilibili, initialement pour résoudre les problèmes de lecteur de l'activité de diffusion en direct du site B. En 2016, avec le déclin de Flash, Bilibili avait besoin d'une solution de lecture de diffusion en direct purement web, et a donc lancé ce projet.

FLV.js a été officiellement open source en 2016, et est rapidement devenu un projet de référence dans le domaine de la diffusion en direct front-end, adopté par de nombreuses plateformes de diffusion et sites vidéo. Son succès a favorisé la popularisation de la solution de diffusion HTTP-FLV, et a également donné naissance à d'autres projets de lecteur basés sur MSE.

Principe de fonctionnement

Le principe de fonctionnement central de FLV.js est le suivant : récupérer les données du flux FLV via une requête HTTP, analyser le format d'encapsulation FLV avec JavaScript côté navigateur, puis alimenter les données audio/vidéo via l'API MSE à la balise vidéo native du navigateur pour décodage et lecture.

Architecture globale

1. Couche E/S : Responsable de la transmission des données, prend en charge Fetch API, XHR, WebSocket, etc.
2. Couche d'analyse : Analyse les données FLV dans un Web Worker, extrait les trames audio/vidéo
3. Couche tampon : Gère la mémoire tampon vidéo pour assurer une lecture fluide
4. Couche de contrôle : Gère la logique de contrôle comme lecture, pause, saut
5. Couche MSE : Alimente les données analysées dans Media Source Extensions

Processus d'analyse FLV

Le processus d'analyse d'un fichier FLV par FLV.js est le suivant :

• Lire le FLV Header, confirmer le type de fichier et s'il contient de l'audio/vidéo
• Analyser le Script Tag, obtenir les métadonnées vidéo (résolution, débit, etc.)
• Analyser le Video Tag, extraire les données vidéo H.264
• Analyser l'Audio Tag, extraire les données audio AAC/MP3
• Encapsuler les données audio/vidéo au format FMP4, les lire via MSE

Différence entre flv.js et mpegts.js

Beaucoup de gens confondent flv.js et mpegts.js, mais ce sont en fait deux projets différents développés par le même auteur :

Caractéristique	flv.js	mpegts.js
Développeur	Bilibili	Auteur original de flv.js (indépendant)
Formats pris en charge	FLV	FLV, MPEG-TS
État des mises à jour	Lent	Actif
Fonctionnalités	Fonctionnalités de base	Plus de nouvelles fonctionnalités
Scénarios recommandés	Seulement besoin de lecture FLV	Besoin de plus de formats et fonctionnalités

Exemple de code d'utilisation de base

Voici un exemple complet démontrant comment utiliser FLV.js pour lire un flux vidéo FLV dans une page web.

Intégrer FLV.js

La méthode la plus simple est l'intégration via CDN :

<script src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>

Vous pouvez également l'installer via npm :

npm install flv.js --save

Structure HTML

Ajoutez un élément vidéo dans la page :

<video id="videoElement" controls autoplay muted playsinline></video>

Initialisation JavaScript

Utilisez FLV.js pour créer une instance de lecteur et charger le flux vidéo :

if (flvjs.isSupported()) {
    const videoElement = document.getElementById('videoElement');
    const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'https://example.com/live/stream.flv',
        isLive: true
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}

Description des paramètres de configuration

• type : Type de média, 'flv' ou 'mp4'
• url : Adresse du flux vidéo
• isLive : S'il s'agit d'un flux en direct
• cors : Activer ou non le CORS cross-domaine
• withCredentials : Transmettre ou non les cookies
• hasAudio : Contient ou non de l'audio
• hasVideo : Contient ou non de la vidéo

Optimisation de faible latence

Dans les scénarios de diffusion en direct, la latence est un indicateur très important. FLV.js propose plusieurs options de configuration pour optimiser la latence.

Paramètres de configuration clés

const flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'https://example.com/live/stream.flv',
    isLive: true
}, {
    enableWorker: true,
    enableStashBuffer: false,
    stashInitialSize: 128,
    liveBufferLatencyChasing: true,
    liveBufferLatencyMaxLatency: 1.5,
    liveBufferLatencyMinRemain: 0.5,
    autoCleanupSourceBuffer: true
});

Description de la configuration de faible latence

• enableWorker: true : Activer Web Worker, éviter que l'analyse ne bloque le thread principal
• enableStashBuffer: false : Désactiver le tampon de cache, réduire la latence
• stashInitialSize: 128 : Taille initiale du cache (KB), définir une valeur faible
• liveBufferLatencyChasing: true : Activer la poursuite de la latence en direct
• liveBufferLatencyMaxLatency: 1.5 : Latence maximale 1,5 seconde, accélération si dépassée
• liveBufferLatencyMinRemain: 0.5 : Tampon minimal 0,5 seconde
• autoCleanupSourceBuffer: true : Nettoyer automatiquement le tampon, éviter la croissance de la mémoire

Autres suggestions d'optimisation

• Utiliser des connexions persistantes HTTP/1.1 : Réduire le coût de la poignée de main
• Définir raisonnablement la longueur GOP : Définir un GOP de 1-2 secondes côté diffusion
• Utiliser MPEG-TS sur WebSocket : WebSocket a une latence plus faible
• Optimisation CDN : Choisir un CDN prenant en charge la diffusion en direct à faible latence
• Optimisation des paramètres de codage : Utiliser le profil baseline, réduire la latence de codage

Écoute d'événements

FLV.js propose un système d'événements riche, permettant d'écouter divers changements d'état.

Événements courants

flvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail, errorInfo) {
    console.log('Erreur:', errorType, errorDetail, errorInfo);
});

flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {
    console.log('Chargement terminé');
});

flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, function() {
    console.log('Récupéré après une fin inattendue');
});

flvPlayer.on(flvjs.Events.MEDIA_INFO, function(mediaInfo) {
    console.log('Infos média:', mediaInfo);
});

flvPlayer.on(flvjs.Events.STATISTICS_INFO, function(statInfo) {
    console.log('Infos statistiques:', statInfo);
});

Description des types d'événements

• ERROR : Déclenché en cas d'erreur
• LOADING_COMPLETE : Déclenché lorsque le chargement des données est terminé (VOD)
• RECOVERED_EARLY_EOF : Reconnexion après déconnexion inattendue du flux en direct
• MEDIA_INFO : Obtention des métadonnées média
• STATISTICS_INFO : Informations statistiques de lecture (mises à jour chaque seconde)
• BUFFER_EMPTY : Tampon vide, risque de saccades
• BUFFER_FULL : Tampon plein

Gestion des erreurs

Une gestion des erreurs complète est une fonctionnalité indispensable pour un environnement de production. Les erreurs de FLV.js sont classées en différents types, nécessitant un traitement ciblé.

Types d'erreurs

• NETWORK_ERROR : Erreur réseau, comme échec de connexion, délai d'attente dépassé, etc.
• MEDIA_ERROR : Erreur média, comme échec de décodage, format non pris en charge, etc.
• OTHER_ERROR : Autres erreurs

Exemple complet de gestion des erreurs

flvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail, errorInfo) {
    console.error('Erreur du lecteur:', errorType, errorDetail);

    if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {
        if (errorDetail === flvjs.ErrorDetails.NETWORK_STATUS_CODE_INVALID) {
            console.log('Erreur de code d'état HTTP, lien peut-être invalide');
        } else if (errorDetail === flvjs.ErrorDetails.NETWORK_TIMEOUT) {
            console.log('Délai réseau dépassé, tentative de reconnexion...');
            retryPlay();
        }
    } else if (errorType === flvjs.ErrorTypes.MEDIA_ERROR) {
        console.log('Erreur média, tentative de récupération...');
        flvPlayer.recoverMediaError();
    }
});

function retryPlay() {
    flvPlayer.unload();
    flvPlayer.load();
    flvPlayer.play();
}

Mécanisme de reconnexion automatique

Pour les scénarios de diffusion en direct, les interruptions de flux dues aux fluctuations du réseau sont courantes. Il est recommandé d'implémenter un mécanisme de reconnexion automatique :

let retryCount = 0;
const maxRetry = 5;

flvPlayer.on(flvjs.Events.ERROR, function(errorType) {
    if (errorType === flvjs.ErrorTypes.NETWORK_ERROR && retryCount < maxRetry) {
        retryCount++;
        setTimeout(function() {
            flvPlayer.unload();
            flvPlayer.load();
            flvPlayer.play();
        }, 2000 * retryCount);
    }
});

flvPlayer.on(flvjs.Events.RECOVERED_EARLY_EOF, function() {
    retryCount = 0;
});

Bonnes pratiques

1. Vérification de la compatibilité du navigateur

Vérifiez d'abord si le navigateur est pris en charge avant l'initialisation, et affichez un message convivial si ce n'est pas le cas :

if (flvjs.isSupported()) {
    initPlayer();
} else {
    alert('Votre navigateur ne prend pas en charge la lecture FLV. Veuillez utiliser Chrome, Firefox ou Edge.');
}

2. Moment approprié pour la destruction

Lors du déchargement de la page ou du changement de vidéo, assurez-vous de détruire le lecteur pour libérer les ressources :

window.addEventListener('beforeunload', function() {
    if (flvPlayer) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
    }
});

3. Gestion du cross-domaine CORS

Assurez-vous que le serveur vidéo est configuré avec les en-têtes CORS corrects, sinon FLV.js ne pourra pas se charger. Les en-têtes de réponse nécessaires incluent :

• Access-Control-Allow-Origin: * (ou domaine spécifié)
• Access-Control-Allow-Methods: GET, POST, OPTIONS
• Access-Control-Expose-Headers: Content-Length

4. Traitement après la mise en pause d'un direct

Après avoir mis en pause puis repris un flux en direct, la lecture continue à partir de la position de pause, ce qui entraîne une accumulation de latence. Il est recommandé de sauter à la position la plus récente lors de la reprise :

videoElement.addEventListener('play', function() {
    if (flvPlayer && flvPlayer.config.isLive) {
        const livePosition = videoElement.buffered.end(0) - 1;
        if (videoElement.currentTime < livePosition - 3) {
            videoElement.currentTime = livePosition;
        }
    }
});

Conclusion

FLV.js est un excellent lecteur FLV open source, offrant une solution haute performance et faible latence pour la diffusion en direct côté web. Son implémentation en pur JavaScript ne nécessite aucun plugin, et associé au protocole HTTP-FLV, il permet d'atteindre une expérience de faible latence proche de l'époque Flash.

Pour les utilisateurs qui souhaitent expérimenter rapidement la lecture FLV, vous pouvez utiliser directement notre Lecteur FLV/RTMP en ligne. Collez simplement l'adresse du flux pour le regarder dans le navigateur, sans écrire aucune ligne de code.