Démarrez avec le SDK de diffusion Web IVS | Streaming en temps réel

Ce document explique les étapes nécessaires pour le démarrage avec le SDK de diffusion Web IVS en temps réel.

Importations

Les composantes de base temps réel se trouvent dans un espace de noms différent de celui des modules de diffusion racine.

Utilisation d’une balise de script

En utilisant les mêmes importations de scripts, les classes et les énumérations définies dans les exemples ci-dessous se trouvent sur l’objet global IVSBroadcastClient :

const { Stage, SubscribeType } = IVSBroadcastClient;

Utilisation de npm

Les classes, les énumérations et les types peuvent également être importés depuis le module de package :

import { Stage, SubscribeType, LocalStageStream } from 'amazon-ivs-web-broadcast'

Prise en charge du rendu côté serveur

La bibliothèque de scènes du kit SDK de diffusion Web ne peut pas être chargée dans un contexte côté serveur, car elle référence des éléments de navigateur nécessaires à son fonctionnement lorsqu’elle est chargée. Pour contourner ce problème, chargez la bibliothèque dynamiquement, comme illustré dans la démonstration de diffusion Web à l’aide de Next et React.

Demander des autorisations

Votre application doit demander l’autorisation d’accéder à la caméra et au microphone de l’utilisateur, et cela doit être réalisé en utilisant HTTPS. (Ce n’est pas spécifique à Amazon IVS ; cette autorisation est requise pour toute application devant accéder aux caméras et aux microphones.)

Voici un exemple de fonction qui montre comment demander et capturer des autorisations pour les périphériques audio et vidéo :

async function handlePermissions() {
   let permissions = {
       audio: false,
       video: false,
   };
   try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
       for (const track of stream.getTracks()) {
           track.stop();
       }
       permissions = { video: true, audio: true };
   } catch (err) {
       permissions = { video: false, audio: false };
       console.error(err.message);
   }
   // If we still don't have permissions after requesting them display the error message
   if (!permissions.video) {
       console.error('Failed to get video permissions.');
   } else if (!permissions.audio) {
       console.error('Failed to get audio permissions.');
   }
}

Pour plus d’informations, consultez l’API Permissions et MediaDevices.getUserMedia().

Répertorier les périphériques disponibles

Pour voir quels périphériques peuvent être capturés, interrogez la méthode MediaDevices.enumerateDevices() du navigateur :

const devices = await navigator.mediaDevices.enumerateDevices();
window.videoDevices = devices.filter((d) => d.kind === 'videoinput');
window.audioDevices = devices.filter((d) => d.kind === 'audioinput');

Récupérer un MediaStream depuis un périphérique

Après avoir acquis la liste des périphériques disponibles, vous pouvez récupérer un flux à partir d’un nombre quelconque de périphériques. Par exemple, vous pouvez utiliser la méthode getUserMedia() pour récupérer un flux d’une caméra.

Si vous souhaitez spécifier le périphérique à partir duquel vous souhaitez capturer le flux, vous pouvez définir explicitement le deviceId dans la section audio ou video des contraintes multimédias. Vous pouvez également omettre le deviceId et demander aux utilisateurs de sélectionner leurs périphériques à l’invite du navigateur.

Vous pouvez également spécifier une résolution de caméra idéale à l’aide des contraintes width et height. (Pour en savoir plus sur ces contraintes, cliquez ici.) Le kit SDK applique automatiquement des contraintes de largeur et de hauteur qui correspondent à votre résolution de diffusion maximale ; cependant, il est conseillé de les appliquer vous-même pour vous assurer que le rapport hauteur/largeur de la source n’est pas modifié une fois que vous avez ajouté la source au kit SDK.

Pour le streaming en temps réel, assurez-vous que le contenu multimédia est limité à une résolution de 720p. Les valeurs de contrainte getUserMedia et getDisplayMedia pour la largeur et la hauteur ne doivent pas dépasser 921600 (1280×720) lorsqu’elles sont multipliées ensemble.

const videoConfiguration = {
  maxWidth: 1280,
  maxHeight: 720,
  maxFramerate: 30,
}

window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: videoConfiguration.maxWidth,
       },
       height: {
           ideal:videoConfiguration.maxHeight,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});