L'essor de WebBrTC et la capacité améliorée des navigateurs à gérer les communications point à point en temps réel facilitent la création d'applications en temps réel que jamais. Cet article explorera Simplewebrtc et son application dans la mise en ?uvre de la technologie WebBrTC et introduira d'autres alternatives qui peuvent atteindre le même objectif.

Si vous avez besoin de connaissances de base sur la communication WebBrTC et entre pairs, il est recommandé de lire "Dawn of WebBrTC" et "Introduction to GetUserMedia API".

En raison de la complexité de la création d'applications WEBRTC personnalisées, cet article ne fournira pas de tutoriels de construction étape par étape. Au lieu de cela, nous examinerons les types de bibliothèques et de serveurs nécessaires pour créer des applications fiables. Je fournirai un exemple complet de lien d'application à laquelle vous pouvez vous référer lors de la création de votre propre application.

Nous nous concentrerons principalement sur la plate-forme Simplewebrtc. Plus tard, nous couvrirons brièvement d'autres alternatives commerciales et open source qui peuvent vous aider à atteindre les mêmes objectifs.

Points clés

• weBrTC permet une communication directe en temps réel point à point au sein d'un navigateur Web, sans avoir besoin de plug-ins tiers, et prend en charge les navigateurs modernes tels que Chrome, Firefox et Safari.
• La signature dans WebBrTC (critique pour établir des connexions peer-to-peer) s'appuie sur des serveurs Stun et Turn pour contourner NAT (traduction d'adresses réseau) et des pare-feu pour garantir la connectivité dans diverses configurations de réseau.
• Simplewebrtc fournit une plate-forme complète pour construire et déployer des applications WebBrTC, fournissant des SDK, des services d'hébergement et une prise en charge technique pour faciliter la mise en ?uvre des solutions de chat vidéo personnalisées.
• Les alternatives à Simplewebrtc, telles que Daily.co et d'autres plates-formes commerciales, offrent différents degrés de facilité d'utilisation et d'options de personnalisation pour répondre aux besoins d'une configuration rapide pour des solutions entièrement de marque.
• Le déploiement des applications WebBrTC nécessite des considérations de fiabilité, de sécurité et de compatibilité des navigateurs du réseau, et la plate-forme commerciale simplifie de nombreuses complexités associées au développement personnalisé.

Qu'est-ce que WebBrTC?

weBrTC (web real-temps communication) est un projet open source qui permet une communication en temps réel point à point entre les navigateurs Web, la transmission de flux vidéo, audio et de données en temps réel sur le réseau. Google Chrome, Mozilla Firefox, Safari, l'opéra et d'autres navigateurs à base de chrome ont mis en ?uvre cette technologie de manière native. C'est une bonne nouvelle car les utilisateurs peuvent accéder à la technologie sans installer des plugins ou des applications tiers.

Les versions de navigateur plus anciennes et les navigateurs traditionnels tels que Internet Explorer n'ont pas cette technologie. Les utilisateurs doivent utiliser le dernier navigateur. Vous pouvez afficher la liste complète des navigateurs pris en charge:

En janvier 2021, la World Wide Web Alliance (W3C) a transformé la spécification WeBRTC 1.0 d'un état de recommandation candidat à un état recommandé. Il s'agit d'une réalisation extraordinaire étant donné que la technologie a été publiée pour la première fois il y a 10 ans.

La spécification WebBrTC couvre la fa?on dont les navigateurs accèdent aux appareils multimédias locaux et comment ils utilisent un ensemble de protocoles en temps réel pour transmettre des supports et des données d'application courantes au navigateur. Il le fait à travers un ensemble d'API JavaScript qui ont été couverts dans l'article précédent. La spécification garantit également que toutes les communications sont chiffrées et que des tiers indésirables ne peuvent pas écouter sur les flux.

Il convient de noter que WebBrTC ne couvre pas tout, comme la signalisation, le processus de démarrage d'une connexion entre les navigateurs. Pour éviter de nouvelles limitations techniques potentielles, cette partie du contenu est omise de la spécification. La deuxième raison est que WebBrTC est principalement la technologie du client, et il est préférable d'utiliser la technologie du serveur pour faire face à des problèmes tels que des sessions.

