Outil d'Enregistrement d'Écran

L’enregistreur d’écran capture directement dans le navigateur tout l’écran, une fenêtre d’application ou un onglet. Selon le navigateur et les autorisations, il peut aussi inclure l’audio système et l’entrée micro, ce qui permet de créer rapidement tutoriels, reproductions de bug, démonstrations produit, extraits de cours, revues de design ou explications de support sans logiciel séparé. Avant d’enregistrer, il faut vérifier les fenêtres privées, notifications, mots de passe, données client et onglets non concernés, car la zone choisie est capturée telle quelle. Le traitement est local et le fichier peut être téléchargé, mais qualité et pistes audio dépendent de l’environnement.

La capture débute par navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }), qui renvoie un MediaStream contenant une piste vidéo (l'écran, la fenêtre ou l'onglet choisi) et optionnellement une piste audio lorsque le navigateur et la source le permettent. L'utilisateur choisit la surface dans une boîte de dialogue native, et le flux se termine automatiquement quand il clique sur le bouton système Arrêter le partage, ce qui déclenche l'événement ended de la piste et permet à l'enregistreur de finaliser le fichier. La sortie encodée est produite par l'API MediaRecorder. Le choix du conteneur et du codec passe par MediaRecorder.isTypeSupported() qui teste des candidats tels que video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus, et sous Safari video/mp4;codecs=avc1. L'événement ondataavailable se déclenche périodiquement (ou à l'arrêt), délivrant des fragments Blob qui sont concaténés en un seul Blob avec le mimeType négocié. videoBitsPerSecond et audioBitsPerSecond arbitrent entre qualité et taille de fichier, et un screencast 1080p typique à 4 Mbps VP9 occupe environ 30 Mo par minute. Lorsque l'audio système et le microphone sont tous deux demandés, la page construit un AudioContext, encapsule chaque MediaStreamTrack dans un MediaStreamAudioSourceNode, et les mixe via un GainNode vers un MediaStreamAudioDestinationNode. La piste audio fusionnée remplace les flux originaux avant le démarrage du MediaRecorder, de sorte que le WebM résultant contient une seule piste Opus mixée au lieu de deux pistes distinctes. La compatibilité navigateur requiert Chrome 72+, Firefox 66+ ou Safari 13+ ; les navigateurs plus anciens refusent getDisplayMedia ou ignorent la contrainte audio.

• API de capture : navigator.mediaDevices.getDisplayMedia({ video, audio }) renvoie un MediaStream ; l'utilisateur choisit l'écran/fenêtre/onglet dans une boîte de dialogue système
• Encodeur : MediaRecorder avec isTypeSupported() testant d'abord video/webm;codecs=vp9,opus, puis se rabattant sur vp8 ou H.264/AVC1 en MP4
• Sortie fragmentée : ondataailable produit des tranches Blob qui sont concaténées et encapsulées dans un Blob du mimeType négocié
• Mixage audio : AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode fusionnent l'audio système et le micro en une seule piste Opus
• Déclenchement de fin de flux : l'événement ended de la piste vidéo se déclenche lorsque l'utilisateur clique sur la barre Arrêter le partage du navigateur, finalisant l'enregistrement
• Contrôle du débit : videoBitsPerSecond autour de 2,5-8 Mbps pour du 1080p ; 4 Mbps VP9 représente environ 30 Mo par minute
• Compatibilité navigateur : Chrome 72+, Firefox 66+, Safari 13+ ; la capture audio d'onglet ne fonctionne que dans les navigateurs Chromium avec la case Partager l'audio de l'onglet cochée