@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/videoFrameExtractor/i18n/es.ts

@@ -0,0 +1,235 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { VideoFrameExtractorUI, VideoFrameExtractorLocaleContent } from '../index';
+
+const slug = 'extractor-frames-video';
+const title = 'Extractor de Frames de Vídeo - Captura fotogramas en alta resolución';
+const description = 'Extrae imágenes individuales de tus vídeos con precisión de frame. Captura momentos perfectos en HD de forma local y gratuita.';
+
+const ui: VideoFrameExtractorUI = {
+    uploadTitle: "Sube un archivo de vídeo",
+    uploadFormats: "MP4, WebM, MOV o MKV (Máx. 500MB)",
+    privacyNote: "El vídeo no se sube a Internet, se procesa en tu navegador.",
+    playLabel: "Play",
+    pauseLabel: "Pausa",
+    captureBtn: "Capturar Frame",
+    prevFrame: "-1F",
+    nextFrame: "+1F",
+    batchTitle: "Extracción Automática",
+    batchEvery: "Cada",
+    batchStart: "Iniciar Secuencia",
+    batchProcessing: "Extrayendo...",
+    galleryTitle: "Frames Capturados",
+    galleryEmpty: "Las capturas aparecerán aquí conforme las realices.",
+    downloadAll: "Descargar Todo",
+    downloadHD: "Descargar Imagen HD",
+    resetBtn: "Subir otro vídeo"
+};
+
+const faq: VideoFrameExtractorLocaleContent['faq'] = [
+    {
+        question: "¿Puedo extraer frames de vídeos largos?",
+        answer: "Sí, siempre que tu navegador tenga suficiente memoria RAM para cargar el vídeo. Recomendamos archivos de hasta 500MB para un rendimiento óptimo.",
+    },
+    {
+        question: "¿En qué resolución se guardan las capturas?",
+        answer: "La captura se realiza a la resolución nativa del vídeo original. Si tu vídeo es 4K, obtendrás una imagen 4K de alta calidad.",
+    },
+];
+
+const howTo: VideoFrameExtractorLocaleContent['howTo'] = [
+    {
+        name: "Carga tu vídeo",
+        text: "Selecciona el archivo de vídeo desde tu dispositivo. No lo subiremos a ningún servidor.",
+    },
+    {
+        name: "Navega hasta el momento exacto",
+        text: "Usa la barra de tiempo o los botones de ±1 frame para mayor precisión quirúrgica.",
+    },
+    {
+        name: "Captura el fotograma",
+        text: "Pulsa el botón de captura para guardar el momento en la galería inferior.",
+    },
+    {
+        name: "Descarga en alta calidad",
+        text: "Descarga capturas individuales o toda la sesión en formato WebP optimizado.",
+    },
+];
+
+const bibliography: VideoFrameExtractorLocaleContent['bibliography'] = [
+    {
+        name: "Captura de fotogramas con HTML5 Video API",
+        url: "https://developer.mozilla.org/es/docs/Web/HTML/Element/video",
+    },
+];
+
+const seo: VideoFrameExtractorLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Extracción Profesional de Fotogramas de Vídeo',
+        items: [
+            'Precisión de fotograma único (±1 frame) para captura perfecta',
+            'Soporta MP4, WebM, MOV, MKV hasta 500MB',
+            'Resolución nativa del vídeo preservada (SD, HD, 4K)',
+            'Extracción por lotes automática a intervalos personalizados'
+        ]
+    },
+    { type: 'title', text: 'Extracción de Fotogramas: Congelando el Tiempo en Vídeo', level: 2 },
+    { type: 'paragraph', html: 'A veces, una imagen vale más que mil palabras. Pero encontrar esa imagen perfecta dentro de un vídeo de 10 minutos puede ser frustrante. Nuestra herramienta utiliza la potencia local de tu navegador para extraer fotogramas de precisión sin necesidad de software profesional.' },
+
+    { type: 'stats', items: [
+        { value: '±1', label: 'Precisión Frame Único', icon: 'mdi:target' },
+        { value: '100%', label: 'Resolución Nativa', icon: 'mdi:video-high-definition' },
+        { value: '500MB', label: 'Archivos Soportados', icon: 'mdi:file-video' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Casos de Uso Profesionales', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Cine y Fotografía',
+            description: 'Capturar fotogramas como referencia visual o composición',
+            icon: 'mdi:film',
+            points: [
+                'Extraer stills para marketing de películas',
+                'Referencias de composición de escenas',
+                'Análisis de fotograma a fotograma'
+            ]
+        },
+        {
+            title: 'Contenido Digital',
+            description: 'Crear miniaturas y portadas para redes sociales',
+            icon: 'mdi:youtube',
+            points: [
+                'Miniaturas de YouTube en alta resolución',
+                'Portadas para redes sociales',
+                'Thumbs para presentaciones'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Documentación Técnica',
+            description: 'Extraer fotogramas de tutoriales y demostraciones',
+            icon: 'mdi:book-open',
+            points: [
+                'Screenshots de vídeos tutoriales',
+                'Documentación visual step-by-step',
+                'Análisis de movimiento en tiempo real'
+            ]
+        },
+        {
+            title: 'Deportes y Acción',
+            description: 'Capturar el instante preciso de máxima acción',
+            icon: 'mdi:dumbbell',
+            points: [
+                'Análisis de técnica deportiva frame-by-frame',
+                'Captura de momentos heroicos',
+                'Estudio de movimiento'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Formatos de Vídeo Soportados', level: 3 },
+    { type: 'table', headers: ['Formato', 'Extensión', 'Compatibilidad', 'Notas'], rows: [
+        ['MPEG-4', 'MP4', 'Universal (100%)', 'Mejor compresión, ampliamente utilizado'],
+        ['WebM', 'WebM', 'Navegadores modernos', 'Compresión superior, menor tamaño'],
+        ['QuickTime', 'MOV', 'Safari, algunos reproductores', 'Estándar Apple'],
+        ['Matroska', 'MKV', 'Navegadores modernos', 'Contenedor flexible, calidad variable']
+    ] },
+
+    { type: 'card', title: 'Precisión de Fotograma Único', html: 'Moverse un solo frame adelante o atrás (±1 frame) es vital para capturar el instante perfecto: un salto, una sonrisa, un gesto, un instante científico. A 24 fps, cada fotograma dura apenas 41 milisegundos. Nuestra herramienta te da control milimétrico.' },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Privacidad total: el vídeo se procesa 100% localmente en tu navegador',
+            con: 'Limitado a tamaño de memoria RAM disponible (~500MB recomendado)'
+        },
+        {
+            pro: 'Resolución nativa preservada: SD, HD, 4K sin re-compresión',
+            con: 'Requiere navegador moderno con soporte HTML5 Video'
+        },
+        {
+            pro: 'Extracción por lotes automática a intervalos personalizados',
+            con: 'Para edición avanzada (trim, cortes) necesitas editor de vídeo'
+        },
+        {
+            pro: 'Exporta fotogramas en WebP optimizado o PNG sin compresión',
+            con: 'Un fotograma a la vez (no exporta secuencias GIF automatizadas)'
+        }
+    ], proTitle: 'Ventajas', conTitle: 'Limitaciones' },
+
+    { type: 'diagnostic', variant: 'info', title: 'Resolución y Frame Rate', icon: 'mdi:information', badge: 'Técnico', html: 'La resolución final del fotograma depende del vídeo original. Si el vídeo es 4K (3840x2160), extraerás fotogramas 4K. Si es 720p, obtendrás 720p. Sin upscaling inteligente: preservamos la información nativa del vídeo.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Frame (Fotograma)',
+            definition: 'Una imagen individual en una secuencia de vídeo. Un vídeo a 24 fps contiene 24 fotogramas por segundo.'
+        },
+        {
+            term: 'FPS (Frames Per Second)',
+            definition: 'Fotogramas por segundo. 24 fps (cine), 30 fps (vídeo web), 60 fps (video fluido), 120 fps (super slow-mo).'
+        },
+        {
+            term: 'Codec de Vídeo',
+            definition: 'Algoritmo de compresión: H.264 (MPEG-4), VP9 (WebM), HEVC. Determina tamaño de archivo y calidad.'
+        },
+        {
+            term: 'Bitrate (Velocidad de Bits)',
+            definition: 'Cantidad de datos procesados por segundo (Mbps). Mayor bitrate = mayor calidad pero archivos más grandes.'
+        },
+        {
+            term: 'Resolución de Vídeo',
+            definition: 'Dimensiones en píxeles: 720p (1280x720), 1080p (1920x1080), 4K (3840x2160), 8K (7680x4320).'
+        }
+    ] },
+
+    { type: 'message', title: 'Extracción Profesional de Fotogramas', ariaLabel: 'Información técnica sobre extracción de vídeo', html: 'No necesitas convertidores online complejos o software profesional. Un fotograma perfecto está a solo 3 clics: carga vídeo, navega, captura. Privacidad total, resolución nativa, descarga instantánea.' },
+
+    { type: 'title', text: 'Congelando Momentos de Vídeo', level: 3 },
+    { type: 'paragraph', html: 'Cada vídeo contiene cientos de fotogramas. Muchos de ellos son oro puro esperando a ser descubiertos. Utiliza esta herramienta para extraer esos momentos perfectos sin comprometer calidad ni privacidad.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'es',
+};
+
+export const content: VideoFrameExtractorLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Preguntas frecuentes sobre extracción de vídeo',
+    bibliography,
+    bibliographyTitle: 'Estándares técnicos de captura de vídeo',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/videoFrameExtractor/i18n/fr.ts

