screen-record : Enregistrement d'opérations sur pages web publiques (contenu Reel)
Josh 2026-10-11, approuvé pour l'installation. Son seul but : enregistrer les opérations sur des pages web publiques pour créer des vidéos destinées aux Reels Instagram. Le processus de publication reste inchangé (IG / Threads utilisent la méthode habituelle via le navigateur box), cet outil ne touche pas à la publication.
Règles strictes (à respecter à chaque fois)
- Utiliser un navigateur entièrement nouveau, temporaire, en mémoire seulement (
chromium.launch()+newContext(), sansuserDataDir). - Ne jamais pointer vers le profil de navigateur connecté de box ; ne jamais utiliser
--extension,attach, CDP / wsEndpoint pour se connecter au navigateur box ; ne jamais charger de cookies ou storageState ; ne pas utiliser--persistent/--profile. - Ne pas se connecter à un site, ne pas taper de texte, ne pas soumettre de formulaire, ne pas publier, ne pas commenter, ne pas aimer.
- Enregistrer uniquement des pages publiques (http/https, pas localhost/réseau interne). IG, Threads, FB peuvent être consultés uniquement en mode non connecté pour les pages publiques ; si un mur de connexion apparaît, changer de source, ne pas essayer de se connecter.
- record.mjs inclut une protection intégrée : rejette toute spec contenant storageState / cookies / userDataDir / profile / cdp / extension / login / password / fill / type ; bloque toutes les requêtes POST / PUT / PATCH / DELETE (le log affichera
blocked POST ..., c'est normal) ; refuse de cliquer sur les boutons de soumission de formulaire ; rejette les URL non http(s) ou internes. - Ne pas modifier record.mjs pour contourner les protections. Si une page nécessite une connexion, s'arrêter et demander à Josh.
Installé
- Playwright (bibliothèque Node) 1.64.0 : installé dans
node_modules/(Apache-2.0) - Playwright CLI
@playwright/cli0.1.22 : commande globaleplaywright-cli(~/.local/bin, Apache-2.0). La session par défaut est un profil en mémoire, peut être utilisée temporairement pour voir des pages et faire des captures d'écran ; ne pas ajouter--persistent,--profile,attach --extension. - Chromium :
npx playwright install chromium(~/.cache/ms-playwright/chromium-1248, chromium_headless_shell-1248) @playwright/mcpn'est pas installé (CLI + ce script suffisent, Microsoft recommande également CLI pour les agents).
Utilisation
cd <SKILLS_DIR>/screen-record
node record.mjs spec.json # Sortie dans spec.out
node record.mjs spec.json --out /path/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3 # Mosaïque 4x3 de miniatures, visualisable avec Read
Exemple : examples/playwright-mcp.json (vidéo de test : <VOTRE_ESPACE_DE_TRAVAIL>/media-team/03-drafts/screen-record-test/test.mp4, 19,8 secondes, 4,1 Mo).
spec.json
{
"url": "https://github.com/microsoft/playwright-mcp",
"out": "<VOTRE_ESPACE_DE_TRAVAIL>/media-team/03-drafts/<sujet>/work/screen/clip01.mp4",
"viewport": {"width": 720, "height": 1280},
"outSize": {"width": 1080, "height": 1920},
"hide": [".cookie-banner"],
"steps": [
{"action": "chapter", "title": "Playwright MCP", "description": "github.com/microsoft/playwright-mcp", "ms": 2200},
{"action": "scroll", "by": 500, "ms": 2000},
{"action": "scroll", "role": "heading", "name": "Key Features", "ms": 2000},
{"action": "highlight", "role": "heading", "name": "Key Features", "label": "Key Features", "ms": 2500},
{"action": "hover", "text": "Getting started"},
{"action": "click", "text": "Apache-2.0 license"},
{"action": "goto", "url": "https://playwright.dev"},
{"action": "wait", "ms": 1000}
]
}
- Pour trouver un élément, trois possibilités :
selector(CSS),role+name(le plus fiable),text(on peut ajouterexact). scroll:bypixels, ou utiliserto/role/textpour faire défiler jusqu'à un élément (offsetpar défaut à 25% du haut),msdurée du défilement (avec easing).highlight: cadre jaune + étiquette optionnelle, supprimé aprèsms.chapter: carte de chapitre native Playwright (fond flou + titre).click,hover: incluent les showActions natifs Playwright : curseur animé + contour de la cible + description de l'action ("showActions": falsepeut être utilisé pour désactiver).- Autres options :
fps(défaut 30),crf(défaut 23),mobile(simulation mobile),colorScheme,locale,tail,keepWebm.
Dimensions de l'écran
Le screencast Playwright enregistre en pixels CSS (le deviceScaleFactor n'affecte pas la vidéo), donc :
- Par défaut, enregistrement en 720x1280, puis agrandi à 1080x1920 avec lanczos : mise en page comme un grand téléphone, texte assez grand, qualité légèrement adoucie mais suffisante pour un Reel.
- Pour une netteté maximale :
"viewport": {"width":1080,"height":1920}(mise en page ordinateur, texte plus petit). - Pour enregistrer en mode paysage puis recadrer en portrait :
"viewport": {"width":1280,"height":720}, "cropTo916": true(on peut ajouter"cropX":200pour spécifier le point de départ du recadrage), la sortie reste 1080x1920, mais seule une bande centrale est conservée, généralement moins bon que d'utiliser un viewport portrait directement.
Intégration dans le montage final
- stock-footage-reel : dans le fichier shots.json, pour ce plan, écrire :
"pick": {"source":"file","path":"/abs/clip01.mp4","license":"Screen recording of <site>","author":"<propriétaire du site>"} - OpenMontage (via openmontage-house) : l'ajouter comme clip local dans la liste des sources, ou comme source d'enregistrement pour le flux screen-demo.
- Les règles habituelles s'appliquent : portrait 1080x1920, voix off Sarah Explains, sous-titres principaux en chinois traditionnel + petits sous-titres en anglais, couverture Vox, vidéo IG finale de 45 Mo maximum.
- Ajouter une entrée dans credits.json :
{"source":"screen-record","credit":"Screen recording of <site>","url":"<URL>","recorded":"YYYY-MM-DD"}; le crédit de fin indique "Screen recording of ". - Il s'agit de sites web tiers : utiliser uniquement à des fins de présentation / commentaire. Ne pas enregistrer de données personnelles, messages privés ou contenu payant.