Geekly articles weekly

RTMP-Videoanruf-Streaming


Heutzutage sind Streaming-Plattformen auf dem Höhepunkt ihrer Popularität, da Millionen talentierter Menschen regelmäßig ihr Wissen teilen - lesen Sie, sie nutzen Streaming in vollem Umfang. Da dieser Markt wächst, gibt es viele Anwendungen, die Live-Videos mit einem Smartphone oder einer Laptop-Kamera streamen können. Vielleicht möchten Sie diese Funktionalität auch in Ihre Anwendung einführen. Wenn ja, dann beeilen wir uns - jetzt können Sie mit Voximplant Videoanrufe über RTMP an jedes CDN weiterleiten, das dieses Protokoll unterstützt.

Diese Funktionalität wird durch das neue Voxengine- Modul - StreamingAgent - ermöglicht. Unter dem Schnitt warten Sie auf 5 Schritte, um diese Integration zu konfigurieren. Willkommen!

Schema



Ein Videoanruf von einer Mobil- / Webanwendung oder SIP kommt in unsere Cloud, die ihn an ein Streaming-CDN weiterleitet. Das CDN sendet wiederum Audio- und Videostreams an Endbenutzer - wie dies normalerweise der Fall ist. Bitte beachten Sie, dass RTMP nur H.264 unterstützt. Daher ist es sehr wichtig, diesen Codec beim Streaming explizit anzugeben.

Du wirst brauchen


  • ein Konto bei einem Streaming-Dienst, z. B. Twitch oder Youtube ;
  • Voximplant-Konto. Wenn Sie es nicht haben, dann lebt die Registrierung hier ;
  • Voximplant-Anwendung sowie ein Skript, eine Regel und ein einzelner Benutzer. All dies werden wir in diesem Tutorial erstellen.
  • Web-Client für die Aufnahme von Video und Audio - wir werden unser Demo- Videochat verwenden

1. Streaming-Einstellungen


Zunächst müssen Sie die Werte von zwei Parametern abrufen, die wir im Cloud-Skript verwenden - Stream-Name / Schlüssel und Server-URL . Im Folgenden wird gezeigt, wie Sie diese Werte anhand von Twitch und YouTube als Beispiele erhalten.

Zucken


Melden Sie sich in Ihrem Konto an, klicken Sie auf das Profilbild in der oberen rechten Ecke und wählen Sie Video Producer.



Wählen Sie im Abschnitt Einstellungen die Option Kanal aus, und klicken Sie oben auf der Seite auf Kopieren, um Ihren primären Stream-Schlüssel abzurufen. Bitte beachten Sie, dass der Schlüssel nur bei aktivierter Zwei-Faktor-Authentifizierung verfügbar ist. Fügen Sie diesen Wert in Ihren Texteditor ein oder lassen Sie diese Seite einfach geöffnet, um den Wert später zu kopieren.

Um die Server-URL zu finden, rufen Sie die Seite stream.twitch.tv/ingests auf , wählen Sie einen der empfohlenen Server aus und kopieren Sie ihn ohne den letzten Schrägstrich, z. B.: Rtmp: //live-sfo.twitch.tv/app

YouTube


Melde dich bei deinem Konto an, klicke auf den Avatar in der oberen rechten Ecke und wähle YouTube Studio (Beta).



Wenn du keinen YouTube-Kanal hast, wird ein Dialogfeld zum Erstellen eines Kanals angezeigt. Klicken Sie auf Kanal erstellen. Daraufhin wird ein Dashboard des erstellten Kanals mit der Benachrichtigung angezeigt, dass das Streaming innerhalb von 24 Stunden möglich ist.



Gehe in YouTube Studio über das Menü links zu Andere Funktionen -> Live-Stream. Eine neue Seite wird geöffnet, unter der sich der Encoder-Setup-Block befindet. Von hier aus müssen Sie die Server-URL und die Stream-Namen / Schlüsselwerte übernehmen (oder die Seite offen lassen).



2. VOXIMPLANT-Einstellungen


Jetzt müssen Sie die Einstellungen von der Seite von Voximplant aus vornehmen. Melden Sie sich zuerst in Ihrem Konto an: https://manage.voximplant.com/auth . Klicken Sie im Menü links auf "Anwendungen" und dann auf "Neue Anwendung" und erstellen Sie eine Anwendung namens "Streaming". Gehen Sie in die neue Anwendung und wechseln Sie zur Registerkarte "Skripte", um ein startStream-Skript mit diesem Code zu erstellen (vergessen Sie nicht, die Werte aus dem vorherigen Schritt in den Zeilen 8 und 9 zu ersetzen):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); });

Dies ist ein einfaches Skript, das einen Stream initiiert und auch alle möglichen Zustände überwacht, z. B.: Verbunden, Verbindung fehlgeschlagen, StreamStarted usw. - Details des Skripts werden etwas niedriger sein. Jetzt müssen Sie zur Registerkarte "Routing" Ihrer Anwendung gehen und auf "Neue Regel" klicken. Nennen Sie es streamRule, geben Sie das startStream-Skript an und belassen Sie die Standardmaske (. *).


