Publication et abonnement avec le SDK de diffusion Web IVS - Amazon IVS
Créer un modèle de code HTMLAccepter la saisie du jeton et ajouter des boutons Rejoindre/QuitterAjouter des éléments de conteneur multimédiaCrée le fichier app.jsCréer les variables d’applicationCréer joinStage 1 : définition de la fonction et validation de la saisieCréer joinStage 2 : publier le contenu multimédiaCréer joinStage 3 : définir la stratégie de la scène et créer la scèneCréer joinStage 4 : gérer les événements de la scène et le rendu multimédiaCréer joinStage 5 : rejoindre la scèneCréer leaveStageInitialiser les gestionnaires d’entrées et d’événementsExécutez l’application et fournissez un jetonQuelle est la prochaine étape ?

Publication et abonnement avec le SDK de diffusion Web IVS

Cette section explique les étapes nécessaires à la publication et à l'abonnement à une étape à l'aide de votre application web.

Créer un modèle de code HTML

Commençons par créer le modèle de code HTML et importons la bibliothèque sous forme de balise de script :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Import the SDK -->
  <script src="https://web-broadcast.live-video.net/1.17.0/amazon-ivs-web-broadcast.js"></script>
</head>

<body>

<!-- TODO - fill in with next sections -->
<script src="./app.js"></script>

</body>
</html>

Accepter la saisie du jeton et ajouter des boutons Rejoindre/Quitter

Ici, nous remplissons le corps avec nos contrôles d’entrée. Ceux-ci prennent comme entrée le jeton, et ils configurent les boutons Rejoindre et Quitter. Généralement, les applications demandent le jeton à partir de l’API de votre application, mais dans cet exemple, vous allez copier et coller le jeton dans l’entrée du jeton.

<h1>IVS Real-Time Streaming</h1>
<hr />

<label for="token">Token</label>
<input type="text" id="token" name="token" />
<button class="button" id="join-button">Join</button>
<button class="button" id="leave-button" style="display: none;">Leave</button>
<hr />

Ajouter des éléments de conteneur multimédia

Ces éléments hébergeront les médias pour nos participants locaux et distants. Nous ajoutons une balise de script pour charger la logique de notre application définie dans app.js.

<!-- Local Participant -->
<div id="local-media"></div>

<!-- Remote Participants -->
<div id="remote-media"></div>

<!-- Load Script -->
<script src="./app.js"></script>

Ceci termine la page HTML et vous devriez le voir lors du chargement du fichier index.html dans un navigateur :

Afficher le streaming en temps réel dans un navigateur : configuration HTML terminée.

Crée le fichier app.js

Passons à la définition du contenu de notre fichier app.js. Commencez par importer toutes les propriétés requises depuis le répertoire global du SDK :

const {
  Stage,
  LocalStageStream,
  SubscribeType,
  StageEvents,
  ConnectionState,
  StreamType
} = IVSBroadcastClient;

Créer les variables d’application

Définissez des variables pour contenir les références aux éléments HTML de nos boutons Rejoindre et Quitter et pour stocker l’état de l’application :

let joinButton = document.getElementById("join-button");
let leaveButton = document.getElementById("leave-button");

// Stage management
let stage;
let joining = false;
let connected = false;
let localCamera;
let localMic;
let cameraStageStream;
let micStageStream;

Créer joinStage 1 : définition de la fonction et validation de la saisie

La fonction joinStage prend le jeton d’entrée, crée une connexion à la scène et commence à publier la vidéo et l’audio extraits de getUserMedia.

Pour commencer, nous définissons la fonction et validons l’état et la saisie du jeton. Nous développerons cette fonction dans les prochaines sections.

const joinStage = async () => {
  if (connected || joining) {
    return;
  }
  joining = true;

  const token = document.getElementById("token").value;

  if (!token) {
    window.alert("Please enter a participant token");
    joining = false;
    return;
  }

  // Fill in with the next sections
};

Créer joinStage 2 : publier le contenu multimédia

Voici les médias qui seront publiés vers la scène :

async function getCamera() {
  // Use Max Width and Height
  return navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
  });
}

async function getMic() {
  return navigator.mediaDevices.getUserMedia({
    video: false,
    audio: true
  });
}

// Retrieve the User Media currently set on the page
localCamera = await getCamera();
localMic = await getMic();

// Create StageStreams for Audio and Video
cameraStageStream = new LocalStageStream(localCamera.getVideoTracks()[0]);
micStageStream = new LocalStageStream(localMic.getAudioTracks()[0]);

Créer joinStage 3 : définir la stratégie de la scène et créer la scène

Cette stratégie de scène est au cœur de la logique de décision utilisée par le SDK pour décider du contenu à publier et des participants auxquels s’abonner. Pour plus d’informations sur l’objectif de la fonction, consultez la section Stratégie.

