Que fait Enregistrement d'écran et démos ?
Un enregistrement scripté est reproductible. Lorsque l'interface utilisateur change, vous réexécutez le script au lieu de réenregistrer manuellement.
Choisissez la méthode
| Situation | Méthode |
|---|---|
| Application web accessible dans un navigateur | Enregistrement scripté avec Playwright |
| Application de bureau ou workflow plein écran | Enregistreur OS (OBS Studio, Windows Game Bar, capture d'écran macOS) |
| Le code source de l'application est disponible et un résultat poli sans glitch est souhaité | Reconstruire les écrans en tant que composants statiques dans Remotion (voir remotion-programmatic-video) |
| CLI | Enregistreur de terminal (asciinema, VHS) ou un composant de terminal animé |
Enregistrement Playwright (Python)
pip install playwright && playwright install chromium
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
ctx = browser.new_context(
viewport={"largeur": 1920, "hauteur": 1080},
record_video_dir="enregistrements/",
record_video_size={"largeur": 1920, "hauteur": 1080},
)
page = ctx.new_page()
page.goto("https://example.com")
page.wait_for_load_state("networkidle")
page.wait_for_timeout(800) # laisser le spectateur lire
page.get_by_role("button", name="Se connecter").click()
page.get_by_label("Email").type("[email protected]", delay=60) # frappe visible
page.wait_for_timeout(1200)
ctx.close() # la vidéo est finalisée à la fermeture
browser.close()
La sortie est en WebM. Convertissez :
ffmpeg -i enregistrements/xyz.webm -c:v libx264 -crf 18 -pix_fmt yuv420p -r 30 out/demo.mp4
Améliorez l'aspect
- Données de démonstration : utilisez un compte de démonstration prérempli avec des données réalistes et non sensibles. N'enregistrez jamais de vraies données clients, jetons ou e-mails.
- Fenêtre : fenêtre fixe 1920x1080, masquez les barres de favoris et notifications, zoom léger (110 à 125 pour cent) pour que le texte soit lisible sur un téléphone.
- Rythme : pause de 0,5 à 1 s après chaque action. Tapez avec un délai. Évitez les sauts instantanés.
- Curseur : Playwright ne dessine pas de curseur. Injectez un petit curseur DOM, ou ajoutez-en un en post-production (Remotion ou une superposition).
- Déterminisme : attendez avec
expect(locator).to_be_visible()plutôt que des attentes fixes, puis ajoutez des pauses délibérées pour les spectateurs. - Secrets : floutez ou masquez les champs dans le script de la page (
page.add_style_tag) avant l'enregistrement.
Post-production
# Couper le temps mort : garder de 12 s à 41 s
ffmpeg -ss 12 -i demo.mp4 -t 29 -c:v libx264 -crf 18 out/trimmed.mp4
# Accélérer les attentes ennuyeuses (par ex. 4x de 20 s à 30 s) nécessite une division ; le plus simple est de couper, accélérer, réassembler
# Zoomer sur une région : recadrer puis redimensionner (x:y:w:h en pixels source)
ffmpeg -i demo.mp4 -vf "crop=960:540:480:270,scale=1920:1080" out/zoom.mp4
Pour un zoom/panoramique animé fluide suivant le curseur, utilisez Remotion (interpolate sur scale et translate).
Synchronisation avec la narration
- Écrivez d'abord le script (
video-planning), enregistrez la voix off (voiceover-tts). - Enregistrez l'écran, puis ajustez la vitesse par scène pour que chaque action tombe sur sa phrase. Calculez
vitesse = secondes_enregistrées / secondes_de_narration. - Utilisez les recettes de vitesse de
ffmpeg-essentials, ou retemporalisez dans la composition.
Liste de vérification
- Aucune donnée personnelle, clé API ou URL interne visible.
- Texte lisible en 1080p redimensionné sur un écran de téléphone.
- Aucun spinner de chargement de plus d'une seconde restant.
- Audio de la machine désactivé sauf si souhaité.