Das Letzte, was Sie in dieser Phase tun müssen, ist, einen Benutzer zu erstellen. Gehen Sie zur Registerkarte "Benutzer", klicken Sie auf "Benutzer erstellen", geben Sie einen Namen (z. B. Benutzer1) und ein Kennwort an und klicken Sie dann auf "Erstellen". Wir benötigen dieses Benutzername / Passwort-Paar für die Authentifizierung im Web-Client.


Die Konfiguration von Voximplant ist abgeschlossen, aber bevor wir zum Webclient übergehen, möchte ich verstehen, wie das StreamingAgent-Modul in unserem Szenario funktioniert.

3. Das Szenario


Mit dem StreamingAgent-Modul können Entwickler RTMP-Streams auf gängigen Stimulationsplattformen starten. Um die Funktionalität des Moduls nutzen zu können, müssen wir es ganz am Anfang des Skripts verbinden:

 require(Modules.StreamingAgent);

Als Nächstes müssen Sie den Codec explizit angeben, der beim Streaming verwendet wird. Da viele Plattformen (einschließlich Twitch und YouTube) RTMP verwenden, das wiederum H.264 unterstützt, werden wir Folgendes angeben:

 VoxEngine.setVideoCodec("H264");

Wenn der Codec nicht angegeben ist, wird möglicherweise das Ereignis StreamingAgentEvents.StreamError ausgelöst , das den Fehlertext enthält:
 "Video codec mismatch. " + codecName + " granted, but should be H.264"

Dann fügen wir einen Handler für das CallAlerting- Ereignis hinzu, um den Videoanruf vom Webclient zu verarbeiten (ja, wir werden bald darauf zugreifen ). Zunächst fügen wir dem Handler einen Aufruf der Methode createStreamingAgent hinzu . Die Methode hat die folgenden Parameter, die meisten sind erforderlich, optional sind separat gekennzeichnet:

  • Protokoll - bisher wird nur RTMP unterstützt;
  • URL - Server URL, siehe Schritt 1;
  • streamName - Streamname / -schlüssel , siehe Schritt 1;
  • applicationName (optional) - Teil von streamName, z. B. live2. Verwenden Sie diese Option, wenn die ausgewählte Plattform dies erfordert.
  • keyframeInterval (optional, Sekunden) - wie oft ein Keyframe im Stream generiert wird. Wenn nicht angegeben, ist der Standardwert 2.

In der obigen Skriptliste sieht der Aufruf der Methode createStreamingAgent folgendermaßen aus:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 });

Wir können keyframeInterval jedoch weglassen und applicationName wie folgt verwenden:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" });

Nachdem das Streaming-Objekt erstellt wurde, verarbeitet das Skript den Aufruf im Handler weiter. Der nächste Schritt besteht darin, den eingehenden Videostream vom Webclient zum erstellten Streaming-Objekt zu leiten:

 e.call.sendMediaTo(streaming);

Dann verwenden wir alle möglichen Streaming-Ereignisse zum Debuggen: Die Handler senden lediglich Informationen an das Voximplant-Sitzungsprotokoll. Sie können diesen Code nicht verwenden, wenn Sie möchten.

Nach der Verarbeitung der Ereignisse beantwortet das Skript den eingehenden Anruf:

 e.call.answer();

Schließlich müssen wir das Ende des Streamings korrekt behandeln, wenn der Webclient das Senden des Videos beendet. Formal können wir diesen Handler auch nicht verwenden, aber die Sitzung endet erst nach 60 Sekunden, nachdem das Video nicht mehr gesendet wurde. Diese Erwartung macht keinen Sinn, daher ist es besser, die Sitzung ausgehend von getrennten Ereignissen zu beenden:

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); });

Wenn wir die Logik des Szenarios verstehen, sind wir bereit, den letzten - aber nicht zuletzt - Teil unserer Konfiguration zu starten.

4. Webclient


Klonen oder laden Sie unsere Videochat- Demo herunter. Wechseln Sie dann in den Repository-Ordner und öffnen Sie die Datei WebApp / JS / app.js in einem Texteditor / einer IDE. Ändern Sie den Namen der Anwendung in Zeile 5 und speichern Sie die Datei:


Eigentlich ist das alles.

5. Starten Sie das Streaming


Sie müssen den WebApp-Ordner lokal oder auf Ihrem Webserver ausführen. Zum lokalen Ausführen können Sie das Live-Server- Dienstprogramm oder die Webserver für Chrome- Anwendung verwenden. Wenn Sie den Webclient starten, müssen Sie ihm den Namen Ihres Voximplant-Kontos geben, zum Beispiel:
  http://127.0.0.1:8080/index.html#accname=johngalt


Geben Sie nach dem Starten des Clients das Login-Passwort-Paar aus Schritt 2 ein:


Geben Sie einen beliebigen Zeichensatz neben dem @ -Zeichen ein und drücken Sie Anrufen. Wenn alles richtig gemacht wurde, wird Ihr Stream bald beginnen :) Erfolgreiche Streams und produktive Entwicklung für Sie!

Source: https://habr.com/ru/post/de472402/

More articles:


All Articles