Hls.js travailler avec des documents

Lishuyu 2021-10-13 18:54:42
hls.js hls js travailler avec


Hls.js Travailler avec des documents

Préface

hls.jsC'est unJavaScriptBibliothèque,RéalisableHTTP Live StreamingClient. Elle dépendHTML5Vidéo etMediaSourceExtension pour la lecture.

Il a été réalisé enMPEG-2Flux de transmission etAAC / MP3Flux converti enISO BMFF(MP4)Des fragments pour travailler. Si disponible dans le navigateur,Peut être utiliséWeb WorkerEffectuer cette conversion asynchrone. WWDC2016Annonce de la période,hls.jsIl soutient égalementHLS + fmp4

hls.jsAucun lecteur n'est nécessaire,Il peut être directement dans la normeHTML Exécuter sur l'élément.

hls.jsAvecECMAScript6(* .js)EtTypeScript(* .ts)(ES6Un superensemble fortement typé de)Compilation,Et utiliserTypeScriptLe compilateurECMAScript5Pour compiler.

AvecTSEt pureJS / ES6Les modules écrits peuvent être interdépendants,Vous pouvez également importer l'un de l'autre/Exigences.

Pour construire des paquets de distribution et servir notre environnement de développement,UtiliserWebpack.

githubAdresse:github.com/video-dev/h…