Cette stratégie est simple. Après avoir rejoint la scène, publiez les flux que vous venez de récupérer et abonnez-vous au son et à la vidéo de chaque participant distant :

const strategy = {
  stageStreamsToPublish() {
    return [cameraStageStream, micStageStream];
  },
  shouldPublishParticipant() {
    return true;
  },
  shouldSubscribeToParticipant() {
    return SubscribeType.AUDIO_VIDEO;
  }
};

stage = new Stage(token, strategy);

Créer joinStage 4 : gérer les événements de la scène et le rendu multimédia

Les scènes génèrent de nombreux événements. Nous devrons écouter les événements STAGE_PARTICIPANT_STREAMS_ADDED et STAGE_PARTICIPANT_LEFT pour afficher et supprimer du contenu multimédia vers et depuis la page. Un ensemble plus complet d’événements est répertorié dans Événements.

Notez que nous créons ici quatre fonctions d’assistance pour nous aider à gérer les éléments DOM nécessaires : setupParticipant, teardownParticipant, createVideoEl et createContainer.

stage.on(StageEvents.STAGE_CONNECTION_STATE_CHANGED, (state) => {
  connected = state === ConnectionState.CONNECTED;

  if (connected) {
    joining = false;
    joinButton.style = "display: none";
    leaveButton.style = "display: inline-block";
  }
});

stage.on(
  StageEvents.STAGE_PARTICIPANT_STREAMS_ADDED,
  (participant, streams) => {
    console.log("Participant Media Added: ", participant, streams);

    let streamsToDisplay = streams;

    if (participant.isLocal) {
      // Ensure to exclude local audio streams, otherwise echo will occur
      streamsToDisplay = streams.filter(
        (stream) => stream.streamType === StreamType.VIDEO
      );
    }

    const videoEl = setupParticipant(participant);
    streamsToDisplay.forEach((stream) =>
      videoEl.srcObject.addTrack(stream.mediaStreamTrack)
    );
  }
);

stage.on(StageEvents.STAGE_PARTICIPANT_LEFT, (participant) => {
  console.log("Participant Left: ", participant);
  teardownParticipant(participant);
});


// Helper functions for managing DOM

function setupParticipant({ isLocal, id }) {
  const groupId = isLocal ? "local-media" : "remote-media";
  const groupContainer = document.getElementById(groupId);

  const participantContainerId = isLocal ? "local" : id;
  const participantContainer = createContainer(participantContainerId);
  const videoEl = createVideoEl(participantContainerId);

  participantContainer.appendChild(videoEl);
  groupContainer.appendChild(participantContainer);

  return videoEl;
}

function teardownParticipant({ isLocal, id }) {
  const groupId = isLocal ? "local-media" : "remote-media";
  const groupContainer = document.getElementById(groupId);
  const participantContainerId = isLocal ? "local" : id;

  const participantDiv = document.getElementById(
    participantContainerId + "-container"
  );
  if (!participantDiv) {
    return;
  }
  groupContainer.removeChild(participantDiv);
}

function createVideoEl(id) {
  const videoEl = document.createElement("video");
  videoEl.id = id;
  videoEl.autoplay = true;
  videoEl.playsInline = true;
  videoEl.srcObject = new MediaStream();
  return videoEl;
}

function createContainer(id) {
  const participantContainer = document.createElement("div");
  participantContainer.classList = "participant-container";
  participantContainer.id = id + "-container";

  return participantContainer;
}

Créer joinStage 5 : rejoindre la scène

Complétons notre fonction joinStage en rejoignant enfin la scène !

try {
  await stage.join();
} catch (err) {
  joining = false;
  connected = false;
  console.error(err.message);
}

Créer leaveStage

Définissez la fonction leaveStage qui sera invoquée par le bouton « Quitter ».

const leaveStage = async () => {
  stage.leave();

  joining = false;
  connected = false;
};

Initialiser les gestionnaires d’entrées et d’événements

Nous allons ajouter une dernière fonction à notre fichier app.js. Cette fonction est invoquée dès le chargement de la page et établit des gestionnaires d’événements pour rejoindre et quitter la scène.

const init = async () => {
  try {
    // Prevents issues on Safari/FF so devices are not blank
    await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  } catch (e) {
    alert(
      "Problem retrieving media! Enable camera and microphone permissions."
    );
  }

  joinButton.addEventListener("click", () => {
    joinStage();
  });

  leaveButton.addEventListener("click", () => {
    leaveStage();
    joinButton.style = "display: inline-block";
    leaveButton.style = "display: none";
  });
};

init(); // call the function

Exécutez l’application et fournissez un jeton

À ce stade, vous pouvez partager la page Web localement ou avec d’autres personnes, ouvrir la page, saisir un jeton de participant et rejoindre l’étape.

Quelle est la prochaine étape ?

Pour obtenir des exemples plus détaillés impliquant npm, React, etc., consultez le SDK de diffusion IVS : guide pour le Web (Streaming en temps réel).