@@ -0,0 +1,235 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { VideoFrameExtractorUI, VideoFrameExtractorLocaleContent } from '../index';
+
+const slug = 'extracteur-frames-video-en-ligne-capturer-images-hd';
+const title = 'Extracteur de Frames de Vidéo - Capturez des images haute résolution';
+const description = 'Extrayez des images individuelles de vos vidéos avec une précision à l\'image près. Capturez des moments parfaits en HD localement et gratuitement.';
+
+const ui: VideoFrameExtractorUI = {
+    uploadTitle: "Importez un fichier vidéo",
+    uploadFormats: "MP4, WebM, MOV ou MKV (Max. 500 Mo)",
+    privacyNote: "La vidéo n'est pas téléchargée sur Internet, elle est traitée dans votre navigateur.",
+    playLabel: "Lecture",
+    pauseLabel: "Pause",
+    captureBtn: "Capturer l'image",
+    prevFrame: "-1F",
+    nextFrame: "+1F",
+    batchTitle: "Extraction automatique",
+    batchEvery: "Chaque",
+    batchStart: "Lancer la séquence",
+    batchProcessing: "Extraction en cours...",
+    galleryTitle: "Images capturées",
+    galleryEmpty: "Les captures apparaîtront ici au fur et à mesure.",
+    downloadAll: "Tout télécharger",
+    downloadHD: "Télécharger en HD",
+    resetBtn: "Importer une autre vidéo"
+};
+
+const faq: VideoFrameExtractorLocaleContent['faq'] = [
+    {
+        question: "Puis-je extraire des images de vidéos longues ?",
+        answer: "Oui, tant que votre navigateur dispose d'assez de RAM. Nous recommandons des fichiers jusqu'à 500 Mo pour des performances optimales.",
+    },
+    {
+        question: "Dans quelle résolution les captures sont-elles enregistrées ?",
+        answer: "La capture se fait à la résolution native de la vidéo originale. Si votre vidéo est en 4K, vous obtiendrez une image 4K de haute qualité.",
+    },
+];
+
+const howTo: VideoFrameExtractorLocaleContent['howTo'] = [
+    {
+        name: "Importez votre vidéo",
+        text: "Sélectionnez le fichier vidéo depuis votre appareil. Il n'est pas envoyé sur nos serveurs.",
+    },
+    {
+        name: "Naviguez jusqu'au moment exact",
+        text: "Utilisez la barre de navigation ou les boutons ±1 image pour une précision chirurgicale.",
+    },
+    {
+        name: "Capturez l'image",
+        text: "Appuyez sur le bouton de capture pour enregistrer l'instant dans la galerie ci-dessous.",
+    },
+    {
+        name: "Téléchargez en haute qualité",
+        text: "Téléchargez vos captures individuelles ou toute la session au format WebP optimisé.",
+    },
+];
+
+const bibliography: VideoFrameExtractorLocaleContent['bibliography'] = [
+    {
+        name: "Capture d'images avec l'API HTML5 Video",
+        url: "https://developer.mozilla.org/fr/docs/Web/HTML/Element/video",
+    },
+];
+
+const seo: VideoFrameExtractorLocaleContent['seo'] = [
+    {
+        type: 'summary',
+        title: 'Extraction Professionnelle d\'Images de Vidéo',
+        items: [
+            'Précision à l\'image près (±1 image) pour une capture parfaite',
+            'Supporte MP4, WebM, MOV, MKV jusqu\'à 500 Mo',
+            'Résolution native de la vidéo préservée (SD, HD, 4K)',
+            'Extraction par lots automatique à intervalles personnalisés'
+        ]
+    },
+    { type: 'title', text: 'Extraction d\'Images : Figer le Temps en Vidéo', level: 2 },
+    { type: 'paragraph', html: 'Une image vaut parfois mille mots. Mais trouver l\'image parfaite peut être frustrant. Notre outil utilise la puissance locale de votre navigateur pour extraire des images de précision sans logiciel professionnel.' },
+
+    { type: 'stats', items: [
+        { value: '±1', label: 'Précision à l\'image', icon: 'mdi:target' },
+        { value: '100 %', label: 'Résolution Native', icon: 'mdi:video-high-definition' },
+        { value: '500 Mo', label: 'Fichiers Supportés', icon: 'mdi:file-video' }
+    ], columns: 3 },
+
+    { type: 'title', text: 'Cas d\'Utilisation Professionnels', level: 3 },
+    { type: 'comparative', items: [
+        {
+            title: 'Cinéma et Photographie',
+            description: 'Capturer des images pour référence visuelle ou composition',
+            icon: 'mdi:film',
+            points: [
+                'Extraire des stills pour le marketing de films',
+                'Références de composition de scènes',
+                'Analyse image par image'
+            ]
+        },
+        {
+            title: 'Contenu Numérique',
+            description: 'Créer des miniatures et des couvertures pour les réseaux sociaux',
+            icon: 'mdi:youtube',
+            points: [
+                'Miniatures YouTube haute résolution',
+                'Couvertures pour réseaux sociaux',
+                'Vignettes pour présentations'
+            ],
+            highlight: true
+        },
+        {
+            title: 'Documentation Technique',
+            description: 'Extraire des images de tutoriels et démonstrations',
+            icon: 'mdi:book-open',
+            points: [
+                'Captures d\'écran de vidéos tutoriels',
+                'Documentation visuelle étape par étape',
+                'Analyse de mouvement en temps réel'
+            ]
+        },
+        {
+            title: 'Sports et Action',
+            description: 'Capturer l\'instant précis de l\'action maximale',
+            icon: 'mdi:dumbbell',
+            points: [
+                'Analyse technique sportive image par image',
+                'Capture de moments héroïques',
+                'Étude du mouvement'
+            ]
+        }
+    ], columns: 2 },
+
+    { type: 'title', text: 'Formats Vidéo Supportés', level: 3 },
+    { type: 'table', headers: ['Format', 'Extension', 'Compatibilité', 'Notes'], rows: [
+        ['MPEG-4', 'MP4', 'Universel (100 %)', 'Meilleure compression, très utilisé'],
+        ['WebM', 'WebM', 'Navigateurs modernes', 'Compression supérieure, taille réduite'],
+        ['QuickTime', 'MOV', 'Safari, certains lecteurs', 'Standard Apple'],
+        ['Matroska', 'MKV', 'Navigateurs modernes', 'Conteneur flexible, qualité variable']
+    ] },
+
+    { type: 'card', title: 'Précision à l\'Image Près', html: 'Se déplacer d\'une seule image en avant ou en arrière (±1 image) est vital pour capturer l\'instant parfait : un saut, un sourire, un geste. Notre outil vous donne un contrôle millimétrique.' },
+
+    { type: 'proscons', items: [
+        {
+            pro: 'Confidentialité totale : la vidéo est traitée à 100 % localement',
+            con: 'Limité par la mémoire RAM disponible (~500 Mo recommandés)'
+        },
+        {
+            pro: 'Résolution native préservée : SD, HD, 4K sans re-compression',
+            con: 'Nécessite un navigateur supportant HTML5 Video'
+        },
+        {
+            pro: 'Extraction par lots automatique à intervalles personnalisés',
+            con: 'Pour un montage avancé (coupes, trim), un éditeur est requis'
+        },
+        {
+            pro: 'Exportation en WebP optimisé ou PNG sans compression',
+            con: 'Une image à la fois (pas d\'exportation GIF animée)'
+        }
+    ], proTitle: 'Avantages', conTitle: 'Limitations' },
+
+    { type: 'diagnostic', variant: 'info', title: 'Résolution et Fréquence d\'Images', icon: 'mdi:information', badge: 'Technique', html: 'La résolution finale dépend de la vidéo d\'origine. Si la vidéo est en 4K (3840x2160), vous obtiendrez des images 4K. Nous préservons l\'information native sans upscaling.' },
+
+    { type: 'glossary', items: [
+        {
+            term: 'Frame (Image)',
+            definition: 'Une image individuelle dans une séquence vidéo. Une vidéo à 24 fps contient 24 images par seconde.'
+        },
+        {
+            term: 'FPS (Images par seconde)',
+            definition: 'Vitesse de défilement : 24 fps (cinéma), 30 fps (vidéo web), 60 fps (fluide).'
+        },
+        {
+            term: 'Codec Vidéo',
+            definition: 'Algorithme de compression : H.264 (MP4), VP9 (WebM). Détermine la taille et la qualité.'
+        },
+        {
+            term: 'Bitrate',
+            definition: 'Quantité de données par seconde (Mbps). Un bitrate élevé = meilleure qualité.'
+        },
+        {
+            term: 'Résolution Vidéo',
+            definition: 'Dimensions en pixels : 720p (1280x720), 1080p (1920x1080), 4K (3840x2160).'
+        }
+    ] },
+
+    { type: 'message', title: 'Extraction Professionnelle d\'Images', ariaLabel: 'Informations techniques', html: 'L\'image parfaite est à portée de clic : importez, naviguez, capturez. Confidentialité totale, résolution native, téléchargement instantané.' },
+
+    { type: 'title', text: 'Figer des Moments Vidéo', level: 3 },
+    { type: 'paragraph', html: 'Chaque vidéo contient des centaines d\'images. Beaucoup sont des pépites. Utilisez cet outil pour extraire ces moments parfaits.' }
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'fr',
+};
+
+export const content: VideoFrameExtractorLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    faqTitle: 'Foire Aux Questions sur l\'Extraction de Fotogrammes Vidéo',
+    bibliography,
+    bibliographyTitle: 'Normes Techniques pour la Capture Vidéo',
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/videoFrameExtractor/index.ts

