:Co-streaming sur le web

Présentation de la mise en œuvre du co-streaming

Le Push SDK met en œuvre le co-streaming via ApsaraVideo Real-time Communication (ARTC). Cela permet aux utilisateurs de démarrer des diffusions interactives engageant davantage de personnes avec une latence ultra-faible.

• Avant le co-streaming : le streamer diffuse un flux à l'aide d'une URL d'ingestion basée sur ARTC pour le co-streaming, tandis que le spectateur récupère le flux depuis le CDN.

• Pendant le co-streaming : le spectateur devient co-streamer. Le co-streamer utilise une URL d'ingestion basée sur ARTC pour diffuser son flux et une URL de streaming basée sur ARTC pour récupérer le flux du streamer avec une latence ultra-faible. De son côté, le streamer utilise une URL de streaming basée sur ARTC pour récupérer le flux du co-streamer avec une latence ultra-faible.

• Après le co-streaming : le co-streamer redevient un simple spectateur. L'ingestion et la récupération de flux basées sur ARTC par le spectateur s'arrêtent. Ce dernier récupère à nouveau le flux depuis le CDN.

Notes d'utilisation

• En mode co-streaming, le streamer et le co-streamer ne peuvent utiliser que l'objet AlivcLivePlayer pour lire leurs flux respectifs. L'objet AlivcLivePlayer prend uniquement en charge les flux dont l'URL commence par artc://live.aliyun.com/play/.

• La section suivante explique comment utiliser la fonctionnalité de co-streaming sur le web. Pour plus d'informations sur l'intégration du SDK de co-streaming pour le web, consultez Integrate the co-streaming SDK for Web.

  Important

  Une mise à jour du SDK de co-streaming pour le web a été lancée le 15 mars 2024, rendant le SDK compatible avec la nouvelle version de Google Chrome. Les utilisateurs qui exploitent l'ancienne version du SDK doivent effectuer la mise à niveau dès que possible afin d'éviter tout problème de disponibilité. Pour plus d'informations sur l'intégration de la dernière version du SDK, consultez Integrate the co-streaming SDK for Web.

Étape 1 : Activer la fonctionnalité de co-streaming

Pour utiliser la fonctionnalité de co-streaming, créez une application de co-streaming et configurez le domaine de streaming des spectateurs. Pour plus d'informations, consultez Quick start for co-streaming.

Étape 2 : Générer les URLs d'ingestion et de streaming pour le co-streaming

Vous pouvez générer les URLs d'ingestion et de streaming du streamer et du co-streamer, ainsi que l'URL de streaming CDN des spectateurs, via la console ApsaraVideo Live, ou bien construire ces URLs manuellement en suivant les règles de concaténation.

Méthode 1 : Générer les URLs via la console

Utilisez le générateur d'URLs disponible dans la console ApsaraVideo Live pour obtenir les URLs d'ingestion et de streaming du streamer et du co-streamer, ainsi que l'URL de streaming CDN des spectateurs. Pour plus d'informations, consultez Co-streaming URL generator.

Méthode 2 : Construire les URLs

Les jetons présents dans les URLs d'ingestion et de streaming générées via la console sont temporaires et généralement réservés aux tests. Si vous avez besoin d'URLs destinées à un usage professionnel, construisez-les selon les règles de concaténation pour des raisons de sécurité. Les jetons inclus dans les URLs construites manuellement sont calculés à partir du SdkAppID, de l'AppKey, de l'ID de salle, de l'UserID et de l'horodatage, en utilisant l'algorithme de chiffrement SHA-256. Ces jetons offrent un niveau de sécurité supérieur. Pour plus d'informations, consultez Ingest and streaming URLs of streamers and co-streamers in co-streaming scenarios et CDN streaming URLs of viewers.

Étape 3 : Créer les objets liés à l'ingestion de flux

Cette étape est requise aussi bien du côté du streamer que du côté du co-streamer.

Créer un objet AlivcLivePusher

Créez un objet AlivcLivePusher en tant qu'instance d'ingestion de flux et configurez les rappels associés.

const pusher = new window.AlivcLivePush.AlivcLivePusher();
await pusher.init({
  resolution: window.AlivcLivePush.AlivcResolutionEnum.RESOLUTION_540P,
  fps: window.AlivcLivePush.AlivcFpsEnum.FPS_30,
  // audioOnly: true, Only for scenarios in which audio-only streams are ingested. 
});
pusher.info.on('pushstatistics', _stat => {
  // TODO... Process stream ingest statistics data.
  // console.log(_stat);
});
pusher.error.on('system', error => {
  console.log(error);
});
pusher.network.on('connectionlost', () => {
  console.log('connectionlost');
});

