8. Multimèdia

8.4. Vídeo

Als nostres sketches de P5 podem carregar i visualitzar vídeos també. El procés per fer-ho és molt similar al que seguim amb les imatges, ja que, en essència, un vídeo no és més que una successió d’imatges que aniran canviant a cadascun dels nostres frames. Per carregar el fitxer de vídeo, farem igual que per carregar qualsevol altre fitxer extern: utilitzarem la pestanya Files de la barra lateral d’Openprocessing. Una vegada que l’hàgim pujat a Openprocessing, el procés per mostrar-lo en el nostre canvas és també similar al que usàvem per mostrar imatges:

let vid; 

function preload() {
  vid = createVideo("myVideo.mp4 ");
}

function setup() {
  createCanvas(400, 400);
  vid.hide();
  vid.play();
}

function draw() {
  image(vid, 0, 0);
}

Primer, creem una variable per emmagatzemar el vídeo. Després en el preload() utilitzem el mètode createVideo(), al qual passarem com a paràmetre el nom del fitxer de vídeo amb la seva extensió. A continuació, en el setup() utilitzem el mètode hide(), ja que createVideo() automàticament crea un element HTML <vídeo> en el DOM i nosaltres no el volem mostrar, sinó que volem únicament dibuixar-lo en el nostre canvas. Després, utilitzem play() perquè el vídeo iniciï la reproducció, encara que alternativament també podem usar loop() perquè la reproducció del vídeo sigui en bucle. Finalment, per dibuixar el vídeo utilitzarem image(), al qual passarem com a paràmetre la variable on emmagatzemem el vídeo i les coordenades a les quals volem dibuixar-lo.

Totes les tècniques i els mètodes que hem utilitzat per a les imatges els podem aplicar també per als vídeos, per la qual cosa les nostres possibilitats creatives es multipliquen, encara que hem de tenir en compte que reproduir el vídeo és molt més costós quant a computació que mostrar una imatge, per la qual cosa el rendiment dels nostres sketches manipulant vídeo en temps real es pot veure afectat i el nostre frame rate pot fallar.

Càmera web

Una altra font de vídeo que podem mostrar als nostres sketches és el vídeo que procedeix de la nostra càmera web. Per accedir-hi, usarem createCapture() i li passarem com a paràmetre la constant VÍDEO; posteriorment, seguirem els mateixos passos que amb fitxers de vídeo per mostrar-la en el nostre canvas. Igual que amb el vídeo, haurem d’usar hide(), ja que P5 automàticament crearà un objecte al DOM que nosaltres no volem mostrar, i atès que la càmera està capturant imatges de manera contínua, no cal que usem play(), sinó que automàticament començarà a capturar.

Per raons de seguretat, és molt probable que, en iniciar un sketch en el qual s’intenti accedir a les imatges de la càmera web, el nostre navegador ens demani permís per utilitzar-la. Simplement l’haurem d’acceptar quan ens aparegui el missatge del navegador i així l’sketch s’executarà amb normalitat.

De la mateixa manera que passava amb el vídeo, podem usar les tècniques i els mètodes que ja coneixem per manipular creativament les imatges que la càmera web ens ofereix.

A l’exemple anterior estem usant la tècnica puntillista, però en aquesta ocasió amb la imatge de la càmera web. Atès que ara en lloc d’una imatge estàtica tenim una imatge en moviment, s’ha incrementat el nombre de cercles que es dibuixen a cada frame fins a un total de 100 fent ús d’un bucle for.