Créez un enregistreur d'écran simple avec HTML, CSS et JavaScript

Ce projet présente un simple enregistreur d'écran construit en utilisant HTML, CSS et JavaScript, sans recourir à des bibliothèques externes. Il capture l'activité de l'écran ainsi que l'audio, offrant une solution basique mais fonctionnelle pour créer de courts enregistrements d'écran. Explorons ses fonctionnalités et la structure de son code.

Fonctionnalité :

L'enregistreur permet aux utilisateurs de capturer leur écran et leur audio directement dans leur navigateur. En cliquant sur le bouton d'enregistrement, les utilisateurs sélectionnent la zone d'enregistrement (un onglet du navigateur, une fenêtre d'application ou l'écran entier). Un compte à rebours précède l'enregistrement et la vidéo WebM résultante est disponible en téléchargement.

Structure du code :

Le projet se compose de trois fichiers principaux :

• index.html : Fournit l'interface utilisateur (UI) avec une zone de prévisualisation vidéo, un bouton d'enregistrement et un lien de téléchargement.
• style.css : Stylise les éléments de l'interface utilisateur, garantissant la réactivité sur différentes tailles d'écran.
• script.js : Contient la logique JavaScript de base pour la capture d'écran, l'enregistrement audio et le traitement vidéo.

HTML (index.html) : Le HTML définit la structure de base, y compris l'élément vidéo pour afficher l'enregistrement et les boutons de contrôle.

CSS (style.css) : Le CSS stylise les éléments de la page, créant une mise en page propre et réactive. Les styles clés incluent :

• Réinitialisations globales pour un style cohérent.
• Centrage du contenu principal.
• Une superposition de compte à rebours en plein écran.
• Mise à l'échelle réactive pour l'élément vidéo.
• Style des boutons et des liens.
• Requêtes multimédias pour la réactivité mobile. (Exemple : @media (max-width: 768px))

JavaScript (script.js) : Le code JavaScript gère les fonctionnalités de base :

1. Écouteur d'événement : Un écouteur d'événement sur le bouton d'enregistrement déclenche la fonction startScreenCapturing.
2. Capture multimédia : La fonction startScreenCapturing utilise navigator.mediaDevices.getDisplayMedia pour capturer l'écran et navigator.mediaDevices.getUserMedia pour l'entrée audio. La gestion des erreurs est incluse si la capture audio échoue.
3. Enregistrement : La fonction recordStream utilise MediaRecorder pour enregistrer les flux audio et vidéo combinés. Un compte à rebours est implémenté à l'aide de setTimeout.
4. Télécharger : Une fois l'enregistrement arrêté, un objet Blob est créé et le lien de téléchargement est mis à jour pour permettre aux utilisateurs de sauvegarder l'enregistrement.

Questions fréquemment posées (FAQ) :

• Capture audio: La capture audio du système dépend des politiques de support et de sécurité du navigateur.
• Dépannage: Si l'enregistrement de l'écran échoue, vérifiez la compatibilité du navigateur avec navigator.mediaDevices.getDisplayMedia.
• Format vidéo: La vidéo est enregistrée au format Webm.
• Qualité audio: Le script utilise l'annulation d'écho et la suppression du bruit, mais un microphone externe peut améliorer la qualité.
• Fonctionnalité de pause: Actuellement, la pause de l'enregistrement n'est pas prise en charge.
• Taille du fichier: La taille du fichier dépend de la longueur et de la qualité de l'enregistrement.

Avantages et inconvénients:

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

Cette vue d'ensemble concise fournit une compréhension claire des capacités de l'enregistreur d'écran et de la structure de code sous-jacente. Le projet sert de bon point de départ pour en savoir plus sur l'enregistrement d'écran basé sur le navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!