Guida introduttiva a SDK di trasmissione Web IVS | Streaming in tempo reale

Questo documento illustra i passaggi necessari per iniziare a utilizzare l'SDK di trasmissione IVS per lo streaming Web in tempo reale.

Importazioni

Gli elementi costitutivi per il tempo reale si trovano in uno spazio dei nomi diverso da quello dei moduli di trasmissione principali.

Utilizzo di un tag di script

Utilizzando le stesse importazioni di script, le classi e le enumerazioni definite negli esempi seguenti sono individuabili sull'oggetto globale IVSBroadcastClient:

const { Stage, SubscribeType } = IVSBroadcastClient;

Utilizzo di npm

Le classi, le enumerazioni e i tipi possono essere importati anche dal modulo del pacchetto:

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

Support per il rendering lato server

La libreria delle fasi dell'SDK di trasmissione per web non può essere caricata in un contesto lato server, poiché fa riferimento alle primitive del browser necessarie per il funzionamento della libreria quando viene caricata. Per ovviare a questo problema, carica la libreria dinamicamente, come mostrato nella demo di Trasmissione sul web utilizzando Next e React.

Richiedere autorizzazioni

L'app deve richiedere l'autorizzazione per accedere alla fotocamera e al microfono dell'utente e tale autorizzazione deve utilizzare HTTPS. (Questo non riguarda solo Amazon IVS, ma qualsiasi sito Web che abbia bisogno di accedere alle fotocamere e ai microfoni.)

Ecco un esempio di funzione che mostra come richiedere e ottenere le autorizzazioni per dispositivi audio e video:

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.');
   }
}

Per ulteriori informazioni, consulta l'API delle autorizzazioni e MediaDevices.getUserMedia().

Elenco dei dispositivi disponibili

Per vedere quali dispositivi sono disponibili per l'acquisizione, interroga il metodo MediaDevices.enumerateDevices() del browser:

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

Recupero di un MediaStream da un dispositivo

Dopo aver acquisito l'elenco dei dispositivi disponibili, puoi recuperare un flusso da qualsiasi numero di dispositivi. Ad esempio, puoi utilizzare il metodo getUserMedia() per recuperare un flusso da una videocamera.

Se desideri specificare da quale dispositivo catturare lo streaming, puoi impostare esplicitamente il deviceId nella sezione audio o video dei vincoli del supporto. In alternativa, puoi omettere deviceId e fare in modo che gli utenti selezionino i propri dispositivi dal prompt del browser.

È inoltre possibile specificare una risoluzione ideale della fotocamera utilizzando i vincoli width e height. (Ulteriori informazioni su questi vincoli sono disponibili qui.) L'SDK applica automaticamente i limiti di larghezza e altezza che corrispondono alla risoluzione massima di trasmissione; tuttavia, è una buona idea applicarli anche tu stesso in modo da essere certi che le proporzioni dell'aspetto della sorgente non vengano modificate dopo aver aggiunto la sorgente all'SDK.

Per lo streaming in tempo reale, assicurati che i contenuti multimediali siano limitati alla risoluzione di 720p. In particolare, i valori dei vincoli getUserMedia e getDisplayMedia per larghezza e altezza non devono superare 921600 (1280x720) se moltiplicati tra loro.

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