Comment fonctionne la signalisation du navigateur

webrtc est défini comme une communication point à point entre les navigateurs Web. La réalité est que la plupart des navigateurs fonctionnent sur des ordinateurs situés derrière les appareils NAT (traduction d'adresses réseau) (pare-feu en option). Les appareils NAT (généralement des routeurs ou des modems) permettent aux ordinateurs avec des adresses IP privées de se connecter à Internet via une seule adresse IP publique.

Les appareils NAT protègent les ordinateurs personnels contre les attaques directes des utilisateurs malveillants sur Internet via des adresses IP. Malheureusement, il empêche également les appareils avec des adresses IP privées de se connecter à un autre appareil IP privé sur Internet.

Pour surmonter ce défi, le Force de travail d'ingénierie Internet (IETF) a proposé le protocole Ice (Interactive Connection Impablishment), permettant aux ordinateurs IP privés de découvrir et de se connecter à d'autres ordinateurs privés sur les réseaux publics.

Cela implique d'utiliser un serveur de signalisation public, auquel les deux clients peuvent facilement se connecter. L'ordinateur homologue se connecte à ce serveur et l'utilise pour échanger les adresses IP et les ports requis par la source de données et le récepteur. Avec ces informations, ils peuvent établir une connexion directe les unes avec les autres et commencer à transmettre la vidéo, l'audio et les données.

Il s'agit d'une démonstration d'animation:

Description de l'image: la signalisation WebBrtc

Pour configurer la signalisation WebBrTC, le cadre de glace vous oblige à fournir les deux types de serveurs suivants.

1.

STOM (Session Traversal Utility for NAT) Server fonctionne comme je l'ai décrit ci-dessus. Il fournit simplement un espace de réunion pour que les ordinateurs échangent des coordonnées. Une fois l'échange d'informations terminé, une connexion est établie entre les ordinateurs homologues et le serveur Stund quitte le reste de la conversation.

Il s'agit d'un exemple de script exécuté sur le client, permettant au navigateur d'initier une connexion via le serveur Stun. Ce script permet à plusieurs URL de serveur Stun Stunf. lorsque l'un des serveurs échoue:

Les connexions

function createPeerConnection() {
  myPeerConnection = new RTCPeerConnection({
    iceServers: [
      {
        urls: "stun:stun.stunprotocol.org",
      },
    ],
  });
}

établies par les serveurs Stun sont le type de communication le plus idéal et le plus rentable de la communication WebBrTC. Les utilisateurs n'engurent guère de co?ts de fonctionnement. Malheureusement, comme chaque pair utilise un type différent de périphérique NAT, les connexions de certains utilisateurs peuvent ne pas être établies. Dans ce cas, le protocole ICE vous oblige à fournir un secours, un type de serveur de signalisation différent appelé serveur de virage.

2.

Turn (Travelling with Relay Nat) Server est une extension du serveur Stun. Ce qui le rend différent de son prédécesseur, c'est qu'il gère toute la session de communication.

Fondamentalement, après avoir établi une connexion entre les pairs, il re?oit un flux d'un pair et le transmet à un autre pair et vice versa. Ce type de communication est plus cher et l'h?te doit payer la charge de traitement et de bande passante requise pour exécuter le serveur de virage.

Ce qui suit est une description graphique impliquant l'intégralité du processus de signalisation impliquant d'abord le serveur Stun, puis le serveur de virage en tant que repli:

Description de l'image: montre un diagramme architectural complet de l'ensemble du processus WebBrTC.

créer une application de chat vidéo personnalisée

Bien qu'il soit possible de configurer votre propre solution de chat vidéo à l'aide du code JavaScript Pure et d'un serveur STAUS public gratuit, tout le monde ne peut pas se connecter les uns aux autres sur votre plate-forme. Si vous souhaitez fournir des services fiables à tous les utilisateurs, vous devez utiliser un serveur de virage.

Comme mentionné précédemment, la configuration d'une plate-forme WebBrTC peut être compliquée. Heureusement, nous avons une plate-forme commerciale tout-en-un qui fait de la création d'applications de chat vidéo WebBrTC un jeu d'enfant. Voyons maintenant comment Simplewebrtc peut soulager notre fardeau.

Qu'est-ce que Simplewebrtc?

Simplewebrtc est une plate-forme qui fournit aux développeurs un service simple et rentable pour créer et déployer des applications en temps réel personnalisées à l'aide de React. Plus précisément, ils fournissent les éléments suivants:

SDK Simplewebrtc: une bibliothèque frontale
H?te: Stun / Turn et SFU (Unité de transfert sélective) Server
Support technique
Développement des applications personnalisés et services de conseil Webrtc
Locataire unique et infrastructure locale
talky: une application de chat vidéo gratuite construite entièrement avec Simplewebrtc

Voici des exemples de captures d'écran de certains projets de chat vidéo personnalisés qu'ils ont aidé les clients à développer et à lancer.

Description de l'image: Talky

Description de l'image: Application de tutorat Web

Les principaux services webrtc fournis par la plate-forme Simplewebrtc incluent:

Transfert de sécurité du partage vidéo, vocal et écran
cryptage de bout en bout
Prise en charge jusqu'à 30 utilisateurs simultanés
salle infinie

En termes de prix, ils offrent les plans suivants:

• petit groupe: jusqu'à 6 participants, à partir de 5 $ par mois
• grand groupe: jusqu'à 30 participants, à partir de 3 $ par mois

L'avantage des plans en petits groupes est que le chiffrement de bout en bout peut être utilisé, tandis que les plans de grand groupe ne le peuvent pas. Dans un plan en petit groupe, 60 à 80% des sessions sont des connexions pair-to-peer et les flux multimédias ne touchent jamais le serveur. Il n'y a pas de frais pour la consommation de bande passante pour de telles sessions.

Pour les plans de grand groupe, le trafic est acheminé via un serveur appelé SFU (unité de transfert sélective), et tout le trafic est mesuré.

Il convient de noter que la plupart des alternatives commerciales (que nous décrirons brièvement plus tard) utilisent facturé par minute . à première vue, cela semble assez abordable. Cependant, vous facturez des connexions peer-to-peer, et Simplewebrtc est disponible gratuitement.

(Le contenu suivant sera simplifié en raison de la durée de l'article, et les informations de base et les exemples de code seront conservées. Veuillez vous référer au document d'origine pour le texte original complet.)

Prérequis

La bibliothèque client Simplewebrtc repose sur les écosystèmes React et Redux. Vous avez besoin de compétences de base:

• react
• redux
• bibliothèques Redux asynchrones - telles que Redux Thunk, Redux Saga et Redux observables

Configurez un compte

Obtenez la page d'enregistrement de Simplewebrtc.com et enregistrez un nouveau compte. Vous obtenez 2 Go de bande passante, et si vous vous inscrivez à leur newsletter, vous obtenez 3 Go supplémentaires de bande passante. Ce quota devrait être suffisant pour développer et tester votre application de chat vidéo.

Après votre inscription, vous devez confirmer votre adresse e-mail. Après avoir terminé cette étape, vous devriez être sur la page de tableau de bord où vous recevrez votre clé API.

Utilisez cette clé API, vous pouvez commencer à créer votre propre application WebBrTC personnalisée. Dans la section suivante, nous exécuterons l'exemple d'application complète construite par l'équipe Simplewebrtc.

Créer et exécuter Exemple d'application

(l'échantillon de code est rationalisé)

Déploiement

(étapes de déploiement simplifiées)

Alternatives à Simplewebrtc

(une brève introduction aux alternatives)

Conclusion

Quoi qu'il en soit, il est plus facile de créer une solution de chat vidéo en direct avec WebBrTC à l'aide d'une plate-forme commerciale. L'adoption d'un itinéraire open source est possible, mais vous devez héberger votre propre serveur de tour pour assurer une connexion fiable pour tous les utilisateurs. Dans les deux cas, le processus de construction peut prendre beaucoup de temps compte tenu de la complexité relative de l'application de l'échantillon que nous avons vu.

La question clé à vous poser est de savoir si la construction de votre propre solution en temps réel personnalisée vaut votre temps. à moins que vous ne prévoyiez d'utiliser WeBrTC comme principale entreprise, vous devrez peut-être d'abord consulter une entreprise avec une expérience dans la gestion de cette technologie.

(la pièce FAQ est rationalisée)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!