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
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.
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",
},
],
});
}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éeComme 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:
Description de l'image: Talky
Description de l'image: Application de tutorat Web
Les principaux services webrtc fournis par la plate-forme Simplewebrtc incluent:
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.)
La bibliothèque client Simplewebrtc repose sur les écosystèmes React et Redux. Vous avez besoin de compétences de base:
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.
(l'échantillon de code est rationalisé)
(étapes de déploiement simplifiées)
(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!
Pourquoi n'y a-t-il aucune réponse lorsque des écouteurs sont branchés sur l'ordinateur ?
Que dois-je faire si la vidéo Web ne peut pas être ouverte ?
Comment résoudre les erreurs de paramètres de disque
Quel logiciel est Autocad ?
Pourquoi mon téléphone n'est-il pas éteint mais lorsque quelqu'un m'appelle, il me demande de l'éteindre ?
Quel est le nom de l'application de télécommunications ?
Comment supprimer des pages vierges dans Word
Comment basculer entre les systèmes doubles Huawei
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