Caractéristiques

  • VOD Et les listes de lecture en direct

    • Sur la liste de lecture en direct DVR Soutien
  • Fragmenté MP4 Conteneur

  • MPEG-2 TS Conteneur

    • ITU-T Propositions H.264 Et ISO/IEC 14496-10 Flux de base
    • ISO/IEC 13818-7 ADTS AAC Flux de base
    • ISO/IEC 11172-3 / ISO/IEC 13818-3(MPEG-1/2 Audio Layer III) Flux de base
    • Métadonnées d'emballage (ID3v2.3.0) Flux de base
  • AAC Conteneur( Flux audio seulement )

  • MPEG Conteneur audio (MPEG-1/2 Audio Layer III Flux audio seulement )

  • HTTP Live Streaming Métadonnées temporelles pour (ID3 Format,MPEG-2 TS Porter)

  • AES-128 Décrypter

  • SAMPLE-AES Décrypter( Uniquement si utilisé MPEG-2 TS Prise en charge des conteneurs )

  • C'est exact. DRM( Gestion des droits numériques ) Extension des médias cryptés pour (EME) Soutien

  • CEA-608/708 Sous - titres

  • WebVTT Sous - titres

  • Pour VoD Et la reproduction des pistes de rechange pour les playlists en direct( Liste de lecture principale avec audio alternatif )

  • Streaming adaptatif

    • Basculement manuel et automatique de la qualité

      • 3 Mode de commutation de qualité disponible (Peut passerAPI Mode de contrôle )

        • Commutation instantanée (Changement de qualité instantané à l'emplacement vidéo actuel)
        • Basculer en douceur (Changement de qualité pour le prochain clip de chargement)
        • Commutation conservatrice de la bande passante (Changement de qualité pour le prochain clip de chargement, Ne pas rafraîchir Le tampon )
      • En mode qualité automatique ,Arrêt d'urgence en cas de chute soudaine de la bande passante pour minimiser le tampon.

  • VoD & Live Recherche précise sur ( Pas limité aux limites des clips ou des images clés )

  • Possibilité de trouver des tampons et des tampons d'arrière - plan sans avoir à télécharger de nouveau des segments

  • Analyse intégrée

    • Tous les événements internes peuvent être surveillés (Événements du réseau、 Événements vidéo )
    • Les paramètres de la session de lecture sont également accessibles au public
  • Tolérance aux défauts

    • Mécanisme de retry intégré dans la bibliothèque
    • Une opération de récupération peut être déclenchée pour corriger une erreur fatale du média ou du réseau
  • Redondance/ Liste de lecture FAILOVER

Soutien M3U8 Étiquettes

Concernant HLS Détails sur le format et la signification de ces étiquettes,Voirtools.ietf.org/html/draft-…

Étiquette de la Liste

  • #EXT-X-STREAM-INF:<attribute-list> <URI>
  • #EXT-X-MEDIA:<attribute-list>
  • #EXT-X-SESSION-DATA:<attribute-list>

Les attributs suivants ont été ajoutés à la liste des attributs de leurs variantes respectives,Mais non implémenté dans sa sélection et sa lecture.

  • VIDEO-RANGEEtHDCP-LEVEL(Voir#2489

Étiquette de la liste de lecture

  • #EXTM3U
  • #EXT-X-VERSION=<n>
  • #EXTINF:<duration>,[<title>]
  • #EXT-X-ENDLIST
  • #EXT-X-MEDIA-SEQUENCE=<n>
  • #EXT-X-TARGETDURATION=<n>
  • #EXT-X-DISCONTINUITY
  • #EXT-X-DISCONTINUITY-SEQUENCE=<n>
  • #EXT-X-BYTERANGE=<n>[@<o>]
  • #EXT-X-MAP:<attribute-list>
  • #EXT-X-KEY:<attribute-list>METHOD=SAMPLE-AESPrise en charge uniquement MPEG-2 TS Paragraphes)
  • #EXT-X-PROGRAM-DATE-TIME:<attribute-list>
  • #EXT-X-START:TIME-OFFSET=<n>
  • #EXT-X-SERVER-CONTROL:<attribute-list>
  • #EXT-X-PART-INF:PART-TARGET=<n>
  • #EXT-X-PART:<attribute-list>
  • #EXT-X-PRELOAD-HINT:<attribute-list>
  • #EXT-X-SKIP:<attribute-list>
  • #EXT-X-RENDITION-REPORT:<attribute-list>

Les étiquettes suivantes sont ajoutées à la liste des attributs de chaque clip,Mais pas en streaming et en lecture.

  • #EXT-X-DATERANGE:<attribute-list>( Non ajouté aux métadonnées TextTracks.Voir#2218
  • #EXT-X-BITRATE ( Non utilisé ABR Controller)
  • #EXT-X-GAP(Non réalisé.Voir#2940

Non pris en charge

Liste complète des questions ,Voir“ Publier les plans et les tâches ” Dans l'onglet projet “Priorité absolue”.Le support du codec dépend de l'environnement d'exécution(Par exemple,Tous les navigateurs du même système d'exploitation ne supportent pas HEVC).

  • CMAF CC Soutien#2623
  • Emsg“Métadonnées”TextTracks Moyenne FMP4(Emsgv1 Dans ID3) Métadonnées temporelles intégrées pour #2360
  • #EXT-X-DATERANGEIn“Métadonnées”TextTracks #2218
  • #EXT-X-GAPRemplissage#2940
  • #EXT-X-I-FRAME-STREAM-INF I Fichier de liste de lecture des médias de cadre
  • SAMPLE-AES Avec fmp4、aac、mp3、vtt... Fragment(Seulement MPEG-2 TS)
  • PlayReady Et FairPlay DRM(Voir#3779EtMarqué comme DRM La question de
  • Sélection de variantes avancées basées sur la fonctionnalité des médias d'exécution( Voir marqué comme La question demedia-capabilities
  • Windows 10 Oui. IE Et Edge (<=18) Dans MP3 Flux audio de base (Voir#1641EtMicrosoft Répondre au Forum

Rendu côté serveur (SSR) EtrequireDe Node.js Exécution

Vous pouvez le faire en toute sécurité Node Utiliser cette bibliothèque , Il ne se passera rien. . Exporter un objet virtuel , Afin que la bibliothèque ne lance pas d'erreurs .HLS.js In Node.js Non instanciable en .Pour plus de détails,Voir#1841.

Dépendance

1.node.js
2.npm
3.git
4.webpack
5.webpack-cli
Copier le Code

demoProjets

Tirez d'abord.github Code du projet dans , Et installez les dépendances requises ( Exemple de projet requis vpn Pour lire un flux vidéo )

git clone https://github.com/video-dev/hls.js.git
cd hls.js
# Assurez - vous d'installer et de mettre à jour les dépendances une fois le retrait du Code terminé
npm install ci
# Fonctionne dans un environnement de développement demoPage(Avecfile-watch Recompiler le projet , Mais pas généré distSac), Essayez d'utiliser si l'exécution échoue npm installRésoudre les erreurs signalées
npm run dev
# En cas de modification sanity-check Soumettre après vérification des modifications
npm run sanity-check
Copier le Code

Utiliser

Première étape: Configuration et support

Inclure d'abord dans votre page Web https://cdn.jsdelivr.net/npm/hls.js@latest( Ou non /hls.jsRéduction).

<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
Copier le Code

Appelez la méthode statique suivante :Hls.isSupported() Vérifiez si votre navigateur prend en charge MediaSource Extensions.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
 if (Hls.isSupported()) {
   console.log('hello hls.js!');
}
</script>
Copier le Code

Deuxième étape:InstanciationHls Objet et lien vers <video>Élément

Allons - y.

  • Créer un<video>Élément
  • Créer un nouveau HLS Objet
  • Lier les éléments vidéo à ceci HLS Objet
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
​
<video id="video"></video>
<script>
 if (Hls.isSupported()) {
   var video = document.getElementById('video');
   var hls = new Hls();
   // bind them together
   hls.attachMedia(video);
   // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
     console.log('video and hls.js are now bound together !');
  });
}
</script>
Copier le Code

Troisième étape: Liste de chargement

Vous devez fournir la liste suivante: URL:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
​
<video id="video"></video>
<script>
 if (Hls.isSupported()) {
   var video = document.getElementById('video');
   var hls = new Hls();
   // bind them together
   hls.attachMedia(video);
   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
     console.log('video and hls.js are now bound together !');
     hls.loadSource('http://my.streamURL.com/playlist.m3u8');
     hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
       console.log(
         'manifest loaded, found ' + data.levels.length + ' quality level'
      );
    });
  });
}
</script>
Copier le Code

