{"id":30842,"date":"2019-10-31T21:37:44","date_gmt":"2019-10-31T18:37:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb\/"},"modified":"2021-02-01T11:37:06","modified_gmt":"2021-02-01T09:37:06","slug":"ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/administrirovanie\/ot-skype-do-webrtc-kak-my-organizovali-videosvyaz-cherez-veb","title":{"rendered":"De Skype \u00e0 WebRTC : comment nous avons organis\u00e9 la communication vid\u00e9o via le web","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"De<\/p>\n

La visioconf\u00e9rence est le principal moyen de communication entre l'enseignant et l'\u00e9tudiant sur la plateforme Vimbox. Nous avons longtemps abandonn\u00e9 Skype, test\u00e9 plusieurs solutions tierces et finalement nous nous sommes arr\u00eat\u00e9s sur l'association WebRTC - Janus-gateway. Pendant un certain temps, tout allait bien, mais certains probl\u00e8mes n\u00e9gatifs continuaient \u00e0 survenir. Finalement, une direction distincte pour la vid\u00e9o a \u00e9t\u00e9 cr\u00e9\u00e9e.<\/p>\n

J'ai demand\u00e9 \u00e0 Kirill Rogovoy, le responsable de la nouvelle direction, de parler de l'\u00e9volution de la visioconf\u00e9rence chez Skyeng, des probl\u00e8mes d\u00e9tect\u00e9s, des solutions et des astuces que nous avons finalement adopt\u00e9es. Nous esp\u00e9rons que cet article sera utile pour les entreprises qui mettent \u00e9galement en place des vid\u00e9os via une application web.<\/p>\n

<\/a><\/noindex><\/p>\n

Un peu d'histoire<\/h2>\n

\u00c0 l'\u00e9t\u00e9 2017, le responsable du d\u00e9veloppement de Skyeng, Sergey Safonov, a pris la parole lors de la Backend Conf pour raconter comment nous avons \"abandonner Skype et introduit WebRTC\". Ceux qui le souhaitent peuvent voir l'enregistrement de sa pr\u00e9sentation \u00e0 le lien<\/a><\/noindex> (~45 min), et ici je vais en r\u00e9sumer l'essence.<\/p>\n

Pour l'\u00e9cole Skyeng, la visioconf\u00e9rence a toujours \u00e9t\u00e9 le moyen de communication prioritaire entre l'enseignant et l'\u00e9l\u00e8ve. Au d\u00e9but, nous utilisions \"Skype\", mais il ne r\u00e9pondait absolument pas \u00e0 nos besoins pour un certain nombre de raisons, principalement en raison de l'absence de journaux et de l'impossibilit\u00e9 d'int\u00e9gration directement dans l'application web. Nous avons donc men\u00e9 divers exp\u00e9rimentations.<\/p>\n

En fait, nos exigences pour la visioconf\u00e9rence \u00e9taient \u00e0 peu pr\u00e8s les suivantes :
\n\u2014 stabilit\u00e9 ;
\n\u2014 co\u00fbt bas par cours ;
\n\u2014 enregistrement des cours ;
\n\u2014 suivi de qui parle combien (il est important pour nous que les \u00e9l\u00e8ves parlent plus que l'enseignant pendant les cours) ;
\n\u2014 mise \u00e0 l'\u00e9chelle lin\u00e9aire ;
\n\u2014 possibilit\u00e9 d'utiliser \u00e0 la fois UDP et TCP.<\/p>\n

Nous avons d'abord essay\u00e9 d'int\u00e9grer Tokbox en 2013. Tout allait bien, mais cela revenait tr\u00e8s cher - 113 roubles par le\u00e7on - et r\u00e9duisait les b\u00e9n\u00e9fices.<\/p>\n

Ensuite, en 2015, nous avons int\u00e9gr\u00e9 Voximplant. Ce service offrait la fonction n\u00e9cessaire pour suivre qui parle combien, et de plus, la solution \u00e9tait beaucoup moins co\u00fbteuse : avec l'enregistrement seulement audio, cela co\u00fbtait 20 roubles par cours. Cependant, il ne fonctionnait qu'avec UDP et ne pouvait pas passer \u00e0 TCP. N\u00e9anmoins, environ 40 % des \u00e9l\u00e8ves l'utilisaient finalement.<\/p>\n

Au bout d'un an, nous avons commenc\u00e9 \u00e0 attirer des clients corporatifs avec des exigences sp\u00e9cifiques. Par exemple, tout doit fonctionner via le navigateur, la soci\u00e9t\u00e9 n'ouvre que http et https ; c'est-\u00e0-dire pas de \u00ab Skype \u00bb ni de UDP. Les clients corporatifs = argent, donc nous sommes revenus \u00e0 Tokbox, mais le probl\u00e8me du prix est rest\u00e9.<\/p>\n

La solution \u2014 WebRTC et Janus<\/h2>\n

Nous avons d\u00e9cid\u00e9 d'utiliser la plateforme de vid\u00e9oconf\u00e9rence peer-to-peer bas\u00e9e sur WebRTC<\/a><\/noindex>. Elle est responsable de l'\u00e9tablissement des connexions, de l'encodage et du d\u00e9codage des flux, de la synchronisation des pistes et du contr\u00f4le de qualit\u00e9 avec le traitement des probl\u00e8mes de r\u00e9seau. De notre c\u00f4t\u00e9, nous devons assurer la lecture des flux de la cam\u00e9ra et du microphone, le rendu vid\u00e9o, la gestion des connexions, l'\u00e9tablissement de la connexion WebRTC et le passage des flux \u00e0 celle-ci, ainsi que l'\u00e9change de messages de signalisation entre les clients pour \u00e9tablir la connexion (WebRTC ne d\u00e9crit que le format des donn\u00e9es, mais pas le m\u00e9canisme de leur transmission). Si les clients se trouvent derri\u00e8re un NAT, WebRTC se connecte \u00e0 des serveurs STUN ; si cela ne fonctionne pas, des serveurs TURN.<\/p>\n

Une simple connexion p2p ne nous suffit pas, car nous voulons enregistrer les le\u00e7ons pour une analyse ult\u00e9rieure en cas de plaintes. Ainsi, nous envoyons les flux WebRTC via un relais Janus Gateway de Meetecho<\/a><\/noindex>. Ainsi, les clients ne connaissent pas les adresses des autres, ne voyant que l'adresse du serveur Janus ; celui-ci remplit \u00e9galement les fonctions de serveur de signalisation. Janus a de nombreuses fonctionnalit\u00e9s dont nous avons besoin : il passe automatiquement en TCP si UDP est bloqu\u00e9 chez le client ; il peut enregistrer des flux en UDP et en TCP ; il est scalable ; et il y a m\u00eame un plugin int\u00e9gr\u00e9 pour les tests d'\u00e9cho. Si n\u00e9cessaire, les serveurs STUN et TURN de Twilio se connectent automatiquement.<\/p>\n

\u00c0 l'\u00e9t\u00e9 2017, nous avions deux serveurs Janus plus un serveur suppl\u00e9mentaire pour traiter les fichiers bruts audio et vid\u00e9o enregistr\u00e9s, afin de ne pas utiliser les processeurs des serveurs principaux. Lors de la connexion, les serveurs Janus \u00e9taient s\u00e9lectionn\u00e9s selon le principe pair-impair (num\u00e9ro de connexion). \u00c0 cette \u00e9poque, cela \u00e9tait suffisant, selon nos estimations, cela offrait environ quatre fois la marge de s\u00e9curit\u00e9, le taux d'impl\u00e9mentation \u00e9tait d'environ 80. Le prix a \u00e9t\u00e9 r\u00e9duit \u00e0 environ 2 roubles par le\u00e7on, plus le d\u00e9veloppement et la maintenance.<\/p>\n

\"De<\/p>\n

Retour au sujet de la vid\u00e9oconf\u00e9rence<\/h2>\n

Nous surveillons en permanence les retours des \u00e9l\u00e8ves et des enseignants afin de d\u00e9tecter et d'\u00e9liminer les probl\u00e8mes \u00e0 temps. \u00c0 l'\u00e9t\u00e9 2018, la qualit\u00e9 de la connexion s'est clairement impos\u00e9e comme la principale plainte. D'une part, cela signifiait que nous avions r\u00e9ussi \u00e0 surmonter d'autres d\u00e9fauts. D'autre part, il fallait agir rapidement : en cas d'interruption d'un cours, nous risquons de perdre son co\u00fbt, parfois avec celui de l'achat du prochain package, et en cas d'interruption d'une s\u00e9ance d'introduction, de perdre compl\u00e8tement un client potentiel.<\/p>\n

\u00c0 ce moment-l\u00e0, notre vid\u00e9oconf\u00e9rence fonctionnait toujours en mode MVP. Autrement dit, nous avons lanc\u00e9, cela a fonctionn\u00e9, nous l'avons mis \u00e0 l'\u00e9chelle une fois, compris comment le faire - et tant mieux. If it works, don\u2019t fix it. Personne ne s'occupait sp\u00e9cifiquement de la qualit\u00e9 de la connexion. En ao\u00fbt, il est devenu clair que cela ne pouvait plus continuer ainsi, et nous avons lanc\u00e9 une direction distincte pour comprendre ce qui n'allait pas avec WebRTC et Janus.<\/p>\n

En entr\u00e9e, cette direction a re\u00e7u : une solution MVP, pas de m\u00e9triques, pas d'objectifs, pas de processus d'am\u00e9lioration, sachant que 7 % des enseignants se plaignaient de la qualit\u00e9 de la connexion (il n'y avait pas de donn\u00e9es sur les \u00e9l\u00e8ves non plus).<\/p>\n

\"De<\/p>\n

La nouvelle direction se met au travail<\/h2>\n

L'\u00e9quipe est \u00e0 peu pr\u00e8s comme suit :<\/p>\n