Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

OBS studio ist cool, aber JavaScript ist cooler. Lassen Sie uns jetzt unsere eigene Bildschirmaufzeichnungsfunktion mit JavaScript erstellen.

Erstellen Sie zunächst eine HTML Datei, die eine Aufnahmetaste und ein Wiedergabetag enthält.

Der Inhalt ist wie folgt:

<!DOCTYPE html> 
<html> 
  <Kopf> 
    <title>Parzellen-Sandbox</title> 
    <meta charset="UTF-8" /> 
  </Kopf> 
  <Text> 
    <video class="video" width="600px" Steuerelemente></video> 
    <button class="record-btn">aufzeichnen</button> 
 
    <script src="./index.js"></script> 
  </body> 
</html>

Dann erstellen Sie index.js ,

Achten Sie auf Tastenklicks:

let btn = document.querySelector(".record-btn"); 
 
btn.addEventListener("klicken", Funktion () { 
  console.log("hallo"); 
});

Öffnen Sie die html Datei im Browser und klicken Sie auf die Schaltfläche. Wir sehen hello “ in der Konsole.

Entfernen Sie nun den Aufdruck und ersetzen Sie ihn durch Folgendes:

let btn = document.querySelector(".record-btn"); 
 
btn.addEventListener("klicken", asynchrone Funktion () { 
  lass stream = warte auf navigator.mediaDevices.getDisplayMedia({ 
    Video: wahr 
  }); 
});

Klicken Sie nun auf die Schaltfläche. Ein Fenster zur Bildschirmauswahl wird angezeigt:

Da ich jetzt zwei Bildschirme verwende, werden zwei Optionen angezeigt.

Nun könnten Sie annehmen, dass die Aufzeichnung durch Auswahl eines Bildschirms und Klicken auf „Teilen“ gestartet wird. Nein, das ist komplizierter als wir denken. Wir werden MediaRecorder verwenden, um unser Video aufzunehmen.

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("klicken", asynchrone Funktion () { 
  lass stream = warte auf navigator.mediaDevices.getDisplayMedia({ 
    Video: wahr 
  }) 
 
  // Benötige bessere Browserunterstützung const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = neuer MediaRecorder(stream, { 
        MIME-Typ: MIME 
    }) 
    //Muss mediaRecorder.start() manuell starten 
})

Wenn unser Bildschirm aufgezeichnet wird, liefert uns mediaRecorder Datenblöcke, die wir in einer Variablen speichern müssen.

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("klicken", asynchrone Funktion () { 
  lass stream = warte auf navigator.mediaDevices.getDisplayMedia({ 
    Video: wahr 
  }) 
 
  // Benötige bessere Browserunterstützung const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = neuer MediaRecorder(stream, { 
        MIME-Typ: MIME 
    }) 
 
    lass Stücke = [] 
    mediaRecorder.addEventListener('Daten verfügbar', Funktion(e) { 
        chunks.push(e.daten) 
    }) 
 
    //Muss mediaRecorder.start() manuell starten 
})

Wenn wir nun auf die Schaltfläche „Freigabe beenden“ klicken, möchten wir das aufgezeichnete Video in unserem video abspielen. Wir können das wie folgt tun:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("klicken", asynchrone Funktion () { 
  lass stream = warte auf navigator.mediaDevices.getDisplayMedia({ 
    Video: wahr 
  }) 
 
  // Benötige bessere Browserunterstützung const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = neuer MediaRecorder(stream, { 
        MIME-Typ: MIME 
    }) 
 
    lass Stücke = [] 
    mediaRecorder.addEventListener('Daten verfügbar', Funktion(e) { 
        chunks.push(e.daten) 
    }) 
 
     mediaRecorder.addEventListener('Stopp', Funktion(){ 
          lass blob = neuer Blob(Chunks, { 
              Typ: Chunks[0].Typ 
          }) 
 
          let video = document.querySelector(".video") 
          video.src = URL.ObjektURLerstellen(blob) 
      }) 
 
 
    //Muss mediaRecorder.start() manuell starten 
})

