Erstellen Sie einen einfachen Bildschirmrekorder mit HTML, CSS und JavaScript

Dieses Projekt demonstriert einen einfachen Bildschirmrekorder, der mit HTML, CSS und JavaScript erstellt wurde, ohne auf externe Bibliotheken angewiesen zu sein. Es erfasst Bildschirmaktivitäten zusammen mit Audio und bietet eine einfache, aber funktionale Lösung für die Erstellung kurzer Bildschirmaufnahmen. Lassen Sie uns seine Funktionalität und Codestruktur erkunden.

Funktionalität:

Der Rekorder ermöglicht es Benutzern, ihren Bildschirm und Audio direkt in ihrem Browser aufzunehmen. Durch Klicken auf die Aufnahmeschaltfläche wählen Benutzer den Aufnahmebereich aus (eine Browser-Registerkarte, ein Anwendungsfenster oder den gesamten Bildschirm). Der Aufnahme geht ein Countdown voraus und das resultierende WebM-Video steht zum Download zur Verfügung.

Codestruktur:

Das Projekt besteht aus drei Hauptdateien:

• index.html: Stellt die Benutzeroberfläche (UI) mit einem Videovorschaubereich, einer Aufnahmeschaltfläche und einem Download-Link bereit.
• style.css: Gestaltet die UI-Elemente und stellt so die Reaktionsfähigkeit über verschiedene Bildschirmgrößen hinweg sicher.
• script.js: Enthält die Kern-JavaScript-Logik für die Bildschirmaufnahme, Audioaufzeichnung und Videoverarbeitung.

HTML (index.html): Das HTML legt die Grundstruktur fest, einschließlich des Videoelements zur Anzeige der Aufzeichnung und Schaltflächen zur Steuerung.

CSS (style.css): Das CSS gestaltet die Seitenelemente und sorgt so für ein sauberes und ansprechendes Layout. Zu den wichtigsten Stilen gehören:

• Globale Resets für einheitliches Styling.
• Zentrierung des Hauptinhalts.
• Ein Countdown-Overlay im Vollbildmodus.
• Responsive Skalierung für das Videoelement.
• Styling für Schaltflächen und Links.
• Medienabfragen für mobile Reaktionsfähigkeit. (Beispiel: @media (max-width: 768px))

JavaScript (script.js): Der JavaScript-Code übernimmt die Kernfunktionalität:

1. Ereignis-Listener: Ein Ereignis-Listener auf der Aufnahmetaste löst die startScreenCapturing-Funktion aus.
2. Medienerfassung: Die startScreenCapturing-Funktion verwendet navigator.mediaDevices.getDisplayMedia zum Erfassen des Bildschirms und navigator.mediaDevices.getUserMedia für die Audioeingabe. Fehlerbehandlung ist enthalten, wenn die Audioaufnahme fehlschlägt.
3. Aufzeichnung: Die Funktion recordStream verwendet MediaRecorder, um die kombinierten Audio- und Videostreams aufzuzeichnen. Mit setTimeout.
wird ein Countdown-Timer implementiert
4. Herunterladen: Sobald die Aufzeichnung stoppt, wird ein Blob-Objekt erstellt und der Download-Link wird aktualisiert, damit Benutzer die Aufzeichnung speichern können.

Häufig gestellte Fragen (FAQ):

• Audioaufnahme: System -Audioerfassung hängt von Browser -Unterstützung und Sicherheitsrichtlinien ab.
• Fehlerbehebung: Wenn die Bildschirmaufzeichnung fehlschlägt, überprüfen Sie die Browserkompatibilität mit navigator.mediaDevices.getDisplayMedia.
.
• Videoformat:
Das Video wird im Webm -Format gespeichert.
• Audioqualität:
Das Skript verwendet Echo -Stornierung und Rauschunterdrückung, aber ein externes Mikrofon kann die Qualität verbessern.
• PAUSE -Funktionalität:
Derzeit wird die Pause der Aufzeichnung nicht unterstützt.
• Dateigröße:
Dateigröße hängt von der Aufzeichnungslänge und -qualität ab.

Vor- und Nachteile:

Pros	Cons
Lightweight, no external libraries	Limited to modern browsers
Simple implementation	No advanced editing features
Video and audio recording	Audio may not work on all devices/browsers
WebM format download	May require format conversion for sharing
Responsive design	No real-time preview during recording

Diese kurze Übersicht bietet ein klares Verständnis der Funktionen des Bildschirmrekorders und der zugrunde liegenden Codestruktur. Das Projekt dient als guter Ausgangspunkt für das Erlernen der browserbasierten Bildschirmaufzeichnung.

Das obige ist der detaillierte Inhalt vonErstellen Sie einen einfachen Bildschirmrekorder mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!