Comme tâche, il a été décidé de créer une application simple qui permet des appels audio-vidéo entre deux (pour l'instant) appareils fixes ou mobiles dans un réseau local sans avoir besoin de se connecter à Internet. L'installation et la configuration initiale d'une telle application doivent être suffisamment simples pour que tout enikey avancé puisse la gérer sans aucun problème et montrer aux utilisateurs comment passer des appels, et s'il a les compétences appropriées, il pourrait apporter des améliorations mineures en termes de conception et de capacités. Le client doit être tout appareil équipé de périphériques d'entrée-sortie multimédia et vous permettant d'exécuter un navigateur approprié (Firefox ou Chrome - test en mai, semble-t-il, versions).
Comment est-il fait
Comme vous le savez, la technologie WebRTC pour la communication entre deux abonnés suggère d'utiliser un objet de type RTCPeerConnection, et la tâche principale du développeur est d'organiser l'échange d'informations textuelles (offre SDP, réponse SDP, ICE-candidat) entre l'appelant et l'appelé. En d'autres termes, le développeur doit d'abord créer un chat textuel avec une API pour le navigateur JavaScript, puis y attacher la partie multimédia - événements RTCPeerConnection et méthodes de transmission et de traitement de réception de données.
Le choix des technologies de mise en œuvre et de l'API de chat textuel appartient au développeur. Beaucoup (et en particulier Mozilla dans leur exemple officiel de RTCPeerConnection) préfèrent utiliser l'API WebSocket et le serveur correspondant - par exemple, sur Node.JS. Mais, compte tenu de notre tâche de rendre le déploiement aussi simple que possible, j'ai décidé de ne pas trop compliquer l'application serveur, en particulier pour livrer des pages et des scripts à la machine cliente, un serveur Web supplémentaire était nécessaire. Par conséquent, l'API a décidé d'utiliser xmlHttpRequest avec des appels clients périodiques vers le même serveur Web. Je ne peux pas dire que cela fonctionne parfaitement en termes de consommation de ressources (et de batterie) de l'appareil client et d'absence de freins, mais cela fonctionne exactement si certaines nuances sont prises en compte lors du développement. Peut être,dans une prochaine version, j'ajouterai un serveur WebSocket et redéfinirai l'API en conséquence, mais pas tout à la fois.
Il a été décidé de créer la partie serveur sur Lazarus pour Windows; les capacités de mise en réseau sont fournies par le package Synapse. À certains égards, c'est probablement une perversion, et j'ai dû sérieusement bricoler et obtenir quelques bosses pour que tout fonctionne comme prévu. Mais un exe, deux dll (bibliothèques OpenSSL), des fichiers d'un certificat SSL auto-signé et une clé pour celui-ci et quelques fichiers de configuration (plus statiques) vous permettent de ne pas vous soucier beaucoup du niveau de technologie du serveur et de la façon dont l'application est lancée. J'ai testé la première version de ce serveur en version 32 bits même sur un Asus Eee PC 900 de 2009 version sous Windows XP, même si ce n'était pas sans triche sous la forme d'un remplacement récent du SSD super lent régulier par un plus moderne et volumineux. C'est en termes de performances. Et "l'installation" du serveur décompresse l'archive zip téléchargée dans n'importe quel dossier approprié,éditer le fichier JSON de la configuration des comptes utilisateurs et lancer le fichier exe du programme (il y a aussi un bouton dans la fenêtre, mais vous pouvez spécifier un paramètre sur la ligne de commande pour démarrer immédiatement le serveur Web). D'une manière ou d'une autre, je pense à une partie serveur plus sérieuse, car j'ai une telle expérience. Chaque chose en son temps.
En plus de l'organisation réelle de l'API, notre serveur sert des fichiers statiques pour les navigateurs (pages Web de connexion et de discussion, styles, images, scripts, sonnerie). En général, j'ai essayé de me passer des bibliothèques tierces autant que possible, mais en raison du fait que ma conception et ma mise en page html ne sont pas si chaudes, j'ai décidé d'utiliser jQuery.UI et, par conséquent, jQuery, que le serveur Web envoie également en tant que statique. Tous les fichiers statiques se trouvent dans un sous-dossier distinct du dossier du programme; ils peuvent bien sûr être regardés et même modifiés si on le souhaite et avec les compétences appropriées. En JavaScript, le code est commenté et vous pouvez en tirer des leçons si nécessaire.
Comment organiser la communication
Pour organiser la communication, l'essentiel est de sélectionner et de combiner des appareils clients (ordinateurs, ordinateurs portables, smartphones, tablettes) et une machine Windows avec un «serveur» (il peut également agir comme client) dans un réseau commun. A partir d'appareils clients, j'ai testé plusieurs smartphones bon marché sortis ces dernières années sur Android à partir de la version 7, ainsi qu'un ordinateur et un ordinateur portable sous Windows 10, y compris avec deux caméras Web connectées; ils ont bien performé. Pour le plaisir, j'ai même testé la première version sur Orange Pi One avec Lubuntu (ou Kubuntu, je ne me souviens pas tout de suite) du fabricant. Étonnamment, cela a même fonctionné, même si la vidéo a ralenti et que la page de discussion a été ouverte pendant un rien de temps (je ne veux même pas parler de chargement du système et d'ouverture du navigateur).
Notre serveur est installé sur la machine "serveur" de la manière décrite ci-dessus et les comptes utilisateurs sont configurés. Chaque utilisateur doit recevoir un identifiant avec un mot de passe.
Tout fonctionne comme ça. Les utilisateurs entrent dans la machine à écrire «serveur» avec un navigateur via le protocole https, en utilisant son adresse IP ou son nom de domaine. Là, ils entrent leur nom d'utilisateur-mot de passe et accèdent à la page de discussion avec une liste de contacts. Lorsque vous cliquez sur un contact, une fenêtre de dialogue s'ouvre avec l'historique des messages texte (au fait, le serveur ne le stocke qu'en RAM, il ne peut pas encore être stocké dans un fichier), un champ pour un chat et un formulaire d'appel audio-vidéo avec des cases à cocher pour sélectionner l'audio et (ou) la vidéo. Pour passer un appel vidéo, l'utilisateur coche les cases appropriées, appuie sur le bouton d'appel et confirme l'autorisation au navigateur. L'abonné appelé commence à émettre une sonnerie et un formulaire de réponse s'ouvre avec les mêmes indicateurs. Après avoir cliqué sur le bouton de réponse, le navigateur demandera également l'autorisation d'accéder aux appareils multimédia. Ensuite, une fenêtre d'appel s'ouvre.
Je ne peux pas dire que j'ai beaucoup d'expérience de travail avec des logiciels de visioconférence, de consultation vidéo, etc., mais, par exemple, dans Google Hangouts sur un ordinateur (comme sur les appareils mobiles, je ne sais pas) je n'ai pas vu l'opportunité d'activer mon bien-aimé en plein écran, qui, en théorie, peut être nécessaire lors de consultations à distance lorsque vous avez besoin de bien voir ce que vous montrez à votre interlocuteur (par exemple, à travers la caméra arrière de votre smartphone). Dans ce chat, dans le dialogue d'appel, j'ai décidé de créer deux onglets avec la vidéo - l'interlocuteur et l'utilisateur lui-même. À partir de la version actuelle de l'onglet utilisateur, en plus de la vidéo elle-même, il existe des champs pour sélectionner une caméra et un microphone; vous pouvez modifier leurs valeurs à la volée pendant une conversation. Ce sera peut-être utile à quelqu'un.
Maintenant, je vais décrire brièvement les cônes remplis de développement; peut-être que cela aidera quelqu'un à développer et à déboguer ses solutions.
Fonctionnalités modernes du travail et de la mise en œuvre de WebRTC et généralement travailler avec le multimédia en JavaScript
Ici, brièvement; les détails peuvent être trouvés dans les commentaires dans le fichier javascript static / js / videoChat.js
- Chrome bien sûr, plus, peut-être, d'autres navigateurs vous permettent également de travailler avec getUserMedia uniquement sur des sites accessibles via HTTPS
- La liste des périphériques d'entrée audio et vidéo ne peut être obtenue qu'après un appel réussi à getUserMedia
- Le démarrage automatique de la lecture du son à l'aide de JavaScript (via la méthode play () de l'élément vidéo ou audio html) n'est possible qu'après que l'utilisateur montre l'activité sur le site - par exemple, clique sur un élément de contrôle.
- promise setLocalDescription , offer. RTCPeerConnection ICE-, .
- « » getUserMedia RTCPeerConnection. , , .
- De nombreuses descriptions de périphériques mobiles font référence à la propriété FacesMode pour sélectionner les caméras avant ou arrière. En fait, je ne sais pas comment dans les anciens appareils, mais dans ce chat sur les smartphones testés, la commutation fonctionne même sans utiliser cette propriété. Mais en tenant strictement compte de la clause 5.
La liste n'est probablement pas exhaustive. Je pense que beaucoup d'autres viendront au cours du développement ultérieur. Si quelqu'un sait comment contourner les restrictions et, en conséquence, simplifier le programme ou travailler avec, veuillez écrire dans les commentaires.
Développeur d'applications réseau Lazarus
Synapse ne prend actuellement en charge que les bibliothèques OpenSSL 1.0.x; en 1.1, beaucoup de choses sont déjà implémentées différemment, d'autres même les noms de bibliothèques. De plus, il ne suffit pas de simplement placer les DLL dans le dossier du programme. Vous avez également besoin d'un fichier de configuration (openssl.cnf), dont le chemin est défini via la variable d'environnement OPENSSL_CONF.
Où puis-je télécharger
Les distributions du programme pour Win32 et Win64 et le code source du côté serveur sur Lazarus sont disponibles sur la page du programme au lien www.lubezniy.ru/soft/videochat
PS: Au fait, est-ce que quelqu'un sait comment utiliser Lazarus pour automatiser la construction à partir de la même source deux exe différents - pour Win32 et Win64? Le compilateur croisé de Win64 à Win32 est opérationnel, mais la modification des options du projet à chaque fois n'est pas correcte.
PPS: Qui a essayé, partagez vos impressions dans les commentaires.