Creazione di un boilerplate HTML Accettazione dell'input di token e aggiunta dei pulsanti Unisciti/Abbandona Aggiunta di elementi del container multimediale Crea app.js Creazione di variabili dell'applicazione Crea joinStage 1: definisci la funzione e convalida l'input Crea joinStage 2: ottieni i contenuti multimediali da pubblicare Crea joinStage 3: definisci la strategia della fase e crea la fase Crea joinStage 4: gestisci gli eventi nella fase ed esegui il rendering dei contenuti multimediali Crea joinStage 5: unisciti alla fase Crea leaveStage Inizializza i gestori di eventi di input Esegui l'applicazione e fornisci un token Fasi successive

Pubblica e sottoscrivi con l'SDK di trasmissione Web IVS

Questa sezione illustra i passaggi necessari per pubblicare e sottoscrivere una fase utilizzando l'app web.

Creazione di un boilerplate HTML

Per prima cosa, creiamo il boilerplate HTML e importiamo la libreria come tag di 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.21.0/amazon-ivs-web-broadcast.js"></script>
</head>

<body>

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

</body>
</html>

Accettazione dell'input di token e aggiunta dei pulsanti Unisciti/Abbandona

Qui riempiamo il corpo con i nostri controlli di input. Tali controlli prendono come input il token e configurano i pulsanti Unisciti e Abbandona. In genere le applicazioni richiedono il token dall'API dell'applicazione, ma per questo esempio il token verrà copiato e incollato nell'input del token.


<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 />

Aggiunta di elementi del container multimediale

Questi elementi serviranno da supporto ai media per i nostri partecipanti locali e remoti. Aggiungiamo un tag di script per caricare la logica dell'applicazione definita in app.js.


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

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

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

Questa operazione completa la pagina HTML che dovrebbe essere visualizzata durante il caricamento di index.html in un browser:

Visualizzazione dello streaming in tempo reale in un browser: configurazione HTML completata.

Crea app.js

Passiamo alla definizione dei contenuti del file app.js. Inizia importando tutte le proprietà richieste dal pacchetto globale dell'SDK:


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

Creazione di variabili dell'applicazione

Stabilisci le variabili che contengono i riferimenti agli elementi HTML dei pulsanti Unisciti e Abbandona e lo stato di archiviazione dell'applicazione:


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;

Crea joinStage 1: definisci la funzione e convalida l'input

La funzione joinStage prende il token di input, crea una connessione alla fase e inizia a pubblicare video e audio recuperati da getUserMedia.

Per iniziare, definiamo la funzione e convalidiamo lo stato e l'input del token. Approfondiremo questa funzione nelle prossime sezioni.


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
};

Crea joinStage 2: ottieni i contenuti multimediali da pubblicare

Ecco i contenuti multimediali che verranno pubblicati nella fase:


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]);

Crea joinStage 3: definisci la strategia della fase e crea la fase

La strategia della fase è il fulcro della logica decisionale che l'SDK utilizza per decidere cosa pubblicare e quali partecipanti sottoscrivere. Per ulteriori informazioni sullo scopo della funzione, consulta la sezione Strategia.

Questa strategia è semplice. Dopo essere entrati nella fase, pubblica i flussi appena recuperati e sottoscrivi l'audio e i video di ogni partecipante remoto:


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

stage = new Stage(token, strategy);

Crea joinStage 4: gestisci gli eventi nella fase ed esegui il rendering dei contenuti multimediali

Le fasi emettono numerosi eventi. Dovremo ascoltare STAGE_PARTICIPANT_STREAMS_ADDED e STAGE_PARTICIPANT_LEFT per eseguire il rendering e rimuovere contenuti multimediali da e verso la pagina. Una serie più esaustiva di eventi è riportata nella sezione Eventi.

In questo esempio creeremo quattro funzioni di supporto la gestione degli elementi DOM necessari: setupParticipant, teardownParticipant, createVideoEl e 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;
}

Crea joinStage 5: unisciti alla fase

Completiamo la nostra funzione joinStage unendoci finalmente alla fase.


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

Crea leaveStage

Definisci la funzione leaveStage che verrà invocata dal pulsante Abbandona.


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

  joining = false;
  connected = false;
};

Inizializza i gestori di eventi di input

Aggiungeremo un'ultima funzione al file app.js. Questa funzione viene richiamata immediatamente quando la pagina viene caricata e stabilisce i gestori di eventi per unirsi e abbandonare la fase.


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

Esegui l'applicazione e fornisci un token

A questo punto puoi condividere la pagina Web localmente o con altri, apri la pagina e inserisci un token di partecipazione ed entra nella fase.

Fasi successive

Per esempi più dettagliati che coinvolgono npm, React e altro, consulta SDK di trasmissione IVS: guida Web (guida per lo streaming in tempo reale).

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Fase 5: pubblicare e sottoscrivere video

Android