Quatrième étape:Adoption<video> Contrôle des éléments

La vidéo passe par HTML<video> Élément contrôlé .

HTMLVideoElement Les contrôles et les événements peuvent être utilisés de façon transparente .

video.play();
Copier le Code

Étape 5:Gestion des erreurs

Toutes les erreurs sont signalées par un seul événement.

Chaque erreur est classée comme suit: :

  • Son type:

    • Hls.ErrorTypes.NETWORK_ERROR Pour les erreurs liées au réseau
    • Hls.ErrorTypes.MEDIA_ERROR Médias/ Erreurs liées à la vidéo
    • Hls.ErrorTypes.OTHER_ERROR Pour toutes les autres erreurs
  • Ses détails :

  • Son taux de mortalité :

    • false Si l'erreur n'est pas fatale ,hls.js Va essayer de le récupérer
    • true Si l'erreur est fatale , Des mesures sont nécessaires (Essayez.) Reprenez - le. .

Description détaillée complète Comme suit

Voir l'exemple de code ci - dessous pour écouter les erreurs:

hls.on(Hls.Events.ERROR, function (event, data) {
 var errorType = data.type;
 var errorDetails = data.details;
 var errorFatal = data.fatal;
​
 switch (data.details) {
   case Hls.ErrorDetails.FRAG_LOAD_ERROR:
     // ....
     break;
   default:
     break;
}
});
Copier le Code

Récupération des erreurs fatales

hls.js Fournit les informations suivantes: 2 Une façon de“Essayez.”Comment récupérer les erreurs fatales du réseau et des médias:

hls.startLoad()

Doit être appelé pour récupérer les erreurs réseau .

hls.recoverMediaError()

Doit être appelé pour récupérer les erreurs des médias .

Exemple de code de récupération des erreurs
hls.on(Hls.Events.ERROR, function (event, data) {
 if (data.fatal) {
   switch (data.type) {
     case Hls.ErrorTypes.NETWORK_ERROR:
       // try to recover network error
       console.log('fatal network error encountered, try to recover');
       hls.startLoad();
       break;
     case Hls.ErrorTypes.MEDIA_ERROR:
       console.log('fatal media error encountered, try to recover');
       hls.recoverMediaError();
       break;
     default:
       // cannot recover
       hls.destroy();
       break;
  }
}
});
Copier le Code
hls.swapAudioCodec()