Démarrer l'ingestion de flux en mode co-streaming

Utilisez une URL d'ingestion dédiée au co-streaming pour diffuser votre flux.

await pusher.startPreview(videoElement);
await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // The ingest URL of the streamer or co-streamer.

Étape 4 : Créer un objet AliPlayer pour la lecture via CDN

Cette étape est requise du côté du spectateur.

Pour utiliser un objet AliPlayer afin de lire le flux via CDN, obtenez d'abord l'URL de streaming CDN des spectateurs. Pour plus d'informations, reportez-vous à l'étape 2 : Générer les URLs d'ingestion et de streaming pour le co-streaming.

Il est recommandé d'utiliser une URL de streaming au format HTTP-FLV plutôt qu'au format RTMP (Real-Time Messaging Protocol). Lorsque vous générez des URLs via la console ApsaraVideo Live, des formats RTMP et HTTP-FLV sont produits. Bien que ces deux formats contiennent les mêmes données, ils reposent sur des protocoles différents. HTTP étant le protocole principal de transmission d'informations sur Internet, les connexions HTTP (entre Alibaba Cloud CDN, les fournisseurs d'accès Internet et les équipements intermédiaires) sont hautement optimisées. Les ports par défaut HTTP (80) et HTTPS (443) sont généralement ajoutés aux listes d'autorisation et ne peuvent pas être désactivés. En revanche, RTMP est un protocole obsolète utilisant le port 1935 par défaut, lequel peut être bloqué par les pare-feux, provoquant ainsi des erreurs. Comparé au RTMP, le HTTP-FLV offre une meilleure stabilité et de meilleures performances, notamment un taux de saccades et une latence plus faibles lors de la lecture vidéo.

const player = new window.Aliplayer(
  {
    id: videoId, // video element ID
    source: url, // The streaming URL, which can be a third-party streaming URL or a streaming URL from ApsaraVideo Live. 
    isLive: true, // Specify whether the content that you want to play is a live stream. 
  },
  function (player: any) {
    console.log('The player is created.', player);
  }
);

Étape 5 : Démarrer le co-streaming

Le streamer A diffuse un flux basé sur ARTC

Le streamer A utilise l'objet AlivcLivePusher pour démarrer l'ingestion de flux. Exemple de code :

await pusher.startPreview(videoElement); // You can use methods of the Document interface (such as getElementById) to obtain the videoElement object.
await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // The ingest URL of the streamer or co-streamer.

Les spectateurs utilisent une URL de streaming CDN pour lire le flux du streamer A

Tous les spectateurs utilisent l'objet AliPlayer pour lire le flux du streamer A. Exemple de code :

const player = new window.Aliplayer(
  {
    id: videoId, // video element ID
    source: 'rtmp://test.alivecdn.com/live/streamId?auth_key=XXX', // The streaming URL, which can be a third-party streaming URL or a streaming URL from ApsaraVideo Live. 
    isLive: true, // Specify whether the content that you want to play is a live stream. 
  },
  function (player: any) {
    console.log('The player is created.', player);
  }
);

Le spectateur D initie le co-streaming

• Le spectateur D crée un objet AlivcLivePusher et utilise une URL d'ingestion dédiée au co-streaming pour diffuser son flux. Il devient alors co-streamer. Exemple de code :

  const pusher = new window.AlivcLivePush.AlivcLivePusher();
  pusher.init({
    resolution: window.AlivcLivePush.AlivcResolutionEnum.RESOLUTION_540P,
    fps: window.AlivcLivePush.AlivcFpsEnum.FPS_30,
    // audioOnly: true, Only for scenarios in which audio-only streams are ingested. 
  });
  pusher.info.on('pushstatistics', _stat => {
    // TODO... Process stream ingest statistics data.
    // console.log(_stat);
  });
  pusher.error.on('system', error => {
    console.log(error);
  });
  pusher.network.on('connectionlost', () => {
    console.log('connectionlost');
  });
  await pusher.startPreview(videoElement);  // You can use methods of the Document interface (such as getElementById) to obtain the videoElement object.
  await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // The ingest URL of the streamer or co-streamer.

