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

Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

Lernen Sie eine Minute am Tag, den Git-Server zu verwenden, um Debug-Zweige anzuzeigen und zu beheben

Linux-Fernsteuerungsprogramm für Windows-System (drei Methoden)

So legen Sie die Breite und Höhe von HTML-Tabellenzellen fest

So stellen Sie per SSH eine Verbindung zum Docker-Server her

Proxy_pass-Methode in mehreren if in Nginx-Standorten

7 Fähigkeiten, die großartige Grafikdesigner beherrschen müssen

Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung

Schritte zum Konfigurieren von Nginx SSL zur Implementierung des HTTPS-Zugriffs (für Anfänger geeignet)

Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

Vollständiger Prozessbericht der Nginx-Reverse-Proxy-Konfiguration

Artikel empfehlen

Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)

Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu

Installieren Sie MySQL 5.7.18 mit dem RPM-Paket unter CentOS 7

Vue implementiert ein verschiebbares Baumstrukturdiagramm

Detaillierte Erklärung, warum die gemeinsame Verwendung von v-if und v-for in Vue nicht empfohlen wird

Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10

So konfigurieren Sie den Whitelist-Zugriff in MySQL

Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position

MySQL-Benutzerdefinierte Funktion zum Bestimmen, ob es sich um einen positiven Ganzzahl-Beispielcode handelt

Lösen Sie das Problem der verstümmelten Zeichen im Tomcat10 Catalina-Protokoll

Beispielcode zum Mischen von Float und Margin in CSS

Analyse des Prinzips und der Methode zur Implementierung einer Linux-Festplattenpartition

Detaillierte Erklärung zur Verwendung von Teleport in Vue3

Fallstricke bei der Installation der dekomprimierten Version von MySQL 5.7.20 (empfohlen)

Die letzten zwei Jahre mit User Experience