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

Einführung und detaillierte Verwendung von React Fragment

Inhaltsverzeichnis Vorwort Motivation für Fragmen...

Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL

In MySQL kann das Problem der Groß- und Kleinschr...

vue verwendet Ele.me UI, um die Filterfunktion von Teambition zu imitieren

Inhaltsverzeichnis Problembeschreibung Die allgem...

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Obwohl Microsoft T4-Vorlagen bereitstellt, finde ...

So fügen Sie Docker ein Zertifikat hinzu

1. Upgrade-Vorgang: sudo apt-get update Probleme ...

Zusammenfassung der XHTML-Tags auf Blockebene

* Adresse - Adresse * Blockzitat - Blockzitat * Mi...

Beispieldemonstration der Vuex-Modularisierung und Namespaces

1. Zweck: Machen Sie den Code leichter wartbar un...

Beispiel für die Bereitstellung einer Laravel-Anwendung mit Docker

Das in diesem Artikel verwendete PHP-Basisimage i...

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Inhaltsverzeichnis Konfigurieren Sie zuerst packa...

So führen Sie SCSS in ein React-Projekt ein

Laden Sie zuerst die Abhängigkeiten herunter Garn...

MySQL-Abfragebaumstrukturmethode

Inhaltsverzeichnis MySQL-Abfragebaumstruktur 1. Ü...

Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

Überwachungsmethode in Vue betrachten Beachten Na...

Detailliertes Tutorial zur Installation des PHP-FPM-Dienstes/der PHP-FPM-Erweiterung/-Konfiguration in Docker

Als ich php56 mit brew auf mac installierte, stie...

Verwenden Sie @font-face, um Sonderzeichen auf Webseiten zu implementieren (benutzerdefinierte Schriftarten erstellen)

Vor einigen Tagen habe ich einen Artikel über die...

JavaScript implementiert die Verarbeitung großer Datei-Uploads

Beim Hochladen von Dateien, z. B. Videodateien, d...