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

Implementierung von Check Constraints in MySQL 8.0

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

Implementierung von Check Constraints in MySQL 8.0

Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben

Analyse der Verwendung temporärer MySQL-Tabellen [Abfrageergebnisse können in temporären Tabellen gespeichert werden]

Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux

Die 6 effektivsten Möglichkeiten zum Schreiben von HTML und CSS

Gängige Master-Slave-Replikationsarchitekturen in MySQL 4

Eine kurze Diskussion über die Unterschiede und Verbindungen zwischen .html, .htm, .shtml und .shtm

Detaillierte Analyse der untergeordneten und übergeordneten Vue-Komponenten

Detaillierte Erklärung der Docker-Maschinennutzung

Beispiel für die Implementierung der Graphql-Schnittstelle in Vue

Artikel empfehlen

Teilen Sie den Installationsdatensatz für MySql8.0.19

So legen Sie einen Alias für einen benutzerdefinierten Pfad in Vue fest

Zwei Möglichkeiten zum vollständigen Löschen von Benutzern unter Linux

52 SQL-Anweisungen, die Ihnen Leistungsoptimierung beibringen

Installations- und Konfigurationstutorial von MongoDB unter Linux

Detaillierte Erläuterung der Fallstricke von add_header im Nginx-Konfigurationstutorial

Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

Css3 realisiert nahtloses Scrollen und Anti-Shake

Installieren Sie Percona Server+MySQL auf CentOS 7

Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose

ReactJs-Grundlagen-Tutorial - Essential Edition

CSS-Methode zur Steuerung der Elementhöhe von unten nach oben und von oben nach unten

Rendering-Funktion und JSX-Details

Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null

VMware12.0-Installation Ubuntu14.04 LTS-Tutorial