Nun ist es im Grunde fertig und kann noch verfeinert werden, wie zum Beispiel das automatische Herunterladen des aufgenommenen Videos.

Sie können Folgendes tun:

let btn = document.querySelector(".record-btn") 
 
btn.addEventListener("klicken", asynchrone Funktion () { 
  lass stream = warte auf navigator.mediaDevices.getDisplayMedia({ 
    Video: wahr 
  }) 
 
  // Benötige bessere Browserunterstützung const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")  
             ? "video/webm; codecs=vp9"  
             : "video/webm" 
    let mediaRecorder = neuer MediaRecorder(stream, { 
        MIME-Typ: MIME 
    }) 
 
    lass Stücke = [] 
    mediaRecorder.addEventListener('Daten verfügbar', Funktion(e) { 
        chunks.push(e.daten) 
    }) 
 
   mediaRecorder.addEventListener('Stopp', Funktion(){ 
      lass blob = neuer Blob(Chunks, { 
          Typ: Chunks[0].Typ 
      }) 
      let url = URL.createObjectURL(blob) 
 
      let video = document.querySelector("video") 
      video.src = URL 
 
      lass a = Dokument.createElement('a') 
      a.href = URL 
      a.download = "video.webm" 
      ein.Klick() 
  }) 
 
 
    //Muss mediaRecorder.start() manuell starten 
})

Nun ist die grundlegendste Aufnahmefunktion fertig. Probieren wir sie aus!!

Dies ist das Ende dieses Artikels über die Verwendung von JS zum Erstellen einer Bildschirmaufzeichnungsfunktion. Weitere Informationen zur Verwendung von JS zum Erstellen einer Bildschirmaufzeichnungsfunktion finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Zusammenfassung der JS-Tipps zum Erstellen oder Füllen von Arrays beliebiger Länge

<<:  So fügen Sie Konfigurationsoptionen zum Discuz!-Forum hinzu

>>:  Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element

Artikel empfehlen

Beim Aktualisieren der automatisch inkrementierten Primärschlüssel-ID in MySQL sind Probleme aufgetreten

Inhaltsverzeichnis Warum die Auto-Inkrement-ID ak...

Detailliertes Beispiel des MySQL InnoDB-Sperrmechanismus

1. InnoDB-Sperrmechanismus Die InnoDB-Speicher-En...

So verwenden Sie iostat zum Anzeigen der IO-Leistung von Linux-Festplatten

TOP-Beobachtung: Der Prozentsatz der CPU-Zeit, de...

Was sind Inline-Elemente und Blockelemente?

1. Inline-Elemente nehmen nur die Breite des Inhal...

Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Schauen wir uns zunächst ein Beispiel an Code kopi...

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Eine kurze Beschreibung der Umgebungsvariablenkon...

Wie melde ich mich per Remote-Zugriff bei der MySql-Datenbank an?

Einführung: Manchmal müssen wir zur Entwicklung e...

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Berechtigungen, Erstellen, Löschen, Kopieren, Verschieben, Suchen usw.]

Dieser Artikel beschreibt die Linux-Dateiverwaltu...

Problem der Inkonsistenz der MySQL-Multiplikations- und Divisionsgenauigkeit (vier Dezimalstellen nach der Division)

Frage Als ich heute eine Projektfunktion schrieb,...

Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind

Hier sind einige Punkte, die Sie bei der Registri...

Installationsmethode für mysql-8.0.17-winx64 unter Windows 10

1. Von der offiziellen Website herunterladen und ...

Designtheorie: Zu den Themen Schema, Ressourcen und Kommunikation

<br />In vielen kleinen Unternehmen besteht ...

Grafisches Tutorial zur Installation und Konfiguration der Mysql5.7.17 winx64.zip-Dekomprimierungsversion

1. Laden Sie mysql-5.7.17-winx64.zip herunter; Li...

Detaillierte Bereitstellung des Alibaba Cloud Servers (grafisches Tutorial)

Ich habe vor Kurzem Front-End- und Back-End-Techn...

Import-, Export-, Sicherungs- und Migrationsvorgänge für Docker-Images

Export: docker save -o centos.tar centos:latest #...