1. Multimèdia i VTT

Ubicació dels arxius de vídeo

/public/assets/videos

Es pot veure un total de dos vídeos, cadascun disponible en dos formats diferents (.mp4 i .webm) i en tres qualitats: 4K, Full HD i 720p.

Primer video: ffmpeg -i input.mp4 -ss 00:00:30 -to 00:05:00 -c copy output.mp4

Segon video: ffmpeg -i input.mp4 -ss 00:05:10 -to 00:08:50 -c copy output.mp4

mp4 -> webm: ffmpeg -i input.mp4 -c:v libvpx-vp9 -cpu-used 4 -b:v 0 -crf 30 -c:a libopus output.webm

4K -> Full HD: ffmpeg -i input_4k.mp4 -vf scale=1920:1080 -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output_1080p.mp4

4K -> 720p: ffmpeg -i input_4k.mp4 -vf scale=1280:720 -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output_720p.mp4

Ubicació dels arxius .vtt

/public/media/

Descripcions

Facilitar la comprensió dels vídeos mitjançant pistes de descripcions que actúen com a subtítols, en diversos idiomes (català, castellà i anglès).

Capítols

Permetre la navegació per capítols dins d’un mateix vídeo, facilitant l’accés directe a seccions específiques.

Metadades (JSON)

Enriquir el contingut amb informació addicional incrustada en el fitxer VTT, com ara descripcions contextuals, dades de localització o nom i espècie de l'animal en qüestió.

• Nom, espècie i descripció:

• Imatge:

• coordenades geogràfiques:

Script per bloquejar el popup de l'API de Google Maps.

let times = [100, 200, 300, 400, 500, 1000, 1500, ...];

times.forEach(function (time) {
    setTimeout(function () {
        let acceptButton = document.querySelector('.dismissButton');
        if (acceptButton) {
            acceptButton.click();
            console.log(`Botón clickeado después de ${time} ms.`);
        }
    }, time);
});

Generar capítols dinàmics per a un vídeo

Es creen botons de capítols que permeten navegar per un vídeo segons les dades i la pista de metadades.

Generació d'un botó per cada capítol de les dades:

data.forEach((objeto, index) => {
    const button = document.createElement('button');
    button.textContent = objeto.Nombre;
    button.classList.add('chaptersButton');

Cada botó s’associa amb el temps d’inici del capítol (extret del track de metadades):

const cue = document.getElementById('metaTrack').track.cues[index];
button.addEventListener('click', () => {
    video.currentTime = cue.startTime - 0.001;
    video.play();
});

2. Player

• Reproducció automàtica sense so.
• Controls personalitzables (play, pause, mute, fullscreen).
• Opció d'activar/descativar els subtítols i canviar-ne l'idioma, integrant diverses pistes VTT.
• Selecció de la qualitat del vídeo.
• Segons la resolució de la pantalla i utilitzant media queries, es carrega una qualitat i resolució o una altra.

3. IA offline

Ffmpeg & Transformers

Per a trossejar el vídeo cada 10 segons, generant petits segments que després s’han processat amb transformers i la llibreria Torch de Python per extreure descripcions de les espècies animals que apareixen en cada fragment.

Treure captures cada 10 segons

ffmpeg -i video -vf fps=1/10 thumb/frame_%04d.jpg

Transformers pipeline

1. Dependències i llibreries:

(python)
python -m venv .venv
.venv/Scripts/activate
pip install torch torchvision torchaudio
pip install transformers

2. Carregar el model de Hugging Face

captioner = pipeline("image-to-text", model="nlpconnect/vit-gpt2-image-captioning")

3. Llistar les imatges

images = sorted([f for f in os.listdir(image_folder) if f.endswith(".jpg")])

4. Generar descripcions per a cada imatge

descriptions = {}
for img in images:
    image_path = os.path.join(image_folder, img)
    image = Image.open(image_path)

    result = captioner(image)
    descriptions[img] = result[0]['generated_text']
    print(f"{img}: {result[0]['generated_text']}")

5. Guardar les descripcions en un arxiu de text

with open("descriptions2.txt", "w") as f:
    for img, desc in descriptions.items():
        f.write(f"{img}: {desc}\n")

ChatGPT

Un cop obtingudes aquestes descripcions, s’han traduït al català i castellà.