One place for hosting & domains

      So starten Sie Ihre Node.js-Apps automatisch mit nodemon neu


      Einführung

      In Node.js müssen Sie den Prozess neu starten, um Änderungen zu übernehmen. Dadurch wird Ihrem Workflow ein zusätzlicher Schritt hinzugefügt, um die Änderungen durchzuführen. Sie können diesen zusätzlichen Schritt durch Verwendung von nodemon eliminieren, um den Prozess automatisch neu zu starten.

      nodemon ist ein von @rem entwickeltes CLI-Dienstprogramm (Command Line Interface), das Ihre Node-App umschließt, das Dateisystem überwacht und den Prozess automatisch neu startet.

      In diesem Artikel erfahren Sie mehr über die Installation, Einrichtung und Konfiguration von nodemon.

      Voraussetzungen

      Wenn Sie diesem Artikel folgen möchten, benötigen Sie Folgendes:

      Schritt 1 — Installieren von nodemon

      Zuerst müssen Sie nodemon auf Ihrem Rechner installieren. Installieren Sie das Dienstprogramm entweder global oder lokal mit npm oder Yarn:

      Globale Installation

      Sie können nodemon global mit npm installieren:

      Oder mit Yarn:

      Lokale Installation

      Sie können nodemon auch lokal mit npm installieren. Bei der Ausführung einer lokalen Installation können wir nodemon als dev-Abhängigkeiten mit --save-dev (oder --dev) installieren:

      • npm install nodemon --save-dev

      Oder mit Yarn:

      Eine Sache, die Sie bei einer lokalen Installation wissen sollten, ist, dass Sie den Befehl nodemon nicht direkt aus der Befehlszeile verwenden können:

      Output

      • command not found: nodemon

      Sie können es jedoch als Teil von einigen npm Scripts oder mit npx verwenden.

      Dadurch wird der Prozess der Installation von nodemon abgeschlossen. Als Nächstes verwenden wir nodemon mit unseren Projekten.

      Schritt 2 — Einrichten eines Beispiel-Express-Projekts mit nodemon

      Wir können nodemon verwenden, um ein Node Script zu starten. Wenn wir beispielsweise ein Express-Server-Setup in einer server.js-Datei haben, können wir es starten und für Änderungen wie folgt ansehen:

      Sie können Argumente so übergeben, als ob Sie das Script mit Node ausführen:

      Jedesmal, wenn Sie eine Änderung in einer Datei mit einer der Standarderweiterung (.js, .mjs, .json, .coffee oder .litcoffee) im aktuellen Verzeichnis oder einem Unterverzeichnis vornehmen, wird der Prozess neu starten.

      Nehmen wir an, wir schreiben eine Beispieldatei server.js, die die Nachricht ausgibt: Dolphin-App hört auf Port ${port} zu.

      Wir können das Beispiel mit nodemon ausführen:

      Wir sehen die Terminalausgabe:

      Output

      [nodemon] 1.17.3 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node server.js` Dolphin app listening on port 3000!

      Zwar wird nodemon noch immer ausgeführt, doch lassen Sie uns eine Änderung in der Datei server.js vornehmen, um die Nachricht auszugeben: Shark-App hört auf Port ${port} zu!

      Wir sehen die folgende zusätzliche Terminalausgabe:

      Output

      [nodemon] restarting due to changes... [nodemon] starting `node server.js` Shark app listening on port 3000!

      Die Terminalausgabe aus unserer Node.js-App wird wie erwartet angezeigt. Sie können den Prozess jederzeit neu starten, indem Sie rs eingeben und die ENTER drücken.

      Alternativ sucht nodemon auch nach einer Hauptdatei, die in der Datei package.json Ihres Projekts angegeben ist:

      package.json

      {
        // ...
        "main": "server.js",
        // ...
      }
      

      Oder ein Startskript:

      package.json

      {
        // ...
        "scripts": {
          "start": "node server.js"
        },
        // ...
      }
      

      Sobald Sie die Änderungen an package.json vornehmen, können Sie nodemon aufrufen, um die Beispiel-App im Beobachtungsmodus zu starten, ohne dass Sie server.js übergeben müssen.

      Schritt 3 — Verwenden von Optionen

      Sie können die Konfigurationseinstellungen für nodemon ändern.

      Gehen wir über einige der wichtigsten Optionen:

      • --exec: Verwenden Sie den Schalter --exec, um ein Binärsystem anzugeben, mit dem die Datei ausgeführt werden soll. In Kombination mit der Binärdatei ts-node kann --exec beispielsweise nützlich werden, um Änderungen zu beobachten und TypeScript-Dateien auszuführen.
      • --ext: Geben Sie verschiedene Dateierweiterungen an, um zu beobachten. Stellen Sie für diesen Schalter eine mit Komma getrennte Liste der Dateierweiterungen (z. B. -ext js,ts) bereit.
      • --delay: Standardmäßig wartet nodemon eine Sekunde, um den Prozess neu zu starten, wenn sich eine Datei ändert, aber mit dem Schalter --delay können Sie eine andere Verzögerung angeben. Beispielsweise nodemon --delay 3.2 für eine 3,2-Sekunden-Verzögerung.
      • --watch: Verwenden Sie den Schalter --watch, um mehrere Verzeichnisse oder Dateien anzugeben, die Sie beobachten können. Fügen Sie für jedes Verzeichnis, das Sie beobachten möchten, einen --watch-Schalter hinzu. Standardmäßig werden das aktuelle Verzeichnis und seine Unterverzeichnisse beobachtet, sodass Sie mit --watch die Beobachtung auf nur bestimmte Unterverzeichnisse oder Dateien beschränken können.
      • --ignore: Verwenden Sie den Schalter --ignore, um bestimmte Dateien, Dateimuster oder Verzeichnisse zu ignorieren.
      • --verbose: Eine ausführlichere Ausgabe mit Informationen darüber, welche Datei(en) geändert wurde(n), um einen Neustart auszulösen.

      Sie können mit dem folgenden Befehl alle verfügbaren Optionen anzeigen:

      Durch Verwendung dieser Optionen erstellen wir den Befehl, um das folgende Szenario zu erfüllen:

      • Beobachten des Server-Verzeichnisses
      • Spezifizieren von Dateien mit einer .ts-Erweiterung
      • Ignorieren von Dateien mit einer .test.ts-Endung
      • Ausführung der Datei (server/server.ts) mit ts-node
      • warten für drei Sekunden bis zum Neustart nach einer Dateiänderung
      • nodemon --watch server --ext ts --exec ts-node --ignore '*.test.ts' --delay 3 server/server.ts

      Dieser Befehl kombiniert --watch, --ext, --exec, --ignore und --delay-Optionen, um die Bedingungen für unser Szenario zu erfüllen.

      Schritt 4 — Verwenden von Konfigurationen

      Im vorherigen Beispiel kann das Hinzufügen von Konfigurationsschaltern bei der Ausführung von nodemon ziemlich mühsam werden. Eine bessere Lösung für Projekte, die spezifische Konfigurationen benötigen, ist die Angabe dieser Konfigurationen in einer Datei nodemon.json.

      Beispielsweise sind hier die gleichen Konfigurationen wie bei der vorherigen Befehlszeile, aber in einer Datei nodemon.json platziert:

      nodemon.json

      {
        "watch": ["server"],
        "ext": "ts",
        "ignore": ["*.test.ts"],
        "delay": "3",
        "execMap": {
          "ts": "ts-node"
        }
      }
      

      Beachten Sie die Verwendung von execMap anstelle des Schalters --exec. execMap ermöglicht es Ihnen, Binärdateien anzugeben, die bei bestimmten Dateierweiterungen verwendet werden sollten.

      Wenn Sie Ihrem Projekt lieber keine Konfigurationsdatei nodemon.json hinzufügen möchten, können Sie alternativ diese Konfigurationen unter einem Schlüssel nodemonConfig der Datei package.json hinzufügen:

      package.json

      {
        "name": "test-nodemon",
        "version": "1.0.0",
        "description": "",
        "nodemonConfig": {
          "watch": [
            "server"
          ],
          "ext": "ts",
          "ignore": [
            "*.test.ts"
          ],
          "delay": "3",
          "execMap": {
            "ts": "ts-node"
          }
        },
        // ...
      

      Sobald Sie die Änderungen an entweder nodemon.json oder package.json vornehmen, können Sie nodemon mit dem gewünschten Script starten:

      nodemon nimmt die Konfigurationen auf und verwendet sie. Auf diese Weise können Ihre Konfigurationen gespeichert, geteilt und wiederholt werden, um Fehler beim Kopieren und Einfügen oder Tippfehler in der Befehlszeile zu vermeiden.

      Zusammenfassung

      In diesem Artikel haben Sie erkundet, wie Sie nodemon mit Ihren Node.js-Anwendungen verwenden. Dieses Tool hilft dabei, den Prozess des Anhaltens und Startens eines Node-Servers zu automatisieren, um die Änderungen anzuzeigen.

      Weitere Informationen zu den verfügbaren Funktionen und Fehlerbehebungen finden Sie in der offiziellen Dokumentation.

      Wenn Sie mehr über Node.js erfahren möchten, lesen Sie unsere Themenseite zu Node.js für Übungen und Programmierprojekte.





      Source link

      Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt


      Einführung

      Drag & Drop ist eine übliche Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.

      Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag-and-Drop-Funktion zu Ihrer Anwendung. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder einen Overhead oder eine Abhängigkeit mit sich bringt, die Ihr Projekt nicht benötigt.  In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.

      Die HTML Drag and Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder fallen gelassen wird, und um dieses Element per Drag and Drop zu aktualisieren.  Mit JavaScript-Ereignishandlern können Sie jedes beliebige Element in ein ziehbares Element oder in ein Element, in das abgelegt werden kann, umwandeln.

      In diesem Tutorial werden wir ein Drag-and-Drop-Beispiel mit der HTML-Drag-and-Drop-API mit Vanille-JavaScript erstellen, um die Event-Handler zu verwenden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      • Einen modernen Webbrowser, der die Drag and Drop API unterstützt (Chrome Firefox 3.5+, Safari 3.1+, Edge 18+).

      Schritt 1 — Erstellen des Projekts und der Ersteinrichtung

      Unser Projekt wird aus einem Container mit zwei Arten von untergeordneten Elementen bestehen:

      • Untergeordnete Elemente, die Sie ziehen können
      • Untergeordnete Elemente, in die Elemente eingefügt werden können

      Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:

      • mkdir drag-and-drop-example

      Navigieren Sie dann zu diesem Verzeichnis:

      Erstellen Sie dann eine index.html - Datei in diesem Verzeichnis:

      Als Nächstes fügen Sie einen Boilerplate-Code für eine HTML-Webseite hinzu:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Und zwischen den Tags <body> fügen Sie Ihr draggable und Ihr dropzone (Ablageziel) hinzu:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei. Erstellen Sie dann eine Datei style.css:

      Als nächstes fügen Sie Stile für die Elemente in unserer Datei index.html hinzu:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Dadurch wird der Anwendung etwas Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und beobachten, dass dies ein draggable <div> und ein dropzone <div> produziert.

      Screenshot von verschiebbaren und Dropzone-Divs

      Als Nächstes erstellen wir explizit die erste <div> durch Hinzufügen des Attributs draggable .

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei.

      Sehen Sie sich schließlich index.html erneut im Browser an.  Wenn wir auf das draggable<<div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige der Bewegung geben.

      Der Standardwert für das Attribut draggable ist auto. Das bedeutet, ob das Element ziehbar ist, wird durch das Standardverhalten Ihres Browsers bestimmt.  Typischerweise bedeutet dies, dass Textauswahlen, Bilder und Links gezogen werden können, ohne dass draggable =„wahr" angegeben sein muss.

      Sie haben nun eine HTML-Datei mit einem ziehbaren Element. Wir werden uns mit der Aufnahme von Ereignishandlern befassen.

      Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript

      Wenn wir jetzt die Maus loslassen, während wir das verschiebbare Element ziehen, geschieht nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen wir die Drag & Drop-API verwenden:

      • ondragstart: Dieser Ereignishandler wird an unser ^>draggable<^>Element angehängt und ausgelöst, wenn ein dragstart-Ereignis eintritt.
      • ondragover: Dieser Ereignishandler wird an unser ^>dropzone<^>-Element angehängt und ausgelöst, wenn ein dragover-Ereignis eintritt.
      • ondrop: Dieser Ereignishandler wird an unser dropzone-Element angehängt und ausgelöst, wenn ein drop-Ereignis eintritt.

      Anmerkung: Insgesamt gibt es acht Ereignishandler: ondragondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. Für unser Beispiel benötigen wir sie nicht alle.

      Lassen Sie uns zunächst eine neue Datei script.js in unserer index.html referenzieren:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Erstellen Sie als Nächstes eine neue Datei script.js:

      Das DataTransfer-Objekt verfolgt die Informationen, die sich auf das aktuelle Drag beziehen.  Um unser Element per Drag and Drop zu aktualisieren, müssen wir direkt auf das DataTransfer-Objekt zugreifen. Zu diesem Zweck können wir die Eigenschaft dataTransfer aus dem DragEvent des DOM-Elements auswählen.

      Anmerkung: Das DataTransfer-Objekt kann Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. Wir werden uns beispielsweise auf das Ziehen eines Elements konzentrieren.

      Die setData-Methode des Objekts dataTransfer kann verwendet werden, um die zu ziehenden Statusinformationen für Ihr aktuell gezogenes Element festzulegen. Dazu sind zwei Parameter erforderlich:

      • Einen String, der das Format des zweiten Parameters deklariert
      • die tatsächlichen übergebenen Daten

      Unser Ziel ist es, unser Element draggable in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable-Element mit einer eindeutigen ID auszuwählen. Wir können die ID des gezogenen Elements mit der setData-Methode setzen, damit es später verwendet werden kann.

      Schauen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Anmerkung: Internet Explorer 9 bis 11 hat laut Angaben Probleme mit der Verwendung von „text/plain“. Das Format muss für diesen Browser „text“ sein.

      Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir auf seine Stile zugreifen, indem wir erneut das DOM-Ereignis verwenden und die gewünschten Stile für die currentTarget festlegen.

      Ergänzen wir unsere Funktion und ändern die Hintergrundfarbe zu gelb:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Anmerkung: Alle Stile, die Sie ändern, müssen beim Ablegen erneut manuell aktualisiert werden, wenn Sie Stile nur zum Ziehen wünschen.  Wenn Sie etwas ändern, sobald das Ziehen beginnt, behält das gezogene Element diese neue Gestaltung bei, es sei denn, Sie ändern es wieder zurück.

      Jetzt haben wir unsere JavaScript-Funktion für den Start des Ziehens.

      Wir können ondragstart dem Element draggable in index.html hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an. Wenn Sie versuchen, Ihren Artikel jetzt zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:

      Animiertes Gif, das ein Element darstellt, das gezogen, aber nicht fallen gelassen wird

      Es passiert jedoch nichts, wenn Sie Ihren Klick loslassen.

      Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondragover.

      Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div>s in Browsern akzeptiert normalerweise kein Ablegen.  Dieses Verhalten wird das Verhalten abfangen, das wir implementieren möchten. Um sicherzustellen, das wir das gewünschte Ablageverhalten erhalten, wenden wir preventDefault an.

      Sehen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von preventDefault. Fügen Sie diesen Code am Ende der Datei hinzu:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondragover hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Zu diesem Zeitpunkt haben wir immer noch keinen Code geschrieben, der das tatsächliche Ablegen behandelt.  Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondrop.

      Lassen Sie uns unsere Datei script.js erneut besuchen und eine neue Funktion erstellen.

      Wir können auf die Daten verweisen, die wir früher mit der setData-Methode des dataTransfer-Objekts gespeichert haben.  Wir werden die getData-Methode des dataTransfer-Objekts verwenden.  Die Daten, die wir gesetzt haben, waren die ID, und das ist es, was uns zurückgegeben wird:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Wählen Sie unser draggable Element mit der von uns abgerufenen ID aus:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Wählen Sie unser Element dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Fügen Sie unser Element draggable an das Element dropzone an:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Setzen Sie unser dataTransfer-Objekt zurück:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondrop hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Sobald das erledigt ist, haben wir eine vollständige Drag-and-Drop-Funktion. Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie das Element draggable zu dropzone.

      Animiertes Gif, das ein Element darstellt, das per Drag & Drop in ein Drop-Ziel gezogen wird

      Unser Beispiel behandelt das Szenario eines einzelnen verschiebbaren Elements und eines einzelnen Ablageziels.  Sie können mehrere verschiebbare Elemente und mehrere Ablageziele haben und sie an alle anderen Drag & Drop-API-Ereignishandler anpassen. 

      Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen

      Hier ist ein weiteres Beispiel dafür, wie Sie diese API verwenden können: Eine Aufgabenliste mit ziehbaren Aufgaben, die Sie von einer „zu erledigen"-Spalte in eine Spalte „erledigt" ziehen können.

      Animiertes Gif, das mehrere zu erledigen Aufgaben zeigt, die per Drag & Drop in eine Spalte „erledigt

      Um Ihre eigene zu erledigende Liste zu erstellen, fügen Sie mehr ziehbare Elemente mit einzigartigen IDs zu index.html hinzu:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie die Elemente in der Spalte zu erledigen zur Spalte erledigt. Sie haben eine zu erledigende Anwendung erstellt und die Funktionalität getestet.

      Zusammenfassung

      In diesem Artikel haben Sie eine zu erledigende Anwendung erstellt, um die Drag-and-Drop-Funktionalität zu untersuchen, die modernen Webbrowsern zur Verfügung steht.

      Die Drag und Drop API bietet mehrere Optionen für die Anpassung Ihrer Aktionen über das Ziehen und Ablegen. Beispielsweise können Sie die CSS-Styling Ihrer verschobenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie sich auch dafür entscheiden, Ihr verschiebbares Element zu kopieren, so dass es beim Ablegen repliziert wird.

      Denken Sie daran, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich womöglich jedoch nicht darauf verlassen können, wenn Ihr Publikum aus Geräten besteht, die diese Funktionalität nicht unterstützen.

      Um mehr darüber zu erfahren, was Sie alles mit der Drag-and-Drop-API ablegen können, lesen Sie die Dokumente von MDN.



      Source link

      Zugriff auf Front- und Rück-Kameras mit getUserMedia() von JavaScript


      Einführung

      Mit HTML5 kam die Einführung von APIs mit Zugriff auf die Geräte-Hardware, einschließlich der API MediaDevices. Diese API ermöglicht den Zugriff auf Medieneingabegeräte wie Audio und Video.

      Mit Hilfe dieser API können Entwickler auf Audio- und Videogeräte zugreifen, um Live-Video-Feeds zu streamen und im Browser anzuzeigen. In diesem Tutorial greifen Sie über das Gerät des Benutzers auf den Video-Feed zu und zeigen es mit der Methode getUserMedia im Browser an.

      Die API getUserMedia verwendet die Medieneingabegeräte, um einen Medien-Stream zu erstellen. Dieser Medien-Stream enthält die angeforderten Medientypen, egal ob Audio oder Video. Mit dem von der API zurückgegebenen Stream können Video-Feeds im Browser angezeigt werden, wobei dies für die Echtzeit-Kommunikation im Browser nützlich ist.

      Bei gemeinsamer Verwendung mit der API MediaStream Recording können Sie Mediendaten aufzeichnen und speichern, die im Browser erfasst wurden. Diese API funktioniert wie die übrigen neu eingeführten APIs nur mit sicherer Herkunft, aber sie funktioniert auch für localhost– und Datei-URLs.

      Voraussetzungen

      In diesem Tutorial werden zunächst Konzepte erklärt und Beispiele mit Codepen demonstriert. Im letzten Schritt erstellen Sie einen funktionierenden Video-Feed für den Browser.

      Schritt 1 — Überprüfen der Geräteunterstützung

      Zuerst erfahren Sie, wie Sie überprüfen können, ob der Browser des Benutzers die API mediaDevices unterstützt. Diese API ist innerhalb der Navigator-Schnittstelle vorhanden und enthält den aktuellen Status und die Identität des Benutzeragenten. Die Überprüfung wird mit dem folgenden Code durchgeführt, der in Codepen eingefügt werden kann:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Zuerst wird geprüft, ob die API mediaDevices innerhalb des navigator vorhanden ist und dann wird geprüft, ob die API getUserMedia innerhalb der mediaDevices verfügbar ist. Wenn dies true zurückgibt, können Sie beginnen.

      Schritt 2 — Anfordern der Benutzerberechtigung

      Nachdem Sie die Unterstützung des Browsers für getUserMedia bestätigt haben, müssen Sie die Berechtigung zur Verwendung der Medieneingabegeräte auf dem Benutzeragenten anfordern. Normalerweise wird, nachdem ein Benutzer die Berechtigung erteilt hat, ein Promise zurückgegeben, das zu einem Medien-Stream aufgelöst wird. Dieses Promise wird nicht zurückgegeben, wenn die Berechtigung vom Benutzer verweigert wird, wodurch der Zugriff auf diese Geräte blockiert wird.

      Fügen Sie die folgende Zeile in Codepen ein, um die Berechtigung anzufordern:

      navigator.mediaDevices.getUserMedia({video: true})
      

      Das Objekt, das als Argument für die Methode getUserMedia bereitgestellt wurde, wird als constraints (Beschränkungen) bezeichnet. Dadurch wird festgelegt, für welche der Medieneingabegeräte Sie Zugriffsberechtigungen anfordern. Wenn das Objekt beispielsweise audio: true enthält, wird der Benutzer aufgefordert, Zugriff auf das Audio-Eingabegerät zu gewähren.

      Schritt 3 — Verstehen von Medienbeschränkungen

      Dieser Abschnitt behandelt das allgemeine Konzept von constraints. Das Objekt constraints ist ein MediaStreamConstraints-Objekt, das die anzufordernden Medientypen und die Anforderungen jedes Medientyps angibt. Mit dem Objekt constraints können Sie Anforderungen für den angeforderten Stream angeben, wie beispielsweise die Auflösung des zu verwendenden Streams (front, back).

      Sie müssen entweder audio oder video angeben, wenn Sie die Anfrage stellen. Ein NotFoundError wird zurückgegeben, wenn die angeforderten Medientypen im Browser des Benutzers nicht gefunden werden können.

      Wenn Sie beabsichtigen, einen Video-Stream mit einer Auflösung von 1280 × 720 anzufordern, können Sie das Objekt constraints so aktualisieren, dass es wie folgt aussieht:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Mit dieser Aktualisierung versucht der Browser, die angegebenen Qualitätseinstellungen für den Stream zu übernehmen. Wenn das Videogerät diese Auflösung nicht liefern kann, gibt der Browser andere verfügbare Auflösungen zurück.

      Um sicherzustellen, dass der Browser eine Auflösung zurückgibt, die nicht niedriger als die vorgegebene Auflösung ist, müssen Sie die Eigenschaft min verwenden. Nachfolgend wird gezeigt, wie Sie das Objekt constraints aktualisieren können, um die Eigenschaft min einzuschließen:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Dadurch wird sichergestellt, dass die zurückgegebene Stream-Auflösung mindestens 1280 × 720 beträgt. Wenn diese Mindestanforderungen nicht erfüllt werden kann, wird das Promise mit einem OverconstrainedError abgelehnt.

      In einigen Fällen haben Sie eventuell Bedenken hinsichtlich der Datenspeicherung und möchten, dass der Stream eine festgelegte Auflösung nicht überschreitet. Dies kann sich als nützlich erweisen, wenn der Benutzer einen begrenzten Datenplan verwendet. Um diese Funktionalität zu aktivieren, aktualisieren Sie das Beschränkungsobjekt, damit es ein Feld max enthält:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Mit diesen Einstellungen stellt der Browser sicher, dass der zurückgegebene Stream nicht unter 1280 × 720 liegt und 1920 × 1080 nicht überschreitet.

      Andere Begriffe, die verwendet werden können, sind exact und ideal. Die Einstellung ideal wird typischerweise zusammen mit den Eigenschaften min und max verwendet, um die bestmögliche Einstellung zu finden, die den idealen Werten am nächsten kommt.

      Sie können die Beschränkungen zur Verwendung des Schlüsselworts ideal aktualisieren:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Um den Browser anzuweisen, die vordere und hintere (bei mobilen Geräten) Kamera von Geräten verwenden, können Sie eine Eigenschaft facingMode im Objekt video angeben:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Diese Einstellung verwendet die nach vorn gerichtete Kamera jederzeit bei allen Geräten. Um die Rückseitenkamera von mobilen Geräten zu verwenden, können Sie die Eigenschaft facingMode zu environment ändern.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Schritt 4 — Verwenden der Methode enumerateDevices

      Wird die Methode enumerateDevices aufgerufen, gibt sie alle verfügbaren Eingabemediengeräte zurück, die auf dem PC des Benutzers verfügbar sind.

      Mit der Methode können Sie den Benutzern Optionen zur Verfügung stellen, welches Eingabemediengerät für das Streaming von Audio- oder Videoinhalten verwendet werden soll. Diese Methode gibt ein Promise aufgelöst an ein Array MediaDeviceInfo zurück, das Informationen zu jedem Gerät enthält.

      Ein Beispiel für die Verwendung dieser Methode wird im nachstehenden Ausschnitt gezeigt:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Eine Beispielantwort für jedes der Geräte würde wie folgt aussehen:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Anmerkung: Ein Label wird nur dann zurückgegeben, wenn ein verfügbarer Stream verfügbar ist oder wenn der Benutzer Zugriffsberechtigungen für Geräte erteilt hat.

      Schritt 5 — Anzeigen des Video-Streams im Browser

      Sie haben den Prozess der Anfrage und des Zugriffs auf die Mediengeräte durchlaufen, Einschränkungen für die erforderlichen Auflösungen konfiguriert und die Kamera ausgewählt, die Sie für die Videoaufzeichnung benötigen.

      Nach all diesen Schritten wollen Sie zumindest sehen, ob der Stream anhand der konfigurierten Einstellungen bereitgestellt wird. Um dies sicherzustellen, verwenden Sie das Element <video> zur Anzeige des Video-Streams im Browser.

      Wie bereits erwähnt, gibt die Methode getUserMedia ein Promise zurück, das in einen Stream aufgelöst werden kann. Der zurückgegebene Stream kann mit der Methode createObjectURL in eine Objekt-URL konvertiert werden. Diese URL wird als Videoquelle festgelegt.

      Sie werden eine kurze Demo erstellen, bei der wir den Benutzer mit der Methode enumerateDevices aus der Liste der verfügbaren Videogeräte auswählen lassen.

      Dies ist eine Methode navigator.mediaDevices. Sie listet die verfügbaren Mediengeräte wie Mikrofone und Kameras auf. Sie gibt ein auflösbares Promise an ein Array von Objekten zurück, das die verfügbaren Mediengeräte detailliert auflistet.

      Erstellen Sie eine Datei index.html und aktualisieren Sie den Inhalt mit dem nachstehenden Code:

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      Im obigen Ausschnitt haben Sie die von Ihnen benötigten Elemente und einige Steuerelemente für das Video eingerichtet. Außerdem ist eine Schaltfläche für die Aufnahme von Screenshots des aktuellen Video-Feeds enthalten.

      Lassen Sie uns diese Komponenten ein wenig stylen.

      Erstellen Sie eine Datei style.css und kopieren Sie die folgenden Stile in sie. Bootstrap wurde hinzugefügt, um die Menge an CSS zu reduzieren, die Sie schreiben müssen, um die Komponenten in Gang zu bringen.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      Der nächste Schritt besteht darin, der Demo Funktionalität hinzuzufügen. Mit der Methode enumerateDevices erhalten Sie die verfügbaren Videogeräte und legen sie als Optionen innerhalb des Elements „select“ fest. Erstellen Sie eine Datei namens script.js und aktualisieren Sie sie mit dem folgenden Ausschnitt:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      Im obigen Ausschnitt sind einige Dinge zu erkennen. Schlüsseln wir diese auf:

      1. feather.replace(): dieser Methodenaufruf instanziiert feather, wobei es sich um einen Symbolsatz für die Webentwicklung handelt.
      2. Die Variable constraints enthält die anfängliche Konfiguration für den Stream. Diese wird erweitert, um das vom Benutzer gewählte Mediengerät einzubeziehen.
      3. getCameraSelection: diese Funktion ruft die Methode enumerateDevices auf. Dann filtern Sie durch das Array aus dem aufgelösten Promise und wählen Video-Eingabegeräte aus. Aus den gefilterten Ergebnissen erstellen Sie <option> für das Element <select>.
      4. Der Aufruf der Methode getUserMedia erfolgt innerhalb des Listeners onclick der Schaltfläche play. Hier überprüfen Sie vor dem Start des Streams, ob diese Methode vom Browser des Benutzers unterstützt wird.
      5. Als Nächstes rufen Sie die Funktion startStream auf, die ein Argument constraints benötigt. Sie ruft die Methode getUserMedia mit den angegebenen constraints auf. handleStream wird mit dem Stream aus dem aufgelösten Promise aufgerufen. Diese Methode setzt den zurückgegebenen Stream auf das srcObject des Videoelements.

      Als Nächstes fügen Sie den Schaltflächen-Steuerelementen auf der Seite Klick-Listener für pause, stop und zur Aufnahme von screenshots hinzu. Außerdem fügen Sie dem Element <select> einen Listener hinzu, um die Stream-Beschränkungen mit dem ausgewählten Videogerät zu aktualisieren.

      Aktualisieren Sie die Datei script.js mit dem nachstehenden Code:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Wenn Sie jetzt die Datei index.html im Browser öffnen, wird das Anklicken der Schaltfläche Play den Stream starten.

      Hier ist eine vollständige Demo:

      Zusammenfassung

      In diesem Tutorial wurde die API getUserMedia vorgestellt. Sie ist eine interessante Ergänzung zu HTML5, die den Prozess der Erfassung von Medien im Web erleichtert.

      Die API verwendet einen Parameter (constraints), mit dem der Zugriff auf Audio- und Video-Eingabegeräte konfiguriert werden kann. Sie kann auch verwendet werden, um die für Ihre Anwendung erforderliche Videoauflösung anzugeben.

      Sie können die Demo weiter erweitern, um dem Benutzer eine Option zu geben, die aufgenommenen Screenshots zu speichern, sowie Video- und Audiodaten mit Hilfe der API MediaStream Recording aufzuzeichnen und zu speichern.



      Source link