Geekly articles weekly

Streaming d'appels vidéo RTMP


Aujourd'hui, les plateformes de streaming sont au sommet de leur popularité, car des millions de personnes talentueuses partagent régulièrement leurs connaissances - lisez, elles utilisent le streaming au maximum. Alors que ce marché se développe, de nombreuses applications peuvent diffuser des vidéos en direct à l'aide d'un smartphone ou d'une caméra d'ordinateur portable. Vous souhaitez peut-être également introduire une telle fonctionnalité dans votre application; si c'est le cas, alors nous nous empressons de faire plaisir - maintenant Voximplant vous permet de transférer des appels vidéo via RTMP vers n'importe quel CDN qui prend en charge ce protocole.

Cette fonctionnalité est rendue possible par le nouveau module Voxengine - StreamingAgent . Sous la coupe vous attendez 5 étapes pour configurer cette intégration, bienvenue!

Schéma



Un appel vidéo à partir d'une application mobile / Web ou SIP arrive sur notre cloud, qui le dirige vers un CDN en streaming. À son tour, le CDN envoie des flux audio et vidéo aux utilisateurs finaux - comme il le fait habituellement. Veuillez noter que RTMP prend uniquement en charge H.264, il est donc très important de spécifier explicitement ce codec lors de la diffusion.

Vous aurez besoin


  • un compte sur un service de streaming, par exemple, Twitch ou Youtube ;
  • Compte Voximplant. Si vous ne l'avez pas, l' inscription se fait ici ;
  • Application Voximplant, ainsi qu'un script, une règle et un seul utilisateur. Nous allons créer tout cela dans ce tutoriel;
  • client web pour capturer la vidéo et l'audio - nous utiliserons notre vidéochat de démonstration

1. Paramètres de streaming


Tout d'abord, vous devrez obtenir les valeurs de deux paramètres, que nous utilisons dans le script cloud - nom / clé de flux et URL du serveur . Ce qui suit montre comment obtenir ces valeurs en utilisant Twitch et YouTube comme exemples.

Twitch


Connectez-vous à votre compte, cliquez sur l'image de profil dans le coin supérieur droit et sélectionnez Producteur vidéo.



Dans la section Paramètres, sélectionnez Canal, puis cliquez sur Copier en haut de la page pour obtenir votre clé de flux principale. Veuillez noter que la clé n'est disponible qu'avec l'authentification à deux facteurs activée. Collez cette valeur dans votre éditeur de texte ou laissez simplement cette page ouverte pour copier la valeur ultérieurement.

Pour trouver l'URL du serveur, accédez à la page stream.twitch.tv/ingests , sélectionnez l'un des serveurs recommandés et copiez-le sans la dernière barre oblique, par exemple: rtmp: //live-sfo.twitch.tv/app

YouTube


Connectez-vous à votre compte, cliquez sur l'avatar dans le coin supérieur droit et sélectionnez YouTube Studio (bêta).



Si vous n'avez pas de chaîne YouTube, une boîte de dialogue apparaîtra sur la création d'une chaîne. Cliquez sur Créer une chaîne et vous verrez un tableau de bord de la chaîne créée avec une notification indiquant que le streaming sera possible dans les 24 heures.



Dans YouTube Studio, accédez à Autres fonctionnalités -> Diffusion en direct maintenant via le menu de gauche. Une nouvelle page s'ouvre, au bas de laquelle se trouve le bloc de configuration Encoder. À partir de là, vous devez prendre l'URL du serveur et les valeurs de nom / clé de flux (ou laisser la page ouverte).



2. Paramètres VOXIMPLANT


Vous devez maintenant effectuer les réglages depuis le côté de Voximplant. Connectez-vous d'abord à votre compte: https://manage.voximplant.com/auth . Dans le menu de gauche, cliquez sur «Applications», puis sur «Nouvelle application» et créez une application appelée streaming. Allez dans la nouvelle application, passez dans l'onglet «Scripts» pour créer un script startStream avec ce code (n'oubliez pas de substituer les valeurs de l'étape précédente aux lignes 8 et 9):

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

Il s'agit d'un script simple qui lance un flux et surveille également tous ses états possibles, tels que: connecté, échec de connexion, StreamStarted, etc. - Les détails du script seront légèrement inférieurs. Vous devez maintenant aller dans l'onglet «Routage» de votre application et cliquer sur «Nouvelle règle». Nommez-le streamRule, spécifiez le script startStream et laissez le masque par défaut (. *).


