Erste Schritte mit dem IVS Web Broadcast SDK | Streaming in Echtzeit

Dieses Dokument führt Sie durch die Schritte zum Einstieg in das Web Broadcast SDK von IVS-Streaming in Echtzeit.

Importe

Die Bausteine für Echtzeit befinden sich in einem anderen Namespace als die Root-Broadcasting-Module.

Verwenden eines Skript-Tags

Die in den folgenden Beispielen definierten Klassen und Enums lassen sich mit denselben Skriptimporten im globalen Objekt IVSBroadcastClient finden:

const { Stage, SubscribeType } = IVSBroadcastClient;

Verwenden von npm

Die Klassen, Enums und Typen können auch aus dem Paketmodul importiert werden:

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

Serverseitige Rendering-Unterstützung

Die Bühnenbibliothek des Web-Broadcast-SDK kann nicht in einem serverseitigen Kontext geladen werden, da sie auf Browser-Primitive verweist, die für das Funktionieren der Bibliothek beim Laden erforderlich sind. Um dieses Problem zu umgehen, laden Sie die Bibliothek dynamisch, wie in der Web-Broadcast-Demo mit „Next“ und „React“ gezeigt.

Berechtigungen anfordern

Ihre App muss die Berechtigung für den Zugriff auf die Kamera und das Mikrofon des Benutzers anfordern und muss über HTTPS bereitgestellt werden. (Das gilt nicht nur für Amazon IVS, sondern für alle Websites, die Zugriff auf Kameras und Mikrofone benötigen.)

Die folgende Beispielfunktion zeigt, wie Sie Berechtigungen für Audio- und Videogeräte anfordern und erfassen können:

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

Weitere Informationen finden Sie in der Berechtigungs-API und unter MediaDevices.getUserMedia ().

Auflisten der verfügbaren Geräte

Um festzustellen, welche Geräte für die Erfassung verfügbar sind, fragen Sie die Methode MediaDevices.enumerateDevices () des Browsers ab:

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

Abrufen eines MediaStream von einem Gerät

Nachdem Sie die Liste der verfügbaren Geräte erfasst haben, können Sie einen Stream von einer beliebigen Anzahl von Geräten abrufen. Sie können zum Beispiel mit der Methode getUserMedia() einen Stream von einer Kamera abrufen.

Wenn Sie angeben möchten, von welchem Gerät der Stream erfasst werden soll, können Sie die deviceId im Bereich audio oder video der Medieneinschränkungen explizit festlegen. Alternativ können Sie die deviceId weglassen und Benutzer ihre Geräte über die Eingabeaufforderung des Browsers auswählen lassen.

Zudem können Sie mithilfe der Einschränkungen width und height eine ideale Kameraauflösung angeben. (Mehr über diese Einschränkungen erfahren Sie hier.) Das SDK wendet automatisch die Einschränkungen für die Breite und Höhe an, die Ihrer maximalen Übertragungsauflösung entsprechen. Es empfiehlt sich jedoch, diese auch selbst anzuwenden, damit das Seitenverhältnis der Quelle nicht geändert wird, nachdem Sie sie dem SDK hinzugefügt haben.

Stellen Sie für Echtzeit-Streaming sicher, dass die Medienauflösung auf 720p beschränkt ist. Insbesondere dürfen Ihre getUserMedia- und getDisplayMedia-Beschränkungswerte für Breite und Höhe 921 600 (1280*720) nicht überschreiten, wenn sie miteinander multipliziert werden.

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