@@ -0,0 +1,53 @@
+import type { AudiovisualToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import VideoFrameExtractor from './component.astro';
+import VideoFrameExtractorSEO from './seo.astro';
+import VideoFrameExtractorBibliography from './bibliography.astro';
+
+export interface VideoFrameExtractorUI {
+    uploadTitle: string;
+    uploadFormats: string;
+    privacyNote: string;
+    playLabel: string;
+    pauseLabel: string;
+    captureBtn: string;
+    prevFrame: string;
+    nextFrame: string;
+    batchTitle: string;
+    batchEvery: string;
+    batchStart: string;
+    batchProcessing: string;
+    galleryTitle: string;
+    galleryEmpty: string;
+    downloadAll: string;
+    downloadHD: string;
+    resetBtn: string;
+    [key: string]: string;
+}
+
+export type VideoFrameExtractorLocaleContent = ToolLocaleContent<VideoFrameExtractorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const videoFrameExtractor: AudiovisualToolEntry<VideoFrameExtractorUI> = {
+    id: 'extractor-frames-video',
+    icons: {
+        bg: 'mdi:video-vintage',
+        fg: 'mdi:camera-plus',
+    },
+    i18n: {
+        es: async () => es as unknown as VideoFrameExtractorLocaleContent,
+        en: async () => en as unknown as VideoFrameExtractorLocaleContent,
+        fr: async () => fr as unknown as VideoFrameExtractorLocaleContent,
+    },
+};
+
+export { VideoFrameExtractor, VideoFrameExtractorSEO, VideoFrameExtractorBibliography };
+
+export const VIDEO_FRAME_EXTRACTOR_TOOL: ToolDefinition = {
+    entry: videoFrameExtractor as unknown as AudiovisualToolEntry,
+    Component: VideoFrameExtractor,
+    SEOComponent: VideoFrameExtractorSEO,
+    BibliographyComponent: VideoFrameExtractorBibliography,
+};

package/src/tool/videoFrameExtractor/logic.ts

@@ -0,0 +1,49 @@
+export interface CapturedFrame {
+    id: string;
+    url: string;
+    timestamp: number;
+}
+
+export function formatTime(seconds: number): string {
+    const date = new Date(seconds * 1000);
+    const mm = date.getUTCMinutes().toString().padStart(2, "0");
+    const ss = date.getUTCSeconds().toString().padStart(2, "0");
+    const ms = Math.floor(date.getUTCMilliseconds()).toString().padStart(3, "0");
+    return `${mm}:${ss}.${ms}`;
+}
+
+export function generateId(): string {
+    return Math.random().toString(36).substring(2, 9);
+}
+
+export function captureFrameFromVideo(video: HTMLVideoElement): CapturedFrame | null {
+    if (!video.videoWidth || !video.videoHeight) return null;
+
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+
+    if (!ctx) return null;
+
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const url = canvas.toDataURL("image/webp", 1.0);
+    
+    return {
+        id: generateId(),
+        url,
+        timestamp: video.currentTime
+    };
+}
+
+export async function captureFrameAtTime(video: HTMLVideoElement, time: number): Promise<CapturedFrame | null> {
+    return new Promise((resolve) => {
+        const onSeeked = () => {
+            const frame = captureFrameFromVideo(video);
+            video.removeEventListener("seeked", onSeeked);
+            resolve(frame);
+        };
+        video.addEventListener("seeked", onSeeked);
+        video.currentTime = time;
+    });
+}

package/src/tool/videoFrameExtractor/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { videoFrameExtractor } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await videoFrameExtractor.i18n[locale]?.();
+if (!content) return null;
+---
+
+<SEORenderer content={{ locale, sections: content.seo || [] }} />