HTML5 Live
-
Upload
sandro-paganotti -
Category
Technology
-
view
2.048 -
download
0
description
Transcript of HTML5 Live
![Page 1: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/1.jpg)
WOW!HTML5 LIVE!
![Page 2: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/2.jpg)
VIDEO + CANVASCAPITOLO PRIMO
★ ★ ★ ★ ☆Production Ready
![Page 3: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/3.jpg)
void drawImage(in HTMLVideoElement image, in double dx, in double dy, in optional double dw, in double dh);
void drawImage(in HTMLVideoElement image, in double sx, in double sy, in double sw, in double sh, in double dx, in double dy, in double dw, in double dh);
![Page 4: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/4.jpg)
PRIMA DEMOCAPITOLO PRIMO
LAUNCH
![Page 5: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/5.jpg)
UN’EVOLUZIONECAPITOLO PRIMO
disegnaCanvas = function(video, context){ if(video.paused || video.ended) return false; context.drawImage(video,0,0); context.drawImage(video, 125, 98, 200, 60, 0 , 98, 450, 108 ); setTimeout(function(){disegnaCanvas(video, context)},0); }
![Page 6: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/6.jpg)
SECONDA DEMOCAPITOLO PRIMO
LAUNCH
![Page 7: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/7.jpg)
VIDEO + CANVAS + CANVAS
CAPITOLO SECONDO
★ ★ ★ ★ ☆Production Ready
![Page 8: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/8.jpg)
ImageData getImageData(in double sx, in
double sy, in double sw, in double sh);
![Page 9: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/9.jpg)
VIDEO
CANVAS(NASCOSTO)
CANVAS
drawImage
getImageData
putImageData
![Page 10: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/10.jpg)
decomposizioneColori = function(video, context, context_nascosto, colori){ if(video.paused || video.ended) return false; context_nascosto.drawImage(video,0,0); var fotogramma = context_nascosto.getImageData(0,0, context_nascosto.canvas.width,context_nascosto.canvas.height); var fotogramma_data = fotogramma.data; var rosso = colori.rosso.checked; var verde = colori.verde.checked; var blu = colori.blu.checked; for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!verde) fotogramma_data[i+1] = 0; if (!blu ) fotogramma_data[i+2] = 0; } fotogramma.data = fotogramma_data; context.putImageData(fotogramma,0,0); setTimeout(function(){ decomposizioneColori(video, context, context_nascosto, colori) },0); }
for(var i=0; i < fotogramma_data.length; i+=4){ if (!rosso) fotogramma_data[i ] = 0; if (!verde) fotogramma_data[i+1] = 0; if (!blu ) fotogramma_data[i+2] = 0;}
![Page 11: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/11.jpg)
PRIMA DEMOCAPITOLO SECONDO
LAUNCH
![Page 12: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/12.jpg)
VIDEO(NASCOSTO)
CANVAS(NASCOSTO)
CANVAS
![Page 13: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/13.jpg)
SECONDA DEMOCAPITOLO SECONDO
LAUNCH
★ ★ ★ ☆ ☆Potenziali problemi di performance
![Page 14: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/14.jpg)
CANVAS + WEBSTORAGE
CAPITOLO TERZO
★ ★ ★ ★ ☆Production Ready
![Page 15: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/15.jpg)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADICAYAAACZBDir
AAAgAElEQVR4Aey9B5yl2VmfeW7dyqmrK...
canvas.toDataURL(...)
localStorage.setItem(...)
WEBSTORAGE
![Page 16: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/16.jpg)
salvaImmagine = function(evento){ var canvas = document.querySelector('canvas'); localStorage.setItem('screenshot_' + localStorage.length, canvas.toDataURL() );}
caricaLaGallery = function(evento){ for(var x = 0; x < localStorage.length; x++) document.querySelector('div.screen_shots' ).insertAdjacentHTML('afterBegin', "<img src='" + localStorage.getItem(localStorage.key(x)) + "'>" );}
![Page 17: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/17.jpg)
PRIMA DEMOCAPITOLO TERZO
LAUNCH MIXER
★ ★ ★ ☆ ☆Potenziali problemi di performance
LAUNCH GALLERY
![Page 18: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/18.jpg)
SHARED WEBWORKERS
CAPITOLO QUARTO
★ ★ ☆ ☆ ☆
Tratta dal progetto guida
![Page 20: HTML5 Live](https://reader034.fdocuments.us/reader034/viewer/2022052410/55515135b4c905c6268b55c7/html5/thumbnails/20.jpg)
PRIMA DEMOCAPITOLO QUARTO
LAUNCH
LAUNCH DASHBOARD