Si une erreur média est encore lancée après l'appelhls.recoverMediaError(),Appeler cette méthode peut aider à résoudre les problèmes d'inadéquation des codecs audio. Le flux de travail devrait être :

À propos de First Media Error :Appelez hls.recoverMediaError()

Si après la première erreur média “Rapide” Lancer une autre erreur média :Appelez d'abordhls.swapAudioCodec(),Puis appelezhls.recoverMediaError().

Dernière étape:Destruction, Basculer entre les flux

hls.destroy() Doit être appelé à libérer les ressources utilisées et à détruire hls Contexte.

npm Méthode de résolution des erreurs dans le processus d'installation

request to registry.cnpmjs.org/webpack-cli failed, reason: Hostname/IP does not match certificate's altnames: Host: registry.cnpmjs.org. is not in the cert's altnames: DNS:r.cnpmjs.org

npm config set strict-ssl false
Copier le Code

In most cases you are behind a proxy or have bad network settings.

Solutions:
1. Mise en œuvre:
npm config get proxy
npm config get https-proxy
Si la valeur de retour n'est pasnull,Poursuivre la mise en œuvre:
(Cette étape est importante,Assurez - vous que la valeur de retour des deux commandes estnull,En fait...,Les deux valeurs de retour ne sont pasnullDe)
npm config set proxy null
npm config set https-proxy null
2. Mise en œuvre:
npm config set registry http://registry.cnpmjs.org/
3. Installationcnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copier le Code
版权声明
本文为[Lishuyu]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013185047308h.html

  1. 前端开发框架Vue中Vuex的使用原理分享
  2. vue-echarts初次体验
  3. 分享一些web前端开发好用的网站
  4. 每天读一点webpack-003
  5. react之组件生命周期
  6. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  7. SpringBoot Java后端实现okhttp3超时设置
  8. react之組件生命周期
  9. Cycle de vie des composants de React
  10. 使用Reactor将阻塞调用变为异步非阻塞
  11. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  12. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  13. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  14. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  15. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  16. 如何解决“Serverless”系统的冷启动问题
  17. BootstrapBlazor 模板安装
  18. BootstrapBlazor 模板安装
  19. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  20. 使用ESLint+Prettier来统一前端代码风格
  21. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  22. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  23. 使用elementui在完成项目中遇到的未知知识点2
  24. On the mechanism of webpack loader
  25. 云原生体系下 Serverless 弹性探索与实践
  26. vue开发技巧
  27. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  28. 致敬!再见了!LayUI !
  29. Vue安装和卸载
  30. Implement a flipped character with the transform attribute of CSS
  31. 你的第一个 Docker + React + Express 全栈应用
  32. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  33. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  34. 前端技巧-JS元编程ES6 symbol公开符号
  35. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  36. 前端推荐!10分钟带你了解Konva运行原理
  37. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  38. 零基础学习Web前端需要注意什么呢?
  39. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  40. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  41. JavaScript数组 几个常用方法
  42. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?
  43. 暢談this的四種綁定方式
  44. 2021最新Vue面试必胜宝典,大厂面试题解析!
  45. Quatre façons de lier ceci
  46. Préparation au développement de l'extension tagdown
  47. Intervieweur: Parlez - moi des flotteurs CSS
  48. Packaging the View Component Library with rollup
  49. Comment un composant enfant modifie les valeurs passées par le composant parent
  50. Résumé de l'API Express
  51. Optimisation de la structure du Code if else dans le projet
  52. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  53. 新手学前端的方法是什么 自学前端该怎么规划
  54. 云原生体系下 Serverless 弹性探索与实践
  55. 如何全方位打造安全高效的HTTPS站点(一)
  56. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  57. 从理念到LRU算法实现,起底未来React异步开发方式
  58. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  59. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  60. 云原生体系下 Serverless 弹性探索与实践