Als Aufgabe wurde beschlossen, eine einfache Anwendung zu erstellen, die Audio- und Videoanrufe zwischen zwei (bisher) stationären oder mobilen Geräten in einem lokalen Netzwerk ermöglicht, ohne eine Verbindung zum Internet herstellen zu müssen. Die Installation und Erstkonfiguration einer solchen Anwendung sollte so einfach sein, dass jeder fortgeschrittene Enikey problemlos damit umgehen und den Benutzern zeigen kann, wie man Anrufe tätigt. Wenn er über die entsprechenden Fähigkeiten verfügt, kann er geringfügige Verbesserungen in Bezug auf Design und Funktionen vornehmen. Der Client sollte jedes Gerät sein, das mit Multimedia-Eingabe- / Ausgabegeräten ausgestattet ist und es Ihnen ermöglicht, einen geeigneten Browser auszuführen (Firefox oder Chrome - anscheinend im Mai Versionen).
Wie wird es gemacht
Wie Sie wissen, schlägt die WebRTC-Technologie für die Kommunikation zwischen zwei Teilnehmern die Verwendung eines Objekts vom Typ RTCPeerConnection vor. Die Hauptaufgabe des Entwicklers besteht darin, den Austausch von Textinformationen (SDP-Angebot, SDP-Antwort, ICE-Kandidat) zwischen dem Anrufer und dem Angerufenen zu organisieren. Mit anderen Worten, der Entwickler muss zuerst einen Text-Chat mit einer API für Browser-JavaScript erstellen und dann den Multimedia-Teil daran anhängen - RTCPeerConnection-Ereignisse und Methoden zum Senden und Verarbeiten des Datenempfangs.
Die Auswahl der zu implementierenden Technologien und der Text-Chat-API verbleibt beim Entwickler. Viele (und insbesondere Mozilla in ihrem offiziellen Beispiel für RTCPeerConnection) bevorzugen die Verwendung der WebSocket-API und des entsprechenden Servers - beispielsweise auf Node.JS. Angesichts unserer Aufgabe, die Bereitstellung so einfach wie möglich zu gestalten, habe ich mich zunächst entschlossen, die Serveranwendung nicht zu komplizieren, insbesondere um Seiten und Skripte an das Clientgerät zu liefern. Es wurde ein zusätzlicher Webserver benötigt. Aus diesem Grund hat die API beschlossen, xmlHttpRequest für regelmäßige Clientaufrufe an denselben Webserver zu verwenden. Ich kann nicht sagen, dass dies in Bezug auf den Ressourcen- (und Batterie-) Verbrauch des Client-Geräts und das Fehlen von Bremsen perfekt funktioniert, aber es funktioniert genau, wenn einige Nuancen bei der Entwicklung berücksichtigt werden. Vielleicht,In einigen nächsten Versionen werde ich einen WebSocket-Server hinzufügen und die API entsprechend neu erstellen, aber nicht alle auf einmal.
Es wurde beschlossen, den Server unter Lazarus für Windows zu trennen. Netzwerkfunktionen werden vom Synapse-Paket bereitgestellt. In gewisser Hinsicht ist dies wahrscheinlich eine Perversion, und ich musste ernsthaft basteln und ein paar Beulen bekommen, damit alles wie beabsichtigt funktioniert. Eine Exe, zwei DLLs (OpenSSL-Bibliotheken), Dateien eines selbstsignierten SSL-Zertifikats und ein Schlüssel dazu sowie einige Konfigurationsdateien (plus statische) ermöglichen es Ihnen, sich nicht viel mit dem technischen Stand des Servers und der Art und Weise, wie die Anwendung gestartet wird, zu beschäftigen. Ich habe die erste Version dieses Servers in einem 32-Bit-Build sogar auf einem 2009er Asus Eee PC 900 unter Windows XP getestet, obwohl dies nicht ohne Cheat war, da kürzlich eine reguläre super langsame SSD durch eine modernere und umfangreichere ersetzt wurde. Dies ist in Bezug auf die Leistung. Und die "Installation" des Servers entpackt das heruntergeladene Zip-Archiv in einen geeigneten Ordner.Bearbeiten der JSON-Datei der Konfiguration von Benutzerkonten und Starten der exe-Datei des Programms (es gibt auch eine Schaltfläche im Fenster, Sie können jedoch einen Parameter in der Befehlszeile angeben, um den Webserver sofort zu starten). Auf die eine oder andere Weise denke ich über einen ernsthafteren Serverteil nach, da ich solche Erfahrungen habe. Alles zu seiner Zeit.
Zusätzlich zur eigentlichen Organisation der API stellt unser Server statische Dateien für Browser bereit (Anmelde- und Chat-Webseiten, Stile, Bilder, Skripte, Klingeltöne). Im Allgemeinen habe ich versucht, so weit wie möglich auf Bibliotheken von Drittanbietern zu verzichten. Da mein Design und mein HTML-Layout jedoch nicht so aktuell sind, habe ich mich für jQuery.UI und dementsprechend für jQuery entschieden, die der Webserver auch als statisch sendet. Alle statischen Dateien befinden sich in einem separaten Unterordner des Programmordners. Sie können natürlich auf Wunsch und mit den entsprechenden Fähigkeiten beobachtet und sogar geändert werden. In JavaScript wird der Code kommentiert, und Sie können bei Bedarf daraus lernen.
So organisieren Sie die Kommunikation
Um die Kommunikation zu organisieren, müssen hauptsächlich Clientgeräte (Computer, Laptops, Smartphones, Tablets) und ein Windows-Computer mit einem "Server" (der auch als Client fungieren kann) in einem gemeinsamen Netzwerk ausgewählt und kombiniert werden. Auf Clientgeräten habe ich mehrere kostengünstige Smartphones getestet, die in den letzten Jahren unter Android ab Version 7 veröffentlicht wurden, sowie einen Computer und einen Laptop unter Windows 10, darunter zwei angeschlossene Webkameras. sie haben sich gut geschlagen. Zum Spaß habe ich sogar die erste Version auf Orange Pi One mit Lubuntu (oder Kubuntu, an die ich mich nicht sofort erinnere) vom Hersteller getestet. Überraschenderweise hat es sogar funktioniert, obwohl das Video langsamer wurde und die Chat-Seite für keine Zeit geöffnet wurde (ich möchte nicht einmal über das Laden des Systems und das Öffnen des Browsers sprechen).
Unser Server wird auf die oben beschriebene Weise auf der Schreibmaschine "Server" installiert und Benutzerkonten werden konfiguriert. Jeder Benutzer muss sich mit einem Passwort anmelden.
Alles funktioniert so. Benutzer melden sich mit einem Browser über das https-Protokoll unter Verwendung ihrer IP-Adresse oder ihres Domänennamens bei der Schreibmaschine "Server" an. Dort geben sie ihr Benutzername-Passwort ein und gehen zur Chat-Seite mit einer Kontaktliste. Wenn Sie auf einen Kontakt klicken, wird ein Dialogfenster mit dem Verlauf der Textnachrichten (der Server speichert sie übrigens nur im RAM, sie können noch nicht in einer Datei gespeichert), einem Feld für einen Chat und einem Audio-Video-Anrufformular mit Kontrollkästchen zur Auswahl von Audio und (oder) Video geöffnet. Um einen Videoanruf zu tätigen, markiert der Benutzer die entsprechenden Kontrollkästchen, drückt die Anruftaste und bestätigt die Berechtigung für den Browser. Der angerufene Teilnehmer piept einen Klingelton und ein Antwortformular wird mit denselben Flags geöffnet. Nach dem Klicken auf die Antwortschaltfläche fordert der Browser auch die Erlaubnis zum Zugriff auf die Multimedia-Geräte an. Dann öffnet sich ein Anruffenster.
Ich kann nicht sagen, dass ich viel Erfahrung mit Software für Videokonferenzen, Videoberatung usw. habe, aber zum Beispiel in Google Hangouts auf einem Computer (wie auf Mobilgeräten weiß ich nicht) habe ich keine Gelegenheit gesehen, meine Geliebte im Vollbildmodus einzuschalten. Dies kann theoretisch bei Fernkonsultationen erforderlich sein, wenn Sie genau sehen möchten, was Sie Ihrem Gesprächspartner zeigen (z. B. über die Rückkamera Ihres Smartphones). In diesem Chat, im Anrufdialog, habe ich beschlossen, zwei Registerkarten mit dem Video zu erstellen - den Gesprächspartner und den Benutzer selbst. In der aktuellen Version auf der Registerkarte Benutzer gibt es neben dem Video selbst Felder zur Auswahl einer Kamera und eines Mikrofons. Sie können ihre Werte während eines Gesprächs im laufenden Betrieb ändern. Vielleicht ist es für jemanden nützlich.
Jetzt werde ich kurz die mit Entwicklung gefüllten Zapfen beschreiben; Vielleicht hilft es jemandem beim Entwickeln und Debuggen seiner Lösungen.
Moderne Funktionen der Arbeit und Implementierung von WebRTC und allgemein der Arbeit mit Multimedia in JavaScript
Hier kurz; Details finden Sie in den Kommentaren in der Javascript-Datei static / js / videoChat.js
- Mit Chrome und möglicherweise auch mit anderen Browsern können Sie mit getUserMedia nur auf Websites arbeiten, auf die über HTTPS zugegriffen werden kann
- Die Liste der Audio- und Videoeingabegeräte kann erst nach einem erfolgreichen Aufruf von getUserMedia abgerufen werden
- Ein automatischer Start der Tonwiedergabe mittels JavaScript (über die play () -Methode des HTML-Video- oder Audioelements) ist nur möglich, wenn der Benutzer Aktivität auf der Site zeigt - z. B. durch Klicken auf ein Steuerelement.
- promise setLocalDescription , offer. RTCPeerConnection ICE-, .
- « » getUserMedia RTCPeerConnection. , , .
- Viele Beschreibungen für mobile Geräte beziehen sich auf die FacingMode-Eigenschaft, um vordere oder hintere Kameras auszuwählen. Tatsächlich weiß ich nicht, wie in alten Geräten, aber in diesem Chat auf getesteten Smartphones funktioniert das Umschalten auch ohne Verwendung dieser Eigenschaft. Unter strikter Berücksichtigung von Ziffer 5.
Die Liste ist wahrscheinlich nicht vollständig. Ich denke, im Laufe der Weiterentwicklung wird noch viel mehr auftauchen. Wenn jemand weiß, wie er die Einschränkungen umgehen und das Programm entsprechend vereinfachen oder damit arbeiten kann, schreiben Sie bitte in die Kommentare.
Lazarus Netzwerkanwendungsentwickler Big Shot
Synapse unterstützt derzeit nur OpenSSL 1.0.x-Bibliotheken. In 1.1 sind viele Dinge bereits anders implementiert, andere sogar Bibliotheksnamen. Außerdem reicht es nicht aus, einfach DLLs in den Programmordner zu legen. Wir benötigen auch eine Konfigurationsdatei (openssl.cnf), deren Pfad über die Umgebungsvariable OPENSSL_CONF festgelegt wird.
Wo kann ich herunterladen
Die Distributionen des Programms für Win32 und Win64 sowie den Quellcode der Serverseite auf Lazarus finden Sie auf der Programmseite unter dem Link www.lubezniy.ru/soft/videochat
PS: Weiß übrigens jemand, wie Sie Lazarus verwenden können, um das Erstellen aus denselben Quellen zu automatisieren zwei verschiedene exe - für Win32 und Win64? Der Cross-Compiler von Win64 zu Win32 ist aktiv, aber das Ändern der Optionen im Projekt jedes Mal ist nicht korrekt.
PPS: Wer hat es versucht, bitte teilen Sie Ihre Eindrücke in den Kommentaren.