One place for hosting & domains

      Konfigurieren der SSH-Schlüssel-basierten Authentifizierung auf einem Linux-Server


      Einführung

      SSH oder Secure Shell ist ein verschlüsseltes Protokoll zur Verwaltung und Kommunikation mit Servern. Wenn Sie mit einem Linux-Server arbeiten, verbringen Sie wahrscheinlich die meiste Zeit in einer Terminalsitzung, die über SSH mit Ihrem Server verbunden ist.

      Es gibt zwar einige verschiedene Möglichkeiten, sich bei einem SSH-Server anzumelden, doch in diesem Leitfaden konzentrieren wir uns auf die Einrichtung von SSH-Schlüsseln. SSH-Schlüssel bieten eine einfache, aber extrem sichere Möglichkeit der Anmeldung an Ihrem Server. Aus diesem Grund ist dies die Methode, die wir für alle Benutzer empfehlen.

      Funktionsweise von SSH-Schlüsseln

      Ein SSH-Server kann Clients mit einer Vielzahl von verschiedenen Methoden authentifizieren. Die grundlegendste davon ist die Passwort-Authentifizierung, die einfach zu verwenden, aber nicht die sicherste ist.

      Obwohl Passwörter auf sichere Weise an den Server gesendet werden, sind sie im Allgemeinen nicht komplex oder lang genug, um wiederholten, hartnäckigen Angreifern zu widerstehen. Moderne Verarbeitungsleistung kombiniert mit automatisierten Skripten machen das Brute-Forcing eines passwortgeschützten Kontos sehr gut möglich. Obwohl es andere Methoden gibt, um zusätzliche Sicherheit (fail2ban usw.) hinzuzufügen, erweisen sich SSH-Schlüssel als eine zuverlässige und sichere Alternative.

      SSH-Schlüsselpaare sind zwei kryptografisch sichere Schlüssel, die zur Authentifizierung eines Clients gegenüber einem SSH-Server verwendet werden können. Jedes Schlüsselpaar besteht aus einem öffentlichen Schlüssel und einem privaten Schlüssel.

      Der private Schlüssel wird vom Client aufbewahrt und sollte absolut geheim gehalten werden. Jede Kompromittierung des privaten Schlüssels ermöglicht es dem Angreifer, sich ohne zusätzliche Authentifizierung an Servern anzumelden, die mit dem zugehörigen öffentlichen Schlüssel konfiguriert sind. Als zusätzliche Vorsichtsmaßnahme kann der Schlüssel auf der Festplatte mit einer Passphrase verschlüsselt werden.

      Der zugehörige öffentliche Schlüssel kann ohne negative Folgen geteilt werden. Der öffentliche Schlüssel kann zur Verschlüsselung von Nachrichten verwendet werden, die nur der private Schlüssel entschlüsseln kann. Diese Eigenschaft wird als eine Möglichkeit zur Authentifizierung mit dem Schlüsselpaar verwendet.

      Der öffentliche Schlüssel wird auf einen Remote-Server hochgeladen, an dem Sie sich mit SSH anmelden möchten. Der Schlüssel wird zu einer speziellen Datei innerhalb des Benutzerkontos hinzugefügt, bei dem Sie sich anmelden werden, namens ~/.ssh/authorized_keys.

      Wenn ein Client die Authentifizierung mit SSH-Schlüsseln versucht, kann der Server den Client daraufhin testen, ob er im Besitz des privaten Schlüssels ist. Wenn der Client beweisen kann, dass er den privaten Schlüssel besitzt, wird eine Shell-Sitzung erzeugt oder der angeforderte Befehl wird ausgeführt.

      Erstellen von SSH-Schlüsseln

      Der erste Schritt zur Konfiguration der SSH-Schlüsselauthentifizierung an Ihrem Server ist die Erstellung eines SSH-Schlüsselpaares auf Ihrem lokalen Computer.

      Dazu können wir ein spezielles Dienstprogramm namens ssh-keygen verwenden, das in der standardmäßigen OpenSSH-Suite von Tools enthalten ist. Standardmäßig erstellt dies ein RSA-Schlüsselpaar mit 2048 Bit, das für die meisten Verwendungen ausreichend ist.

      Erstellen Sie auf Ihrem lokalen Computer ein SSH-Schlüsselpaar durch Eingabe von:

      ssh-keygen
      
      Generating public/private rsa key pair.
      Enter file in which to save the key (/home/username/.ssh/id_rsa):
      

      Das Dienstprogramm fordert Sie auf, einen Speicherort für die zu erzeugenden Schlüssel auszuwählen. Standardmäßig werden die Schlüssel im Verzeichnis ~/.ssh innerhalb des Home-Verzeichnisses Ihres Benutzers gespeichert. Der private Schlüssel wird id_rsa genannt und der zugehörige öffentliche Schlüssel wird id_rsa.pub genannt.

      In der Regel ist es am besten, an dieser Stelle den Standardspeicherort beizubehalten. Auf diese Weise kann Ihr SSH-Client Ihre SSH-Schlüssel automatisch finden, wenn Sie versuchen, sich zu authentifizieren. Wenn Sie einen nicht standardmäßigen Pfad auswählen möchten, geben Sie diesen jetzt ein, andernfalls drücken Sie ENTER, um die Standardeinstellung zu akzeptieren.

      Wenn Sie zuvor ein SSH-Schlüsselpaar erstellt hatten, sehen Sie möglicherweise eine Eingabeaufforderung, die wie folgt aussieht:

      /home/username/.ssh/id_rsa already exists.
      Overwrite (y/n)?
      

      Wenn Sie den Schlüssel auf der Festplatte überschreiben, können Sie sich nicht mehr mit dem vorherigen Schlüssel authentifizieren. Seien Sie sehr vorsichtig bei der Auswahl von „Ja“, da dies ein destruktiver Prozess ist, der nicht rückgängig gemacht werden kann.

      Created directory '/home/username/.ssh'.
      Enter passphrase (empty for no passphrase):
      Enter same passphrase again:
      

      Als Nächstes werden Sie aufgefordert, eine Passphrase für den Schlüssel einzugeben. Dies ist eine optionale Passphrase, die zur Verschlüsselung der privaten Schlüsseldatei auf der Festplatte verwendet werden kann.

      Sie fragen sich vielleicht, welche Vorteile ein SSH-Schlüssel bietet, wenn Sie trotzdem eine Passphrase eingeben müssen. Einige der Vorteile sind:

      • Der private SSH-Schlüssel (der Teil, der mit einer Passphrase geschützt werden kann) wird niemals im Netzwerk offengelegt. Die Passphrase wird nur zur Entschlüsselung des Schlüssels auf dem lokalen Rechner verwendet. Das bedeutet, dass netzwerkbasiertes Brute-Forcing gegen die Passphrase nicht möglich ist.
      • Der private Schlüssel wird innerhalb eines eingeschränkten Verzeichnisses aufbewahrt. Der SSH-Client erkennt keine privaten Schlüssel, die nicht in eingeschränkten Verzeichnissen aufbewahrt werden. Der Schlüssel selbst muss ebenfalls eingeschränkte Berechtigungen haben (Lese- und Schreibrechte nur für den Eigentümer). Das bedeutet, dass andere Benutzer auf dem System nicht herumschnüffeln können.
      • Jeder Angreifer, der hofft, die Passphrase des privaten SSH-Schlüssels zu knacken, muss bereits Zugriff auf das System haben. Das bedeutet, dass sie bereits Zugriff auf Ihr Benutzerkonto oder das Root-Konto haben werden. Wenn Sie sich in dieser Position befinden, kann die Passphrase den Angreifer daran hindern, sich sofort an Ihren anderen Servern anzumelden. Dies gibt Ihnen hoffentlich Zeit zur Erstellung und Implementierung eines neuen SSH-Schlüsselpaares und zum Entfernen des Zugriffs des kompromittierten Schlüssels.

      Da der private Schlüssel niemals dem Netzwerk ausgesetzt wird und durch Dateiberechtigungen geschützt ist, sollte diese Datei niemals für jemand anderen als Sie (und den Root-Benutzer) zugänglich sein. Die Passphrase dient als eine zusätzliche Schutzschicht, falls diese Bedingungen kompromittiert werden.

      Eine Passphrase ist eine optionale Ergänzung. Wenn Sie eine eingeben, müssen Sie sie jedes Mal bei Verwendung dieses Schlüssels angeben (es sei denn, Sie verwenden eine SSH-Agentensoftware, die den entschlüsselten Schlüssel speichert). Wir empfehlen die Verwendung einer Passphrase, aber wenn Sie keine Passphrase festlegen möchten, können Sie einfach ENTER drücken, um diese Eingabeaufforderung zu umgehen.

      Your identification has been saved in /home/username/.ssh/id_rsa.
      Your public key has been saved in /home/username/.ssh/id_rsa.pub.
      The key fingerprint is:
      a9:49:2e:2a:5e:33:3e:a9:de:4e:77:11:58:b6:90:26 username@remote_host
      The key's randomart image is:
      +--[ RSA 2048]----+
      |     ..o         |
      |   E o= .        |
      |    o. o         |
      |        ..       |
      |      ..S        |
      |     o o.        |
      |   =o.+.         |
      |. =++..          |
      |o=++.            |
      +-----------------+
      

      Sie haben jetzt einen öffentlichen und privaten Schlüssel, die Sie zur Authentifizierung verwenden können. Der nächste Schritt besteht darin, den öffentlichen Schlüssel auf Ihrem Server abzulegen, damit Sie sich mithilfe der SSH-Schlüsselauthentifizierung anmelden können.

      Einbetten Ihres öffentlichen Schlüssels bei der Erstellung Ihres Servers

      Wenn Sie einen neuen DigitalOcean-Server einrichten, können Sie Ihren öffentlichen SSH-Schlüssel automatisch in das Root-Konto Ihres neuen Servers einbinden.

      Am Ende der Droplet-Erstellungsseite gibt es eine Option, mit der Sie SSH-Schlüssel zu Ihrem Server hinzufügen können:

      SSH-Schlüssel einbetten

      Wenn Sie bereits eine öffentliche Schlüsseldatei zu Ihrem DigitalOcean-Konto hinzugefügt haben, sehen Sie diese hier als auswählbare Option (im obigen Beispiel gibt es zwei vorhandene Schlüssel: „Arbeitsschlüssel“ und „Heimschlüssel“). Um einen vorhandenen Schlüssel einzubetten, klicken Sie ihn einfach an und er wird hervorgehoben. Sie können mehrere Schlüssel auf einem einzigen Server einbetten:

      SSH-Schlüsselauswahl

      Wenn Sie noch keinen öffentlichen SSH-Schlüssel in Ihr Konto hochgeladen haben oder wenn Sie einen neuen Schlüssel zu Ihrem Konto hinzufügen möchten, klicken Sie auf die Schaltfläche „+ Add SSH Key“ (SSH-Schlüssel hinzufügen). Daraufhin erscheint eine Eingabeaufforderung:

      SSH-Schlüssel-Eingabeaufforderung

      Fügen Sie im Feld „SSH Key content“ (SSH-Schlüsselinhalt) den Inhalt Ihres öffentlichen SSH-Schlüssels ein. Angenommen, Sie haben Ihre Schlüssel mit der oben beschriebenen Methode erzeugt, können Sie den Inhalt Ihres öffentlichen Schlüssels auf Ihrem lokalen Computer abrufen, indem Sie eingeben:

      cat ~/.ssh/id_rsa.pub
      
      ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDNqqi1mHLnryb1FdbePrSZQdmXRZxGZbo0gTfglysq6KMNUNY2VhzmYN9JYW39yNtjhVxqfW6ewc+eHiL+IRRM1P5ecDAaL3V0ou6ecSurU+t9DR4114mzNJ5SqNxMgiJzbXdhR+j55GjfXdk0FyzxM3a5qpVcGZEXiAzGzhHytUV51+YGnuLGaZ37nebh3UlYC+KJev4MYIVww0tWmY+9GniRSQlgLLUQZ+FcBUjaqhwqVqsHe4F/woW1IHe7mfm63GXyBavVc+llrEzRbMO111MogZUcoWDI9w7UIm8ZOTnhJsk7jhJzG2GpSXZHmly/a/buFaaFnmfZ4MYPkgJD username@example.com
      

      Fügen Sie diesen Wert in seiner Gesamtheit in das größere Feld ein. Im Feld „Comment (optional)“ (Kommentar (optional)) können Sie eine Bezeichnung für den Schlüssel auswählen. Diese wird als Schlüsselname in der DigitalOcean-Oberfläche angezeigt:

      SSH neuer Schlüssel

      Wenn Sie Ihr Droplet erstellen, werden die von Ihnen ausgewählten öffentlichen SSH-Schlüssel in der Datei ~/.ssh/authorized_keys des Root-Benutzerkontos abgelegt. Dadurch können Sie sich von dem Computer mit Ihrem privaten Schlüssel an dem Server anmelden.

      Kopieren eines öffentlichen Schlüssels auf Ihren Server

      Wenn Sie bereits über einen Server verfügen und bei der Erstellung keine Schlüssel eingebettet haben, können Sie trotzdem Ihren öffentlichen Schlüssel hochladen und zur Authentifizierung an Ihrem Server verwenden.

      Welche Methode Sie verwenden, hängt weitgehend von den verfügbaren Tools und den Details Ihrer aktuellen Konfiguration ab. Die folgenden Methoden führen alle zu demselben Ergebnis. Die einfachste, am meisten automatisierte Methode steht an erster Stelle und die folgenden erfordern jeweils zusätzliche manuelle Schritte, wenn Sie die vorangegangenen Methoden nicht verwenden können.

      Kopieren Ihres öffentlichen Schlüssels mit SSH-Copy-ID

      Die einfachste Methode, Ihren öffentlichen Schlüssel auf einen vorhandenen Server zu kopieren, ist die Verwendung eines Dienstprogramms namens ssh-copy-id. Aufgrund ihrer Einfachheit wird diese Methode empfohlen, wenn sie verfügbar ist.

      Das Tool ssh-copy-id ist in vielen Distributionen in den OpenSSH-Paketen enthalten, sodass Sie es möglicherweise auf Ihrem lokalen System zur Verfügung haben. Damit diese Methode funktioniert, müssen Sie bereits über einen passwortbasierten SSH-Zugriff auf Ihren Server verfügen.

      Um das Utility zu verwenden, müssen Sie lediglich den Remote-Host, zu dem Sie eine Verbindung herstellen möchten, und das Benutzerkonto angeben, auf das Sie mit einem Passwort SSH-Zugriff haben. Dies ist das Konto, auf das Ihr öffentlicher SSH-Schlüssel kopiert werden soll.

      Die Syntax lautet:

      ssh-copy-id username@remote_host
      

      Sie sehen eventuell eine Nachricht wie diese:

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Dies bedeutet nur, dass Ihr lokaler Computer den Remote-Host nicht erkennt. Dies geschieht, wenn Sie zum ersten Mal eine Verbindung zu einem neuen Host herstellen. Geben Sie „yes“ ein und drücken Sie ENTER, um fortzufahren.

      Als nächstes durchsucht das Dienstprogramm Ihr lokales Konto nach dem Schlüssel id_rsa.pub, den wir zuvor erstellt haben. Wenn der Schlüssel gefunden wurde, werden Sie zur Eingabe des Passworts für das Konto des Remotebenutzers aufgefordert:

      /usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
      /usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
      username@111.111.11.111's password:
      

      Geben Sie das Passwort ein (Ihre Eingabe wird aus Sicherheitsgründen nicht angezeigt) und drücken Sie ENTER. Das Utility stellt mit dem von Ihnen angegebenen Passwort eine Verbindung zum Konto auf dem Remote-Host her. Anschließend wird der Inhalt Ihres Schlüssels ~/.ssh/id_rsa.pub in eine Datei im Stammverzeichnis ~/.ssh des Remote-Kontos namens authorized_keys kopiert.

      Sie werden eine Ausgabe sehen, die wie folgt aussieht:

      Number of key(s) added: 1
      
      Now try logging into the machine, with:   "ssh 'username@111.111.11.111'"
      and check to make sure that only the key(s) you wanted were added.
      

      Zu diesem Zeitpunkt wurde Ihr Schlüssel id_rsa.pub in das Remote-Konto hochgeladen. Sie können mit dem nächsten Abschnitt fortfahren.

      Kopieren Ihres öffentlichen Schlüssels mit SSH

      Wenn Sie nicht über ssh-copy-id verfügen, aber einen passwortbasierten SSH-Zugriff auf ein Konto auf Ihrem Server haben, können Sie Ihre Schlüssel mit einer herkömmlichen SSH-Methode hochladen.

      Wir können dies tun, indem wir den Inhalt unseres öffentlichen SSH-Schlüssels auf unserem lokalen Computer ausgeben und ihn über eine SSH-Verbindung an den Remote-Server leiten. Auf der anderen Seite können wir sicherstellen, dass das Verzeichnis ~/.ssh unter dem von uns verwendeten Konto vorhanden ist und dann den von uns geleiteten Inhalt in eine Datei namens authorized_keys innerhalb dieses Verzeichnisses ausgeben.

      Wir werden das Umleitungssymbol >> verwenden, um den Inhalt anzuhängen, anstatt ihn zu überschreiben. Dadurch können wir Schlüssel hinzufügen, ohne zuvor hinzugefügte Schlüssel zu zerstören.

      Der vollständige Befehl sieht wie folgt aus:

      cat ~/.ssh/id_rsa.pub | ssh username@remote_host "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"
      

      Sie sehen eventuell eine Nachricht wie diese:

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Dies bedeutet nur, dass Ihr lokaler Computer den Remote-Host nicht erkennt. Dies geschieht, wenn Sie zum ersten Mal eine Verbindung zu einem neuen Host herstellen. Geben Sie „yes“ ein und drücken Sie ENTER, um fortzufahren.

      Danach werden Sie aufgefordert, das Passwort des Kontos einzugeben, mit dem Sie versuchen, eine Verbindung herzustellen:

      username@111.111.11.111's password:
      

      Nach Eingabe Ihres Passworts wird der Inhalt Ihres Schlüssels id_rsa.pub an das Ende der Datei authorized_keys des Kontos des Remote-Benutzers kopiert. Fahren Sie mit dem nächsten Abschnitt fort, wenn dies erfolgreich war.

      Manuelles Kopieren Ihres öffentlichen Schlüssels

      Wenn Sie keinen passwortbasierten SSH-Zugang zu Ihrem Server zur Verfügung haben, müssen Sie den obigen Vorgang manuell ausführen.

      Der Inhalt Ihrer Datei id_rsa.pub muss irgendwie zu einer Datei unter ~/.ssh/authorized_keys auf Ihrem Remote-Rechner hinzugefügt werden.

      Um den Inhalt Ihres Schlüssels id_rsa.pub anzuzeigen, geben Sie Folgendes in Ihren lokalen Computer ein:

      cat ~/.ssh/id_rsa.pub
      

      Sie werden den Inhalt des Schlüssels sehen, der etwa so aussehen kann:

      ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCqql6MzstZYh1TmWWv11q5O3pISj2ZFl9HgH1JLknLLx44+tXfJ7mIrKNxOOwxIxvcBF8PXSYvobFYEZjGIVCEAjrUzLiIxbyCoxVyle7Q+bqgZ8SeeM8wzytsY+dVGcBxF6N4JS+zVk5eMcV385gG3Y6ON3EG112n6d+SMXY0OEBIcO6x+PnUSGHrSgpBgX7Ks1r7xqFa7heJLLt2wWwkARptX7udSq05paBhcpB0pHtA1Rfz3K2B+ZVIpSDfki9UVKzT8JUmwW6NNzSgxUfQHGwnW7kj4jp4AT0VZk3ADw497M2G/12N0PPB5CnhHf7ovgy6nL1ikrygTKRFmNZISvAcywB9GVqNAVE+ZHDSCuURNsAInVzgYo9xgJDW8wUw2o8U77+xiFxgI5QSZX3Iq7YLMgeksaO4rBJEa54k8m5wEiEE1nUhLuJ0X/vh2xPff6SQ1BL/zkOhvJCACK6Vb15mDOeCSq54Cr7kvS46itMosi/uS66+PujOO+xt/2FWYepz6ZlN70bRly57Q06J+ZJoc9FfBCbCyYH7U/ASsmY095ywPsBo1XQ9PqhnN1/YOorJ068foQDNVpm146mUpILVxmq41Cj55YKHEazXGsdBIbXWhcrRf4G2fJLRcGUr9q8/lERo9oxRm5JFX6TCmj6kmiFqv+Ow9gI0x8GvaQ== demo@test
      

      Greifen Sie mit einer beliebigen verfügbaren Methode auf Ihren Remote-Host zu. Wenn Ihr Server beispielsweise ein DigitalOcean-Droplet ist, können Sie sich über die Web-Konsole im Bedienfeld anmelden:

      DigitalOcean-Konsolenzugriff

      Sobald Sie Zugriff auf Ihr Konto auf dem Remote-Server haben, sollten Sie sicherstellen, dass das Verzeichnis ~/.ssh angelegt ist. Dieser Befehl erstellt bei Bedarf das Verzeichnis oder unternimmt nichts, wenn es bereits vorhanden ist:

      mkdir -p ~/.ssh
      

      Jetzt können Sie die Datei authorized_keys in diesem Verzeichnis erstellen oder ändern. Sie können den Inhalt Ihrer Datei id_rsa.pub an das Ende der Datei authorized_keys anfügen und diese bei Bedarf mit folgendem Befehl erstellen:

      echo public_key_string >> ~/.ssh/authorized_keys
      

      Ersetzen Sie im obigen Befehl public_key_string​​​​ durch die Ausgabe des Befehls cat~/.ssh/id_rsa.pub, den Sie auf Ihrem lokalen System ausgeführt haben. Sie sollte mit ssh-rsa AAAA... beginnen.

      Wenn dies funktioniert, können Sie mit der Authentifizierung ohne Passwort fortfahren.

      Authentifizieren an Ihrem Server mit SSH-Schlüsseln

      Wenn Sie eines der oben genannten Verfahren erfolgreich abgeschlossen haben, sollten Sie sich beim Remote-Host anmelden können,* ohne* das Passwort des Remote-Kontos zu verwenden.

      Der grundlegende Prozess ist der gleiche:

      ssh username@remote_host
      

      Wenn Sie zum ersten Mal eine Verbindung zu diesem Host herstellen (wenn Sie die letzte Methode oben verwendet haben), wird möglicherweise Folgendes angezeigt:

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Dies bedeutet nur, dass Ihr lokaler Computer den Remote-Host nicht erkennt. Geben Sie „yes“ ein und drücken Sie dann ENTER, um fortzufahren.

      Wenn Sie keine Passphrase für Ihren privaten Schlüssel angegeben haben, werden Sie sofort angemeldet. Wenn Sie eine Passphrase für den privaten Schlüssel bei der Erstellung des Schlüssels angeben haben, werden Sie aufgefordert, ihn nun einzugeben. Anschließend sollte eine neue Shell-Sitzung mit dem Konto auf dem Remote-System für Sie erzeugt werden.

      Wenn dies erfolgreich war, fahren Sie fort, um zu erfahren, wie Sie den Server sperren können.

      Deaktivieren der Passwort-Authentifizierung auf Ihrem Server

      Wenn Sie sich mit SSH ohne Passwort bei Ihrem Konto anmelden konnten, haben Sie die auf SSH-Schlüssel-basierte Authentifizierung für Ihr Konto erfolgreich konfiguriert. Ihr passwortbasierter Authentifizierungsmechanismus ist jedoch weiterhin aktiv. Dies bedeutet, dass Ihr Server weiterhin Brute-Force-Angriffen ausgesetzt ist.

      Stellen Sie vor dem Ausführen der in diesem Abschnitt beschriebenen Schritte sicher, dass entweder die SSH-Schlüssel-basierte Authentifizierung für das Root-Konto auf diesem Server konfiguriert ist oder vorzugsweise, dass Sie die SSH-Schlüssel-basierte Authentifizierung für ein Konto auf diesem Server mit sudo-Zugriff konfiguriert haben. Dieser Schritt sperrt passwortbasierte Anmeldungen. Daher ist es von entscheidender Bedeutung, dass Sie weiterhin über administrativen Zugriff verfügen.

      Sobald die obigen Bedingungen erfüllt sind, melden Sie sich mit SSH-Schlüsseln an Ihrem Remote-Server entweder als „root“ oder mit einem Konto mit sudo-Berechtigungen an. Öffnen Sie die Konfigurationsdatei des SSH-Daemons:

      sudo nano /etc/ssh/sshd_config
      

      Suchen Sie in der Datei nach einer Anweisung namens PasswordAuthentication. Dies kann auskommentiert werden. Kommentieren Sie die Zeile aus und setzen Sie den Wert auf „Nein“. Dadurch wird Ihre Fähigkeit, sich über SSH mit Kontopasswörtern anzumelden, deaktiviert:

      PasswordAuthentication no
      

      Wenn Sie fertig sind, speichern und schließen Sie die Datei. Um die gerade vorgenommenen Änderungen tatsächlich zu implementieren, müssen Sie den Dienst neu starten.

      Auf Ubuntu- oder Debian-Rechnern können Sie diesen Befehl eingeben:

      sudo service ssh restart
      

      Auf CentOS/Fedora-Rechnern wird der Daemon sshd genannt:

      sudo service sshd restart
      

      Nach Abschluss dieses Schritts haben Sie Ihren SSH-Daemon erfolgreich so umgestellt, dass er nur noch auf SSH-Schlüssel reagiert.

      Zusammenfassung

      Sie sollten nun die SSH-Schlüssel-basierte Authentifizierung auf Ihrem Server konfiguriert haben, sodass Sie sich ohne Angabe eines Kontopasswortes anmelden können. Von hier aus gibt es viele Richtungen, in die Sie gehen können. Wenn Sie mehr über das Arbeiten mit SSH erfahren möchten, sehen Sie sich unseren Leitfaden über SSH-Grundlagen an.



      Source link

      Verwenden von ViewChild in Angular für den Zugriff auf eine untergeordnete Komponente, Anweisung oder ein DOM-Element


      Einführung

      Dieser Artikel stellt Ihnen den Dekorateur ViewChild von Angular vor.

      Es kann Situationen geben, in denen Sie aus einer übergeordneten Komponentenklasse auf eine Anweisung, eine untergeordnete Komponente oder ein DOM-Element zugreifen möchten. Der ViewChild -Decorator gibt das erste Element zurück, das einer bestimmten Anweisung, einer Komponente oder einem Auswahlelement für die Vorlagenreferenz entspricht.

      Verwenden von ViewChild mit Anweisungen

      ViewChild ermöglicht es, auf Anweisungen zuzugreifen.

      Nehmen wir an, wir haben eine SharkDirective.

      Im Idealfall verwenden Sie @angular/cli, um Ihre Anweisung zu generieren:

      • ng generate directive shark

      Andernfalls müssen Sie sie gegebenenfalls manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Unsere Anweisung sucht nach Elementen mit dem Attribut appShark und gibt den Text im Element mit dem Wort Shark vor:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Als Nächstes fügen wir Shark zu Fin hinzu, indem wir es in der Komponentenvorlage verwenden:

      app.component.html

      <span appShark>Fin!</span>
      

      Bei der Anzeige der Anweung in einem Browser wird es dargestellt als:

      Output

      Shark Fin!

      Jetzt können wir auf die Instanzvariable creature von SharkDirective zugreifen und eine Instanzvariable extraCreature mit ihrem Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Wir haben hier einen Setter verwendet, um die Variable extraCreature festzulegen. Beachten Sie, dass wir warten, bis der AfterViewInit-Lifecycle-Hook auf unsere Variable zugreift, da dann untergeordnete Komponenten und Anweisungen verfügbar werden.

      Wenn wir die Anwendung in einem Browser anzeigen, sehen wir immer noch das "Shark Fin!" („es hat funktioniert!“ ). Im Konsolenprotokoll wird es jedoch folgendermaßen angezeigt:

      Output

      Dolphin

      Die übergeordnete Komponente konnte aus der Anweisung auf den Wert zugreifen.

      Verwenden von ViewChild mit DOM-Elementen

      ViewChild ermöglicht es Ihnen, auf native DOM-Elemente zuzugreifen, die eine Vorlagenreferenzvariable haben.

      Nehmen wir an, wir haben ein <input> unserer Vorlage mit der Referenzvariable #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Jetzt können wir mit ViewChild auf das <input> zugreifen und den Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Wenn ngAfterViewInit ausgelöst wird, wird der Wert unseres <input> auf Folgendes gesetzt:

      Output

      Whale!

      Die übergeordnete Komponente konnte den Wert des untergeordneten DOM-Elements festlegen.

      Verwenden von ViewChild mit untergeordneten Komponenten

      ViewChild ermöglicht den Zugriff auf eine untergeordnete Komponente und den Aufruf von Methoden oder den Zugriff auf Instanzvariablen, die dem untergeordneten Element zur Verfügung stehen.

      Nehmen wir an, wir haben eine ChildComponent. Im Idealfall verwenden Sie @angular/cli, um Ihre Komponente zu generieren:

      • ng generate component child --flat

      Andernfalls müssen Sie child.component.css und child.component.html-Dateien erstellen und manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Wir fügen die whoAml-Methode zur ChildComponent hinzu, die eine Nachricht zurückgibt:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Nächstes referieren wir die Komponente in unserer App-Vorlage:

      app.component.html

      <app-child>child works!</app-child>
      

      Jetzt können wir die whoAmI-Methode aus unserer übergeordneten Komponenten-Klasse mit ViewChild wie folgt aufrufen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Bei der Betrachtung der Anwendung in einem Browser wird das Konsolenprotokoll angezeigt:

      Output

      I am a child component!

      Die übergeordnete Komponente konnte whoAmI-Methode der untergeordneten Komponente aufrufen.

      Zusammenfassung

      Sie haben gelernt, ViewChild für den Zugriff auf eine Anweisung, eine untergeordnete Komponente und ein DOM-Element aus einer übergeordneten Komponenten-Klasse zu verwenden.

      Wenn sich die Referenz dynamisch in ein neues Element ändert, aktualisiert ViewChild automatisch ihre Referenz.

      In Fällen, in denen Sie auf mehrere untergeordnete Komponenten zugreifen möchten, verwenden Sie stattdessen ViewChild.

      Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.



      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