Archiwum

Archive for Luty 2012

[HTML5] WIdeo I canvas–transformacje

Wprowadzenie

Canvas czyli Płótno jakie udostępnia nam znacznik pozwala na dynamiczną manipulację elementami graficznymi oraz na generowanie nowych obrazów w kodzie JavaScript. Canvas pozwala na jednostkowe operacje na pikselach, które składają się z czterech elementów: koloru czerwonego, koloru zielonego, koloru niebieskiego oraz kanału alfa – piksele są ułożone w ciągu, który jest numerowany od lewej do prawej i od góry do dołu.

Video jest jednym z najbardziej wyczekiwanych znaczników w HTML5. Swoją funkcjonalnością miał przyćmić wszystkie używane dotychczas dodatki do przeglądarek internetowych służące do odbierania strumienia wideo, a tym samym uwolnić użytkowników od datków firm trzecich. Na odpowiedz na pytanie czy zakładane nadzieje przełożą się na oczekiwany rezultat przyjdzie nam poczekać jeszcze kilka lat do momentu, w którym standard HTML5 zostanie zatwierdzony w całości, a główny kodek do materiałów wideo zostanie zaakceptowany przez wszystkich producentów przeglądarek internetowych.
Warunkiem do wykonania przykładu transformacji wideo jest posiadanie co najmniej jednego materiału zakodowanego w formacie H.264, który zostanie umieszczony w katalogu, w którym będą zapisywane przykładowe strony pod nazwą wideo.mp4.

Transformacje w Canvas

Canvas pozwala na rysowanie dowolnej grafiki dzięki temu, że udostępnia mechanizm do rysowania i przekształcania pikseli. W poniższym przykładzie będziemy chcieli narysować 10 prostokątów, które zostaną obrócone o kąt tworząc okrąg z nakładających się na siebie figur.

Poniżej prezentuję kod strony internetowej, która będzie szkieletem dla prezentowanego przykładu:

<!DOCTYPE HTML>

<html>

<head>

<script type=”text/javascript”>

window.onload = function() {

//dodatkowy kod zaprezentowany w przykładzie wpisz poniżej

};

</script>

</head>

<body>

<canvas id=”transformCanvas” width=”500″ height=”500″ />

</body>

</html>

Powyższy szkielet strony zawiera deklarację płótna o podanej wysokości i szerokości w sekcji body, oraz kod JavaScript, który posiada pustą funkcję zapisującą się do zdarzenia załadowania strony.

Do powyższego kodu pod umieszczonym komentarzem (patrz kod) należy dodać następujące elementy:

— przypisanie do zmiennej canvas odwołanie do płótna.

— przypisanie do zmiennej canvasContext2D odwołania do mechanizmu pozwalającego na rysowanie pikseli w trybie 2D.

— wybranie środka dla płótna poprzez wykonanie translacji do określonego punktu.

var canvas = document.getElementById(„transformCanvas”);

var canvasContext2D = canvas.getContext(„2d”);

canvasContext2D.translate(200, 250);

Powyższy kod zapewnił nam pobranie odwołania do płótna zdefiniowanego na stronie, na którym określiliśmy środek zgodnie z podanymi punktami. Następnie musimy w pętli wygenerować 10 prostokątów, zrobimy to w następujący sposób:

— definiujemy pętle, która będzie miała 10 przebiegów.

— obracamy płaszczyznę rysowania o wybrany kąt.

— wybieramy kolor wypełnienia dla rysowanego kształtu.

— określamy właściwości rysowanego kształtu w tym jego rodzaj oraz rozmiar.

for (i = 0; i < 10; i++) {

canvasContext2D.rotate(0.2 * Math.PI);

canvasContext2D.fillStyle = „rgba(0, 128, 128, 0.5)”;

canvasContext2D.fillRect(10, 0, 150, 50);

}

Po zapisaniu i uruchomieniu strony internetowej w przeglądarce powinniśmy zobaczyć następujący efekt:

image

 

 

Transformacje wideo

Przykład zaprezentowany powyżej jest niezwykle interesujący, ale to nie koniec możliwości. Gdyby ktoś z Nas zapragnął w taki sam sposób obrócić nie sztucznie wygenerowane prostokąty, a na przykład materiał wideo to też mamy taką możliwość.

Poniżej prezentuję szkielet dokumentu od jakiego zaczniemy budowanie przykładu:


<!DOCTYPE HTML>

<html>

<head>

<script type=”text/javascript”>

window.onload = function() {

//dodatkowy kod zaprezentowany w przykładzie wpisz poniżej

};

</script>

</head>

<body>

<video src=”wideo.mp4″ autoplay loop width=”640″ height=”360″ id=”myVideo” />

<br/>

<canvas id=”videoCopy” />
</body>
</html>


Powyższy szkielet strony zawiera deklarację elementu wideo, płótna bez podanej wysokości i szerokości w sekcji body, oraz kod JavaScript, który posiada pustą funkcję zapisującą się do zdarzenia załadowania strony.

Do powyższego kodu pod umieszczonym komentarzem (patrz kod) należy dodać następujące elementy:

— przypisanie do zmiennej canvas odwołanie do płótna.

— przypisanie do zmiennej canvasContext2D odwołania do mechanizmu pozwalającego na rysowanie pikseli w trybie 2D.

— przypisanie do zmiennej video odwołania do materiału wideo.

— przypisanie rozmiaru do płótna, który będzie tożsamy z rozmiarem materiału wideo.

— wybranie środka dla płótna poprzez wykonanie translacji do określonego punktu, który będzie wyliczony na podstawie podzielenia wysokości i szerokości materiału wideo.

var canvas = document.getElementById(„videoCopy”);

var canvasContext2D = canvas.getContext(„2d”);

var video = document.getElementById(„myVideo”);

canvas.width = video.width;

canvas.height = video.height;

canvasContext2D.translate(video.width /2, video.height / 2);

Następnie musimy w pętli wygenerować 10 prostokątów, zrobimy to w następujący sposób:

tworzymy funkcję, która uruchomi się w momencie, w którym materiał wideo będzie gotowy do odtworzenia. Zdarzenie w odtwarzaczu, które mówi o tym nazywa się canplay.

— funkcja, która zostanie uruchomiona zostaje zapętlona z czasem 10 milisekund, w którym obecna ramka materiału wideo zostaje narysowana na płótnie odwrócona o podany kąt, przy użyciu canvasContext2D z odstępem ustawionym na punkt 30,30 od środka i dodatkowo pomniejszona pięciokrotnie.

video.addEventListener(‚canplay’, function () {

setInterval(function () {

canvasContext2D.rotate(0.2 * Math.PI)

canvasContext2D.drawImage(video, 30, 30,
video.width / 5, video.height / 5);

}, 10);

}, false);

Po zapisaniu i uruchomieniu strony internetowej w przeglądarce powinniśmy zobaczyć następujący efekt:

image

 

W jednym momencie widzimy 11 razy wideo, które jest odświeżane prawie na bieżąco.

Podsumowanie

W artykule został zaprezentowany sposób na transformowanie elementów wygenerowanych dynamicznie bądź będących materiałem wideo. Możliwości interakcji materiałów wideo i płótna są o wiele większe, celem artykułu było przedstawienie możliwości jakie niesie za sobą współpraca tych dwóch mechanizmów.