La dernière chose à faire à ce stade est de créer un utilisateur. Allez dans l'onglet «Utilisateurs», cliquez sur «Créer un utilisateur», spécifiez un nom (par exemple, utilisateur1) et un mot de passe, puis cliquez sur «Créer». Nous aurons besoin de cette paire nom d'utilisateur / mot de passe pour l'authentification dans le client Web.


La configuration de Voximplant est terminée, mais avant de passer au client Web, je propose de comprendre comment fonctionne le module StreamingAgent dans notre scénario.

3. Le scénario


Le module StreamingAgent permet aux développeurs de lancer des flux RTMP vers des plateformes de stimulation populaires. Pour utiliser la fonctionnalité du module, nous devons le connecter au tout début du script:

 require(Modules.StreamingAgent);

Ensuite, vous devez spécifier explicitement le codec qui sera utilisé lors du streaming. Étant donné que de nombreuses plates-formes (y compris Twitch et YouTube) utilisent RTMP, qui, à son tour, prend en charge H.264, voici ce que nous indiquerons:

 VoxEngine.setVideoCodec("H264");

Si le codec n'est pas spécifié, l'événement StreamingAgentEvents.StreamError peut être déclenché , contenant le texte d'erreur:
 "Video codec mismatch. " + codecName + " granted, but should be H.264"

Ensuite, nous ajoutons un gestionnaire pour l'événement CallAlerting pour gérer l'appel vidéo du client Web (oui, nous y arriverons bientôt). Tout d'abord, nous allons ajouter un appel à la méthode createStreamingAgent au gestionnaire . La méthode a les paramètres suivants, la plupart d'entre eux sont obligatoires, facultatifs sont marqués séparément:

  • protocole - jusqu'à présent, seul RTMP est pris en charge;
  • url - URL du serveur, voir l'étape 1;
  • streamName - nom / clé du flux, voir l'étape 1;
  • applicationName (facultatif) - partie de streamName, par exemple live2. Utilisez cette option si la plate-forme sélectionnée l'exige;
  • keyframeInterval (facultatif, secondes) - la fréquence à laquelle une image clé sera générée dans le flux. S'il n'est pas spécifié, la valeur par défaut est 2.

Dans la liste de scripts ci-dessus, l'appel à la méthode createStreamingAgent ressemble à ceci:

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

Mais nous pouvons omettre keyframeInterval et utiliser applicationName, comme ceci:

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

Une fois l'objet en continu créé, le script continue de traiter l'appel à l'intérieur du gestionnaire. L'étape suivante consiste à diriger le flux vidéo entrant du client Web vers l'objet de streaming créé:

 e.call.sendMediaTo(streaming);

Ensuite, nous utilisons tous les événements de streaming possibles pour le débogage: les gestionnaires ne font rien mais envoyer des informations au journal de la session Voximplant. Vous ne pouvez pas utiliser ce morceau de code si vous le souhaitez.

Après avoir traité les événements, le script répond à l'appel entrant:

 e.call.answer();

Enfin, nous devons gérer correctement la fin du streaming lorsque le client Web cesse d'envoyer la vidéo. Formellement, nous ne pouvons pas non plus utiliser ce gestionnaire, mais la session ne se terminera qu'après 60 secondes après l'arrêt de l'envoi de la vidéo. Il n'y a aucun sens dans cette attente, il est donc préférable de mettre fin à la session, à partir des événements déconnectés :

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

Comprenant la logique du scénario, nous sommes prêts à démarrer la dernière - mais non la moindre - partie de notre configuration.

4. Client Web


Clonez ou téléchargez notre démo de vidéochat . Accédez ensuite au dossier du référentiel et ouvrez le fichier WebApp / JS / app.js dans un éditeur de texte / IDE. Modifiez le nom de l'application sur la ligne 5 et enregistrez le fichier:


En fait, c'est tout.

5. Commencez à diffuser


Vous devez exécuter le dossier WebApp localement ou sur votre serveur Web. Pour exécuter localement, vous pouvez utiliser l'utilitaire live-server ou l'application Web Server for Chrome . Lors du démarrage du client Web, vous devez lui donner le nom de votre compte Voximplant, par exemple:
  http://127.0.0.1:8080/index.html#accname=johngalt


Après avoir lancé le client, entrez la paire login-mot de passe de l'étape 2:


Saisissez n'importe quel jeu de caractères à côté du signe @ et appuyez sur Appeler. Si tout a été fait correctement, votre stream commencera bientôt :) Streams réussis et développement productif pour vous!

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

More articles:


All Articles