ApsaraVideo Live:Diffusion en direct sur une page web

Prérequis

• ApsaraVideo Live est activé. Pour plus d'informations, consultez la rubrique Prise en main d'ApsaraVideo Live.

• Le domaine d'ingestion et le domaine de diffusion utilisés pour la diffusion en direct sont configurés. Pour plus d'informations, consultez les rubriques Étape 1 : Ajouter des domaines d'ingestion et de diffusion, Étape 2 : Ajouter un enregistrement CNAME pour activer l'accélération et Étape 3 : Associer les domaines d'ingestion et de diffusion.

Étape 1 : Générer une URL d'ingestion et une URL de diffusion

Utilisez l'URL d'ingestion pour pousser les flux en direct et l'URL de diffusion pour les extraire en vue de leur lecture. Pour plus d'informations, consultez la rubrique Générer des URL d'ingestion et de diffusion.

Sur la page du générateur d'URL, configurez le streaming domain, le ingest domain associé (l'authentification utilise par défaut le Mode A ; l'URL est valide pendant 30 minutes), l'AppName, le StreamName et le transcoding template. Cliquez sur Generate pour créer les URL d'ingestion et de diffusion.

Étape 2 : Ingérer des flux en direct

L'ingestion de flux permet d'acheminer l'audio et la vidéo capturés vers un centre ApsaraVideo Live. L'exemple suivant utilise OBS Studio pour ingérer un flux.

1. Téléchargez OBS Studio depuis le Site officiel et installez-le.

2. Démarrez OBS Studio.

3. Dans la barre de menus, choisissez File > Settings.

4. Sur la page Settings, cliquez sur Stream et configurez les paramètres suivants :

   Parameter	Description
   Service	Sélectionnez Custom.
   Server	Saisissez l'URL d'ingestion authentifiée générée. Exemple : rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************.
   Stream Key	Laissez le champ Stream Key vide.

5. Dans la fenêtre principale d'OBS Studio, ajoutez une source dans la section Sources, puis cliquez sur Start Streaming.

6. Accédez à la page Stream Management. Sous l'onglet Active Streams, vous pouvez consulter et gérer vos flux actifs.

Étape 3 : Lire des flux en direct

Vous pouvez utiliser le SDK ApsaraVideo Player pour Web afin de lire des flux en direct. Pour plus d'informations, consultez la rubrique Lecteur web.

Pour intégrer le SDK ApsaraVideo Player pour Web et lire des flux en direct sur une page web, suivez les étapes ci-dessous.

1. Ajoutez un fichier .js spécifique à votre projet.

   Le SDK ApsaraVideo Player pour Web ne dépend pas des bibliothèques .js frontend. Ajoutez le fichier .js suivant à votre projet pour initialiser le lecteur.

   <head>
     <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" />  // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. 
     <script charset="utf-8" type="text/javascript" src="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script>  // Required. Import the .js file. 
   </head>

2. Spécifiez un conteneur pour le lecteur.

   <body>
     <div id="J_prismPlayer"></div>
   </body>

3. Instanciez le lecteur.

   Pour diffuser du contenu à partir d'URL, définissez le paramètre source sur l'URL de diffusion et le paramètre isLive sur true. Pour plus d'informations sur l'obtention d'une URL de diffusion, consultez la rubrique Étape 1 : Générer une URL d'ingestion et une URL de diffusion.

   Exemple de code pour la diffusion à partir d'URL :

   <script>
     var player = new Aliplayer({
       id: 'J_prismPlayer',
       source: '<your play URL>'// The streaming URL that is generated in ApsaraVideo Live. 
       isLive: true,// Specify whether to play the live stream. 
       },function(player){
         console.log('The player is created.')
       });
   </script>

Essai en ligne et code source des démos

Essayer la démo pour PC

Essayer la démo pour appareils mobiles

Code source des démos lié aux fonctionnalités

Code source de la démo pour l'intégration avec Vue

Le SDK ApsaraVideo Player pour Web fournit le code source d'une démo pour vous permettre d'intégrer le SDK au framework Vue.

Pour plus d'informations sur la démo, consultez la rubrique Démo d'ApsaraVideo Player basée sur Vue.

Mini-programmes WeChat

Un mini-programme WeChat ne dispose pas d'API DOM ni d'API BOM. Par conséquent, certaines bibliothèques couramment utilisées dans le développement frontend, telles que jQuery et Zepto, ne peuvent pas être chargées dans un mini-programme WeChat. De même, le SDK ApsaraVideo Player pour Web, qui repose sur la prise en charge des navigateurs, ne peut pas s'exécuter dans un mini-programme WeChat. Vous devez donc utiliser le composant vidéo par défaut fourni par un mini-programme WeChat pour lire des vidéos. Pour plus d'informations, visitez la page vod-mini-program.

Références

• Lorsque vous utilisez le SDK ApsaraVideo Player pour Web, les paramètres des fonctionnalités couramment utilisées peuvent varier selon le lecteur, la méthode de lecture ou l'environnement du navigateur. Pour plus d'informations, consultez la rubrique Fonctionnalités de base.

• Le SDK ApsaraVideo Player pour Web propose également des fonctionnalités avancées, notamment le contrôle de la lecture et la lecture de vidéos longues. Pour plus d'informations, consultez la rubrique Fonctionnalités avancées.

• Pour la référence API du SDK ApsaraVideo Player pour Web, consultez la rubrique Référence API Aliplayer.

• Pour la FAQ relative au SDK ApsaraVideo Player pour Web, consultez la rubrique FAQ du SDK Player pour Web.