Die Web-App kann mehr: Auf Geräte- und Systemfunktionen aus dem Browser zugreifen
Ein Web-Applikation läuft im Browser und ist damit gewissermaßen von der "Umwelt" abgeschottet (Prinzip "Sandkasten"). Einige Web-Frameworks durchbrechen diese "Schranke", indem sie neue Browser-APIs nutzen und erlauben einen Zugriff auf System- und Gerätefunktionen. Wir diskutieren die Entwicklung von Web-Applikationen in diese Richtung und zeigen anhand von Beispielen, wie man gewissermaßen aus dem Browser ausbrechen und auf Systemfunktionen zugreift.
In der heutigen digitalen Welt nehmen Web-Anwendungen eine Schlüsselrolle ein, die sich aus mehreren wichtigen Aspekten zusammensetzt. Hervorzuheben sind die universelle Zugänglichkeit und die Plattformunabhängigkeit. Web-Applikationen sind über jeden Standard-Webbrowser erreichbar, unabhängig vom Betriebssystem oder Gerätetyp. Diese nahtlose Zugänglichkeit ermöglicht es Benutzer:innen, auf unterschiedlichsten Geräten wie Desktops, Laptops, Tablets und Smartphones dieselben Anwendungen zu nutzen, ohne zusätzliche Software installieren zu müssen.
Ein weiterer signifikanter Vorteil von Web-Anwendungen ist ihre Wirtschaftlichkeit. Im Gegensatz zu nativen Apps, die für jedes Betriebssystem separat entwickelt und gewartet werden müssen, basieren Web-Anwendungen auf einer einzigen Codebasis. Das führt zu einer erheblichen Reduzierung von Entwicklungskosten und Wartungsaufwand. Darüber hinaus ermöglichen Web-Anwendungen eine effiziente und schnelle Implementierung von Änderungen und Updates, die serverseitig durchgeführt werden. So haben Benutzer stets Zugriff auf die neueste Version der Anwendung, wodurch das Problem der Software-Fragmentierung entfällt. Die Skalierbarkeit und Flexibilität von Web-Anwendungen ist ein weiterer entscheidender Vorteil. Sie können leicht an eine wachsende Nutzerbasis angepasst werden und bieten zugleich eine hohe Flexibilität in Design und Benutzererfahrung. Die Fähigkeit, sich nahtlos mit anderen Online-Diensten und Datenquellen zu integrieren, eröffnet zudem neue Möglichkeiten für vernetzte und datengesteuerte Anwendungen. Auch in puncto Sicherheit bieten Web-Anwendungen Vorteile. Durch kontinuierliche Updates können sie schnell auf Sicherheitsbedrohungen reagieren, was in einer Zeit, in der Datensicherheit und Datenschutz von höchster Bedeutung sind, unerlässlich ist. Zudem haben moderne Web-Technologien die Entwicklung von interaktiven und ansprechenden Benutzeroberflächen ermöglicht, wodurch die Nutzererfahrung zunehmend mit der von nativen Apps vergleichbar wird.
Insgesamt spielen Web-Anwendungen eine entscheidende Rolle in der digitalen Wirtschaft, da sie Unternehmen und Entwickler:innen ermöglichen, flexible, zugängliche und effiziente Lösungen zu erstellen, die den Anforderungen einer zunehmend vernetzten und mobilen Benutzerbasis entsprechen.
Web-Anwendungen bieten eine Reihe von Möglichkeiten, haben aber auch spezifische Einschränkungen, insbesondere was die Möglichkeiten des System- und Hardwarezugriffs betrifft. Da diese im Browser laufen, haben sie nur einen begrenzten Zugriff auf die Hardware und Funktionen des Geräts, wie beispielsweise die Kamera, das Dateisystem oder Sensoren. Tabelle 1 fasst die wesentlichen Vor- und Nachteile zusammen.
Tabelle 1: Vor- und Nachteile von Web-Applikationen
| Vorteile | Nachteile |
| Plattformunabhängigkeit | grundsätzliche Internetabhängigkeit, Progressive Web Apps können jedoch auch offline genutzt werden |
| keine Installation erforderlich | geringere Leistung als native Anwendungen |
| zentrale Updates | begrenzter Zugriff auf Gerätefunktionen |
| gute Skalierbarkeit | anfälliger für Sicherheitsrisiken wie Cross-Site-Scripting oder Datendiebstahl |
| leichte Integration mit Webtechnologien | von Browser-Kompatibilität abhängig |
System und Hardware-Zugriff in Web-Apps
Trotz der Einschränkungen gibt es moderne Web-APIs, die es ermöglichen, bestimmte System- und Hardware-Funktionen zu nutzen. HTML5 und JavaScript bieten durch verschiedene APIs erweiterte Möglichkeiten, um aus dem Browser heraus auf bestimmte Hardware- und Gerätefunktionen zuzugreifen. Beispiele dafür sind:
- Web Bluetooth API: Diese API ermöglicht es Web-Apps, mit bluetooth-fähigen Geräten zu kommunizieren. Sie kann beispielsweise verwendet werden, um Daten von Fitness-Trackern oder anderen Sensoren zu lesen.
- WebRTC (Web Real-Time Communication): Diese API dient der Echtzeitkommunikation direkt aus dem Browser. Sie ermöglicht Audio- und Videotelefonate sowie den Datenaustausch ohne zusätzliche Plugins, was sie ideal für Anwendungen wie Videochats macht.
- Media Capture and Streams API: Die API bietet Zugriff auf die Kamera und das Mikrofon des Geräts. Anwendungen können damit Funktionen wie Bild- und Videoaufnahme sowie Audioaufzeichnung integrieren, was vor allem für soziale Medien und multimediale Anwendungen nützlich ist.
- Device Orientation und Motion API: Diese API nutzt die Bewegungs- und Orientierungssensoren des Geräts. Sie wird häufig in mobilen Spielen und Augmented-Reality-Anwendungen verwendet, um eine interaktive und immersive Benutzererfahrung zu schaffen.
- Speech Recognition und Synthesis API: Die API ermöglicht die Implementierung von Spracherkennung und -synthese in Webanwendungen. Das eröffnet Möglichkeiten für sprachgesteuerte User Interfaces und Assistenzsysteme, welche die Benutzerfreundlichkeit und Barrierefreiheit verbessern.
- NFC-Gerätezugriff: Der mobile Browser auf Android-Geräten bietet den einzigartigen Vorteil, dass er eine API zum Lesen und Schreiben von NFC-Tags bietet.
Diese APIs verdeutlichen, wie HTML5 und JavaScript die Grenzen von Web-Anwendungen erweitern und bieten Entwickler:innen die Tools, um funktionsreiche Applikationen zu erstellen.
Vermischung von Web-Applikationen und native Apps
Die zunehmende Vermischung von nativen Apps und Web-Anwendungen ist ein markanter Trend in der Software-Entwicklung. Dieser Trend zeichnet sich durch eine Reihe von Schlüsselaspekten aus: Moderne Web-Anwendungen nähern sich in ihren Fähigkeiten immer mehr den nativen Apps an. Dank fortschrittlicher Web-Technologien wie HTML5, CSS3, Web-Assembly und diverser APIs, können Web-Anwendungen nun auf Systemfunktionen und Hardwarekomponenten wie Kamera, Mikrofon, GPS und Bluetooth zugreifen, die früher ausschließlich nativen Apps vorbehalten waren. Progressive Web-Apps (PWAs) bieten eine ähnliche Erfahrung wie native User Interfaces im Browser, inklusive Offline-Funktionen, Push-Benachrichtigungen und guter Performance. Sie können auf dem Startbildschirm eines Geräts gespeichert werden und bieten eine nahtlose Benutzererfahrung. Entwickler:innen streben zunehmend danach, Anwendungen zu schaffen, die über verschiedene Plattformen hinweg funktionieren, ohne für jede Plattform eine separate Codebasis pflegen zu müssen. Web-Apps funktionieren direkt auf allen Devices im Browser. Mit bestimmten Technologien kann man diese auch lokal auf den Geräten ausführen. Die Leistungsunterschiede zwischen Web-Anwendungen und nativen Apps verringern sich. Optimierungen in JavaScript-Engines, die Einführung von Web-Assembly und verbesserte Browser-Fähigkeiten tragen dazu bei, dass Web-Anwendungen in puncto Geschwindigkeit und Effizienz mit nativen Apps konkurrieren können. Man kann davon ausgehen, dass die Grenzen zwischen Web- und nativen Anwendungen weiter verschwimmen werden. Neue Technologien und Standards werden die Entwicklung noch benutzerfreundlicher, leistungsfähiger und sicherer Anwendungen ermöglichen. Diese Entwicklung hin zur Verschmelzung bietet sowohl Nutzer:innen als auch Entwickler:innen erhebliche Vorteile, darunter erhöhte Zugänglichkeit, geringere Entwicklungs- und Wartungskosten und eine verbesserte Benutzererfahrung.
Frameworks erleichtern die Entwicklung
Grundsätzlich kann mit den Basistechnologien des Web, d. h. HTML, CSS und JavaScript jede Web-Anwendung erstellt werden. Viele Entwickler:innen bevorzugen jedoch den Einsatz von umfangreichen Bibliotheken und Frameworks, um die Entwicklung zu vereinfachen und zu beschleunigen. Bibliotheken und Frameworks sind für unterschiedliche Programmiersprachen und Vorgehensweisen verfügbar. Dazu zählen beispielsweise:
- React [1]: Eine von Facebook entwickelte Open-Source-JavaScript-Bibliothek, die für ihre Effizienz, Flexibilität und Wiederverwendbarkeit bekannt ist. Sie basiert auf einer komponentenbasierten Architektur und nutzt ein virtuelles DOM für eine verbesserte Leistung. React ist für seine Wiederverwendbarkeit, sein reichhaltiges Ökosystem und seine SEO-Freundlichkeit bekannt, obwohl es eine recht steile Lernkurve einfordert und bei kleineren Projekten komplex in der Nutzung ist.
- Angular [2]: Es handelt sich um ein umfassendes JavaScript-Framework von Google, das Funktionen wie bidirektionale Datenbindung, Abhängigkeitsinjektion und Anweisungen bietet. Angular eignet sich aufgrund seines umfassenden Funktionsumfangs und seiner strukturierten Codebasis für groß angelegte Anwendungen. Das Framework ist komplex und erfordert eine erhebliche Lernkurve.
- TMS WEB Core [3]: Ist ein Framework zur Erstellung von Single-Page-Web-Anwendungen in Object Pascal. Es bietet eine Reihe von Funktionen wie ein Standardkomponenten-Framework für UI-Steuerelemente, einen grafischen Designer, Zugriff auf Browser-Funktionen und Debuggen in Pascal-Code über den Browser. Es unterstützt auch Progressive Web Applications (PWA) und ermöglicht die Integration mit anderen JavaScript-Frameworks und -Bibliotheken, einschließlich jQuery-Steuerelementen. Durch eine Integration mit Electron können Cross-Plattform-Anwendungen erstellt werden. Es ermöglicht den Zugriff auf aktuelle Web-APIs wie WebSockets, Web Workers, Local Storage usw.
- Vue [4]:Vue.js ist für seine Einfachheit und Flexibilität bekannt und eignet sich hervorragend für kleine und große Projekte. Es bietet einfache Integration, Reaktivität und eine komponentenbasierte Architektur. Vue.js ist einsteigerfreundlich und hat eine unterstützende Community.
- Laravel [5]: Ein PHP-Web-Framework mit einem eleganten ORM und einer robusten Template-Engine. Laravel ist entwicklerfreundlich und legt Wert auf moderne PHP-Entwicklungspraktiken. Es ist sicher und verfügt über eine starke Community, erfordert jedoch Kenntnisse in PHP und ist für die server-seitige Programmierung einsetzbar.
Jedes dieser Frameworks hat seine Stärken und eignet sich für verschiedene Arten von Web-Entwicklungsprojekten. Ihre Wahl hängt von Ihren spezifischen Anforderungen, der Größe und Komplexität Ihres Projekts sowie Ihrer Vertrautheit mit den zugrundeliegenden Technologien ab. Ein wichtiges Merkmal ist der Einsatz der gewünschten Programmiersprache. Satt mit JavaScript kann beispielsweise mit stark typisierten Programmiersprachen (wie TypeScript) oder mit Sprachen mit einer einfachen und dennoch ausdrucksstarken Syntax (wie Object Pascal) gearbeitet werden. Die Übersetzung zwischen den Programmiersprachen erfolgt mittels eines Transpilers.
Transpiler
Ein Transpiler, auch als Source-to-Source-Compiler bekannt, ist ein spezieller Typ von Compiler, der Quellcode von einer Programmiersprache in eine andere umwandelt. Im Gegensatz zu einem herkömmlichen Compiler, der Quellcode in Maschinencode übersetzt, konvertiert der Transpiler Code innerhalb des gleichen Abstraktionsniveaus. Der Hauptzweck eines Transpilers ist die Erleichterung der Entwicklung. Entwickler:innen können in einer Sprache schreiben, mit der sie vertraut sind oder die eine bessere Syntax für eine bestimmte Aufgabe bietet, und der Transpiler übersetzt diesen Code in eine andere Sprache, die von der Zielplattform unterstützt wird. Transpiler sind besonders in der Web-Entwicklung beliebt, da sie es ermöglichen, fortschrittliche, moderne Funktionen in Sprachen wie JavaScript zu nutzen, während sie gleichzeitig rückwärtskompatibel mit älteren Browsern bleiben. Sie spielen eine wichtige Rolle in modernen Entwicklungsworkflows und ermöglichen eine effizientere und flexiblere Entwicklung über verschiedene Technologien und Plattformen hinweg.
Geräte- und Hardwarezugriff aus einer Web-Applikation
Möchte man beispielsweise die Kamera aus dem Browser nutzen, kann man die getUserMedia-API verwenden. Diese API ist Teil des WebRTC-Standards (Web Real-Time Communications) und ermöglicht es, auf die Medien-Streams eines Geräts, wie Kamera und Mikrofon, zuzugreifen. Das kann wie folgt aussehen:
<!DOCTYPE html>
<html>
<head>
<title>Kamera Zugriff mit HTML5 und JavaScript</title>
</head>
<body>
<video id="videoElement" width="640" height="480" autoplay></video>
<button id="startButton">Kamera starten</button>
<script src="camera.js"></script>
</body>
</html>document.getElementById('startButton').addEventListener('click', function() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// Erstelle ein neues Videoelement, um das Kamerabild zu erfassen
var video = document.createElement('video');
video.srcObject = stream;
video.play();
// Warte, bis das Video geladen ist, und zeichne dann ein Frame auf das Canvas
video.onloadedmetadata = function() {
// Canvas-Element vorbereiten
var canvas = document.getElementById('canvasElement');
canvas.style.display = 'block';
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
// Zeichne das Bild vom Video auf das Canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Stoppe den Videostream
stream.getTracks().forEach(track => track.stop());
};
})
.catch(function(error) {
console.log("Es gab einen Fehler beim Zugriff auf die Kamera: ", error);
});
} else {
alert('getUserMedia wird von Ihrem Browser nicht unterstützt.');
}
});Dazu beachten Sie die Erläuterungen in Tabelle 2.
Tabelle 2: Erläuterung des JavaScript-Quelltextes zum Zugriff auf die Kamera
| Quellcodeausschnitt | Erläuterung |
document.getElementById('startButton'). | Hier wird ein Event-Listener auf das HTML-Element mit der ID "startButton" hinzugefügt. Dieser Listener wird aktiviert, wenn das Element angeklickt wird. Die Funktion, die als Reaktion auf das Klicken aufgerufen wird, ist eine anonyme Funktion (function() {...}), die den gesamten nachfolgenden Code enthält. |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | Dieser Abschnitt prüft, ob das navigator.mediaDevices-Objekt und die Methode getUserMedia verfügbar sind. Dies ist notwendig, um auf die Kamera des Geräts zuzugreifen. Wenn beides vorhanden ist, wird der Code im Inneren dieses Blocks ausgeführt. |
| navigator.mediaDevices.getUserMedia ({ video: true }) | Hier wird getUserMedia aufgerufen, um Zugriff auf die Kamera des Geräts zu erhalten und ein Video-Stream-Objekt zu erstellen. Es wird angefordert, dass die Kamera verwendet wird ({ video: true }). |
| then(function(stream) { | Wenn der Zugriff auf die Kamera erfolgreich ist, wird eine Funktion ausgeführt, die den Video-Stream als Parameter stream erhält. |
| var video = document.createElement('video'); | Es wird ein neues HTML5-Video-Element erstellt, das verwendet wird, um das Kamerabild anzuzeigen. |
| video.srcObject = stream; | Der Video-Stream wird dem Video-Element als Quelle (srcObject) zugewiesen. |
| video.play(); | Das Video wird gestartet und beginnt, das Kamerabild anzuzeigen. |
| video.onloadedmetadata = function() { | Wenn das Video erfolgreich geladen ist (Metadaten wurden abgerufen), wird eine Funktion aufgerufen. |
| var canvas = document.getElementById ('canvasElement'); | Hier wird das Canvas-Element mit der ID "canvasElement" aus dem DOM abgerufen. |
| canvas.style.display = 'block'; | Das Canvas-Element wird auf "block" gesetzt, um es sichtbar zu machen. |
| canvas.width = video.videoWidth; canvas.height = video.videoHeight; | Die Breite und Höhe des Canvas-Elements werden auf die Breite und Höhe des Kameravideo-Elements gesetzt. |
| var ctx = canvas.getContext('2d'); | Hier wird der 2D-Kontext des Canvas erstellt, um darauf zeichnen zu können. |
| ctx.drawImage(video, 0, 0, canvas.width, canvas.height); | Das Kamerabild wird auf das Canvas gezeichnet. |
| stream.getTracks().forEach(track => track.stop()); | Schließlich wird der Videostream gestoppt, um die Kameraressourcen freizugeben, nachdem das Bild aufgenommen wurde. |
| .catch(function(error) { | Wenn beim Zugriff auf die Kamera ein Fehler auftritt, wird eine Fehlermeldung auf der Konsole ausgegeben. |
| alert('getUserMedia wird von Ihrem Browser nicht unterstützt.'); | Falls navigator.mediaDevices oder getUserMedia nicht verfügbar sind, wird eine Benachrichtigung angezeigt, dass die Kamerafunktion im Browser nicht unterstützt wird. |
Der Code ermöglicht es also dem Benutzer, auf die Kamera zuzugreifen, ein Bild davon aufzunehmen und auf einem Canvas anzuzeigen, wenn die entsprechenden Browser-APIs unterstützt werden. Andernfalls wird eine Benachrichtigung angezeigt. Wenn man diese minimale Web-Applikation im Browser startet, dann kann man auf die Kamera des Host-Systems zugreifen (Abb. 1).
Dabei handelt es sich lediglich um den minimal notwendigen Code zur Demonstration der Funktion. In der Praxis existiert dieser um Funktionen (JavaScript), Design (CSS) und Struktur (HTML) anzupassen. Entwickler, welche ein Web-Framework verwenden, können Zeit und Aufwand bei der Implementierung der Web-Applikation im Allgemeinen und speziell beim Zugriff auf die System- und Gerätefunktionen sparen. Demonstrieren wir das auf der Basis des o. g. Frameworks TMS WEB Core.
Web-Applikationen mit System- und Hardwarezugriff auf der Basis von TMS WEB Core
Entwickelt wird beispielsweise im Editor Visual Studio Code. Visual Studio Code wird dazu mittels eines Plugins erweitert. Auf diese Weise wird u.a. ein grafischer Designer bereitgestellt. Mit dessen Hilfe wird die Benutzeroberfläche über Drag-and-drop und Editieren von Eigenschaften der Komponenten gestaltet. Bekannt sind derartige Designer zur Gestaltung des User Interfaces insbesondere aus integrierten Entwicklungsumgebungen für Desktop-Applikationen. Für die Gestaltung von Oberflächen für Web-Applikationen sind diese die Ausnahme. Mit der Installation in Visual Studio Code werden die notwendigen Templates zum Anlegen einer neuen Web-Applikation bereitgestellt. Erstellt man eine neue Applikation, wird ein entsprechendes Projektskelett als Ausgangsbasis generiert. Die komplette Programmlogik wird mittels der Programmiersprache Object Pascal codiert. HTML-, CSS- und JavaScript-Code müssen nicht geschrieben werden. Jedoch ist das Framework flexibel und offen gestaltet, so dass individuelle Anpassungen und Erweiterungen, zum Beispiel mit angepassten CSS-Klassen oder zusätzlichen JavaScript-Bibliotheken, möglich sind. Die bereitgestellte Komponentenpalette umfasst eine Vielzahl von visuellen Controls zur Gestaltung des User Interfaces. Darunter Basiskomponenten wie Eingabefelder, Labels zur Beschriftung, Buttons usw. Auch komplexere Controls zur Darstellung von Datentabellen, Menüelemente und Auswahldialoge für Dateien stehen zur Verfügung. Typische Anforderungen moderner Web-Applikationen, wie die Einbindung von Google Maps, YouTube usw. werden durch eigene Controls unterstützt. Auf diese Weise wird das Erstellen der Benutzeroberfläche gegenüber einer manuellen Codierung erheblich beschleunigt.
Während der Installation wird auch ein lokaler Webserver eingerichtet. Die Web-Applikation kann daher direkt aus Visual Studio Code gestartet werden. Der in Object Pascal vorliegende Quellcode wird mittels eines Transpilers in HTML, CSS und JavaScript übersetzt. Nach Ende des Übersetzungsvorgangs wird der aktuelle Webbrowser gestartet und die Web-Applikation ausgeführt. Zur Unterstützung des Entwicklungsprozesses können im Quellcode Breakpoints gesetzt werden. Bei der Programmausführung aus Visual Studio Code stoppt der Debugger direkt an dieser Stelle, synchronisiert die Ausgaben mit dem Browser und erlaubt eine unmittelbare Untersuchung der Objekte und Variablen. Entwickler:innen finden Fehler und Ungereimtheiten im Quellcode damit schneller.
Nach der Installation der Extension kann man direkt mit der Entwicklung einer ersten Applikation starten. Zur Auswahl stehen mehrere Vorlagen (Abb. 2).
Wählt man TMS WEB Application, dann gelangt man direkt zum grafischen Designer (Abb. 3).
Über die Platzierung, die Ausrichtung und das Einstellen von Eigenschaften über den Objektinspektor erstellt man das User Interface nach seinen Vorstellungen. Das Programmiermodell ist ereignisorientiert. Beispielsweise definiert man für einen Button das Click-Ereignis und hinterlegt den gewünschten Algorithmus mit Hilfe der Object-Pascal-Syntax. Objekte der Benutzeroberfläche werden wiederum mit Hilfe ihres Namens und der gewünschten Eigenschaften – gemäß der Logik der objektorientierten Programmierung – aus dem Quellcode adressiert.
An dieser Stelle kommen wir auf unser Kernthema dieses Artikels zurück: Den vereinfachten Zugriff auf die System- und Geräteinformationen. Statt der direkten, fehleranfälligen und vor allem aufwändigen Interaktion mit der o. g. JavaScript-API bietet das Framework entsprechende Komponenten. Für den Zugriff auf die Kamera ist es beispielsweise die Komponente TWebCamera. TWebCamera basiert auf der API MediaDevices.getUserMedia(). Die Komponente bietet einen einfachen Zugriff auf die Webcam des Benutzers über die bereitgestellten und implementierten Methoden, Eigenschaften und Ereignisse. Stellen wir dazu das o. g. einfache Beispiel nun in Visual Studio Code und dem TMS WEB Core-Framework nach. Man generiert ein neues Projekt, erstellt eine minimale Oberfläche im grafischen Designer mit dem Control TWebCamera, einem Button (TWebButton) und einem Bildelement (TWebImage) und bindet das Click-Ereignis des Buttons. Nunmehr ist lediglich folgender Quellcode (Object Pascal) notwendig:
procedure TForm1.Form1Create(Sender: TObject);
begin
WebCamera1.Start;
end;
procedure TForm1.WebButton1Click(Sender: TObject);
begin
WebImageControl1.LoadFromURL(WebCamera1.SnapShotAsBase64);
end;Der minimale Quellcode (Abb.4 4) zeigt den sehr großen Vorteil eines Frameworks.
Es ist lediglich die Kamera zu starten (WebCamera1.Start), dann kann man direkt nach einem Klick auf den Button das Bild abrufen (Abb. 5). Beachtenswert ist dabei die automatische Konvertierung des Datenstroms aus dem Stream der Kamera für die Load-Funktion (LoadFromURL) für die Image-Komponente.
Zusätzlicher Code in HTML und JavaScript sind nicht notwendig. Die Übersetzung von Object Pascal zu JavaScript erfolgt automatisiert. Mit Hilfe der Komponenten hat sich der Aufwand reduziert. Möchte man andere Sensoren verwenden, beispielsweise den GPS-Sensor zur Ortung, ist auf ähnliche Art und Weise vorzugehen.
Browser-Unterstützung für den Hardware-Zugriff
Diese Unterstützung wird stetig besser, dennoch ist noch nicht von einer vollständigen Abdeckung über alle Geräte, Systeme und Browsertypen auszugehen. Die Situation stellt sich aktuell gemäß Tabelle 3 dar.
Tabelle 3: Browser-Unterstützung für Geräte und Hardware-Zugriff
| Hardware | Erläuterung | Chrome | Edge | Firefox | Safari macOS | Safari iOS | Chrome Android | WebKit Linux |
| Kamera | Zugriff auf Gerätekameras für Bild- und Videoaufnahmen | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| Touch | Handling von Touch-Events auf Touchscreens | Ja | Ja | Ja | Nein | Ja | Ja | Ja |
| Bildschirme | Erkennen mehrerer Bildschirme | Ja | Ja | Ja | Nein | Nein | Nein | Nein |
| GPS | GPS- oder netzwerkbasierte Positionsbestimmung | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
| USB | Interaktion mit USB-Geräten | Ja | Ja | Nein | Nein | Nein | Ja | Ja |
| Bluetooth | Verbindung mit bluetooth-fähigen Geräten | Ja | Ja | Nein | Nein | Nein | Ja | Ja |
| Spracherkennung | sprachgesteuerte Webanwendungen. | Ja | Ja | Ja | Ja | Ja | Ja | Ja |
Die Web-Welt unterliegt einem ständigen Wandel und es kommen ständig neue Funktionen hinzu und weitere Hardware-Zugriffsfunktionen werden in Kürze erwartet. Sobald eine solche Web-API vorliegt kann diese auch durch die Frameworks unterstützt werden.
Fazit
Der Artikel gab einen Überblick über die Entwicklungen im Bereich der Web-Anwendungen, im Hinblick auf den erweiterten Zugriff auf Systemfunktionen und Hardware. Es wurden die wachsenden Fähigkeiten von Web-Apps, nahtlos mit Geräte-Hardware wie Kameras, Mikrofonen, GPS, sowie USB- und Bluetooth-Geräten zu interagieren, gezeigt. Diese Fortschritte führen zu einer signifikanten Erweiterung der Funktionalität und Benutzererfahrung, d. h. die traditionellen Grenzen zwischen nativen Apps und Webanwendungen verschwimmen zunehmend.
