Bei Geektimes treffe ich mich oft und lese gerne Beiträge aus der DIY-Serie. Nachdem ich mich entschlossen habe, einen kleinen Beitrag zum Schatz der hier gesammelten wertvollen Erfahrungen zu leisten, werde ich den Prozess der Erstellung eines Clients für das Web basierend auf den Line-Servern ausführlich beschreiben.
Das Leitungsüberwachungssystem bietet eine offene API, und Entwickler sagen, dass es möglich ist, darauf basierend einen eigenen Client zu schreiben, um das Videoarchiv und die Kameras online anzuzeigen. Falls gewünscht, können Sie auch Funktionen implementieren, z. B. das Hinzufügen von Ereignissen zum Archiv und das Überlagern von OSD über dem Video. Eine Beschreibung aller Funktionen finden Sie in der
Spezifikation auf der offiziellen Website .
Dieser Artikel ist ein echtes Beispiel dafür, wie ich als Benutzer mit anfänglichen Kenntnissen in JS, HTML, meine eigene Anwendung geschrieben habe, die die Grundprinzipien der Arbeit mit Line-Servern über den integrierten Webserver implementiert.
Daten eingeben
Der Autor ist ein Anfänger in der Entwicklung eines HTML-Clients und an der Entwicklung des Line-Videoüberwachungssystems beteiligt.
Kenntnisstand von JS, HTML - initial.
Die Aufgabe besteht darin, einen HTML-Client für die Arbeit mit Geräten zu schreiben, die auf der Line-Software basieren, wobei die Spezifikation von der Site verwendet wird.
Ich werde die Hauptintrige sofort aufdecken - ich bin zu zwei Schlussfolgerungen gekommen:
- Die Spezifikation ist real, es wird ganz klar beschrieben, man kann einen Client mit C ++, PHP schreiben.
- Sie können keinen vollwertigen HTML-Client nur mit JS schreiben - nur Online-Überwachung gemäß der Spezifikation vor RPC.
Die erste Schlussfolgerung ist angesichts der großen Anzahl von Integrationen in Programme von Drittanbietern ziemlich logisch. Alle von ihnen sind auf der Website beschrieben: Es gibt
Zugangskontrollsysteme ,
Gewicht ,
POS-Systeme , Programme zur
Bestimmung der Fahrzeugnummern und
1C .
Die zweite Schlussfolgerung ist interessanter, betrachten Sie sie unten.
Warum können Sie in HTML + JS keinen vollwertigen Client erstellen?
Antwort: Domänenübergreifende Anfragen.
Derzeit ist der Webserver der Leitung begrenzt. Durch einfaches Kopieren des Codes in den Ordner www kann kein Zugriff gewährt werden. Die Entwickler versprechen jedoch, dass in der neuen Version für Linux und in „Line 8.0“ der Webserver standardmäßig funktioniert: Wenn eine Anfrage vorliegt und eine Datei vorhanden ist, wird diese zurückgegeben.
Erstellen Sie nun ein neues Projekt und beginnen Sie mit der Codierung. Wie alle Neulinge in der Programmierung für das Web, die angaben, dass der Server "Lines" im Header "Access-Control-Allow-Origin" mit "*" antwortet, begann ich, intensiv an dem Code zu arbeiten und das Ergebnis in Firefox 57.0.4 (64-Bit) zu überprüfen. Anforderungen an den Server wurden von XMLHttpRequest gesendet.
Zunächst wäre es hilfreich, die Informationen zu
dieser Ressource zu studieren. Dort wird alles sehr detailliert beschrieben, aber ich wollte die Aufgabe wirklich schnell erledigen. Und leider ging aufgrund fehlender Informationen ein halber Tag verloren, als die Sicherheitspolitik moderner Browser an die Wand schlug.
Zum Zeitpunkt dieses Schreibens erlauben die vier wichtigsten modernen Browser nicht, die vom Server empfangenen Header zu lesen. Gemäß der Spezifikation muss die Digest-Authentifizierung implementiert werden, die ohne Header nicht möglich ist.
Am Ende des ersten Tages wurde mir klar, dass ohne Hinzufügen der OPTIONS-Verarbeitung zum Webserver der Leitung nichts funktioniert, da der Browser für Anforderungen mit einer „schwierigen“ Methode oder speziellen Headern eine OPTIONS-Voranforderung erstellt und diese in der Access-Control-Request-Methode angibt und Access-Control-Request-Header. Also suchte ich nach anderen Autorisierungsoptionen, aber der echte Basic oder Digest startete nicht.
Eine alternative Methode wurde bereits in der Spezifikation beschrieben, es blieb noch einige Zeit Korrespondenz mit der Programmabteilung von "Lines". Da solche Schwierigkeiten nicht zum ersten Mal auftreten, gibt es bereits eine Krücke für die Zulassung, und sie wird sogar in der Spezifikation erwähnt:
Auf Clients, auf denen es nicht möglich ist, die Anforderung mit Standardmitteln (HTTP Digest / Standardauthentifizierung) zu autorisieren, kann der Autorisierungsheader beispielsweise mit einem der Anforderungsparameter gesendet werden
/kfd3ado1sdrms/streaming/main.flv?authorization=Basic%20d2ViOg==
Nach allen Manipulationen wurde die domänenübergreifende Standardanforderung korrekt ausgeführt! Sie müssen der Anforderung auch den Accept-Header mit dem richtigen Typ hinzufügen. Ich habe mich für JSON entschieden.
Code anfordern:
function get_request_url(method,current_server_data, resource, additional){ var request = current_server_data.server_ip + ':' +current_server_data.port +resource+'?authorization=Basic '+ utf8_to_b64(current_server_data.user+':'+current_server_data.password); if (additional != '' && typeof additional != "undefined") { request += '&' + additional; } return request; } function http_request_of_resource (server_index , resource, auth_attempt) { var request = get_request_url('GET', servers_array[server_index], resource,''); var req_ = new XMLHttpRequest(); req_.open('GET', 'http://'+ request, true);
Wir ändern die Ressource entsprechend der Spezifikation in die benötigte und erhalten diese oder jene Daten. Die zusätzliche Variable enthält bei Bedarf zusätzliche Parameter für die Anforderung. In diesem Zusammenhang kann die Entwicklung der ersten Hälfte der Spezifikation, nämlich das Empfangen / Senden von Textdaten über GET-Anforderungen, als abgeschlossen betrachtet werden.
Außerdem bin ich auf die Tatsache gestoßen, dass das IMG-Tag im IE den MJPEG-Stream nicht wiedergibt und Sie das Aktualisieren von Bildern von Kameras unabhängig implementieren müssen. Der Code ist geöffnet und kann bei Bedarf angezeigt und geändert werden. In der aktuellen Implementierung ist die gleichzeitige Wiedergabe von maximal sechs MJPEG-Streams verfügbar, sodass Sie die Arbeit mit einer Ansicht ausführen müssen, in der mehr Kameras angezeigt werden. All dies ist im
Beispiel , wenn Sie möchten, können Sie finden und verstehen, aber wenn Sie Fragen haben, stellen Sie sicher, in den Kommentaren zu fragen.
RPC-Spezifikation
Wir sind eingeladen, Daten entweder in JSON (Version des Servers "Lines 7.1.1" und höher) oder in MessagePack (Version "Line 7.0" und höher) zu senden und zu empfangen. Es wird erwähnt, dass MessagePack weniger wiegt und schneller arbeitet, aber um ehrlich zu sein, würde ich JSON wählen (es ist bereits in JS integriert), wenn nicht für eine Sache, sondern in der Spezifikation: Das Empfangen von Frames aus dem Archiv ist nur in MessagePack möglich. Ich musste auf ihre
offizielle Website gehen und die JS-Datei herunterladen, die die Kodierungs- und Dekodierungsmethoden an Bord hat.
Die Anforderungssendefunktion ist fertig! Es ist jedoch zu früh, um den Sieg zu feiern: Wenn Sie versuchen, den Header der Anforderung vom Typ Inhalt zu ändern, schwört der Browser und sendet keine Daten an den Server. Tatsache ist, dass der Lines-Server dieses Feld analysiert und je nach Typ analysiert. Ich konnte es nicht alleine machen.
Ich habe eine Anfrage an die Programmabteilung gesendet, und nach der Diskussion haben sie mir eine Krücke hinzugefügt, wie im Fall einer Autorisierung. - Der Inhaltstyp wird in der URL-Anfrage übertragen:
function rpc_request_of_resource (current_server_data , rpc_method, rpc_request) { var request = get_request_url('POST', current_server_data, '/rpc','');
Diese Änderung funktioniert mit der Version „Zeile 7.4.1“ und höher. Für alle Server unter dieser Version ist die Arbeit mit der Ressource / rpc nicht verfügbar.
Am Ende möchte ich mich bei allen Kunden bedanken, die uns Fragen / Wünsche zur Implementierung von Anwendungen auf Basis unserer API gesendet haben. Dank Ihnen wurde eine Studie durchgeführt, in deren Rahmen einige Mängel festgestellt und behoben wurden.
Das in diesem Artikel beschriebene Beispiel wird schrittweise zu einem vollwertigen HTML-Client für Zeilen. Der gesamte Code ist lesbar. Sie können ihn ändern oder als Grundlage für die Erstellung eigener Lösungen verwenden. Die API wird im Laufe der Zeit mit noch mehr Funktionen gefüllt sein, über die wir auf jeden Fall informieren werden.