• Le streamer A obtient l'URL de streaming dédiée au co-streaming du co-streamer D, puis crée un objet AlivcLivePlayer pour récupérer le flux du co-streamer D en temps réel. Exemple de code :

  const player = new window.AlivcLivePush.AlivcLivePlayer();
  // Specify the streaming URL of Co-streamer D, which starts with artc://.
  const playInfo = await player.startPlay("artc://live.aliyun.com/play/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX", videoElement); 
  
  playInfo.on('userleft', () => {
    // Handle the event that is triggered when Co-streamer D leaves the room.
  });
  
  playInfo.on('canplay', () => {
    // Handle the event that is triggered when the video is available for playback.
  }

• Simultanément, le co-streamer D obtient l'URL de streaming dédiée au co-streaming du streamer A, puis crée un objet AlivcLivePlayer pour récupérer le flux du streamer A en temps réel. Exemple de code :

  const player = new window.AlivcLivePush.AlivcLivePlayer();
  // Specify the streaming URL of Streamer A, which starts with artc://.
  const playInfo = await player.startPlay("artc://live.aliyun.com/play/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX", videoElement);
  
  playInfo.on('userleft', () => {
    // Handle the event that is triggered when Streamer A leaves the room.
  });
  
  playInfo.on('canplay', () => {
    // Handle the event that is triggered when the video is available for playback.
  }

Le streamer A met à jour le flux mixé après la réussite du co-streaming

Afin de garantir que le spectateur B et le spectateur C (qui ne participent pas au co-streaming) puissent regarder le flux du co-streamer D, le streamer A doit effectuer une opération de mixage de flux. Ainsi, les flux du streamer A et du co-streamer D sont combinés en un seul flux, que les spectateurs peuvent récupérer via le CDN pour la lecture.

Plus précisément, le streamer A appelle la méthode setLiveMixTranscodingConfig pour démarrer une tâche de transcodage de flux mixé et spécifier les flux à mixer. Des paramètres tels que la résolution et le taux de rafraîchissement du flux mixé correspondent à ceux configurés par le streamer A dans AlivcLivePushConfig lors de la création de l'objet AlivcLivePusher. Par exemple, si le streamer A a défini une résolution de 720p dans AlivcLivePushConfig, la résolution du flux mixé sera également de 720p.

const resolution = pusher.getResolution();
const width = window.AlivcLivePush.AlivcResolution.GetResolutionWidth(resolution);
const height = window.AlivcLivePush.AlivcResolution.GetResolutionHeight(resolution);

const mixStreams = [];
const transcodingConfig = new window.AlivcLivePush.AlivcLiveTranscodingConfig();
const anchorMixStream = new window.AlivcLivePush.AlivcLiveMixStream(
  userA, // Specify the user ID of Streamer A.
  0,
  0,
  width,
  height,
  1
);
// Add the stream of Streamer A for mixing.
mixStreams.push(anchorMixStream);

const audienceMixStream = new window.AlivcLivePush.AlivcLiveMixStream(
  userD, // Specify the user ID of Co-streamer D.
  100,
  200,
  200,
  300,
  2
);
// Add the stream of Co-streamer D for mixing.
mixStreams.push(audienceMixStream);

transcodingConfig.mixStreams = mixStreams;
await pusher.setLiveMixTranscodingConfig(transcodingConfig);

Les spectateurs peuvent désormais regarder le flux mixé du streamer A et du co-streamer D.

Le co-streamer D met fin au co-streaming

• Pour arrêter le co-streaming, le co-streamer D doit appeler la méthode d'arrêt de l'ingestion de flux dans AlivcLivePusher, puis détruire l'objet AlivcLivePusher. Exemple de code :

  await pusher.destroy();
  pusher = null;

• Simultanément, le co-streamer D doit également appeler la méthode d'arrêt de la lecture dans AlivcLivePlayer, puis détruire l'objet AlivcLivePlayer. Exemple de code :

  await player.destroy();
  player = null;

• Le co-streamer D redevient un simple spectateur et peut récupérer le flux depuis le CDN. Pour plus d'informations, reportez-vous à l'étape 4 : Créer un objet AliPlayer pour la lecture via CDN.

• Le streamer A doit appeler la méthode d'arrêt de la lecture dans AlivcLivePlayer, puis détruire l'objet AlivcLivePlayer. Exemple de code :

  await player.destroy();
  player = null;

  Parallèlement, le streamer A doit appeler la méthode setLiveMixTranscodingConfig en lui passant une valeur vide. Cela permet d'arrêter le mixage de flux. Notez que chaque fois que les spectateurs souhaitent uniquement regarder le flux du streamer A, ce dernier peut effectuer les opérations précédentes pour interrompre le mixage.

  Avertissement

  Si le streamer reste dans la salle mais n'a plus besoin de mixage de flux, assurez-vous d'arrêter cette fonctionnalité. Si le mixage n'est pas arrêté, le module de mixage continuera de s'exécuter et engendrera des frais inutiles.

  pusher.setLiveMixTranscodingConfig();