Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 1 / 34 Multimedia Igor Wojnicki Katedra Automatyki Akademia Górniczo-Hutnicza w Krakowie 18 czerwca 2012
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 2 / 34 Spis Treści 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 3 / 34 Spis Treści Multimedia: Portale WWW 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Macromedia (Adobe) Flash
Multimedia: Portale WWW Macromedia (Adobe) Flash Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 4 / 34 Cechy Flash a Dostępny na wiele platform OS/Hardware, Grafika skalowalna (wektorowa i rastrowa), Animacje, Dwukierunkowe Audio, Drukierunkowe Wideo. FLV: Flash Video, otwarty format przesyłu danych, kodeki już niekoniecznie.
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 5 / 34 Multimedia: Portale WWW Osadzanie obiektów Flash Macromedia (Adobe) Flash <object type="application/x-shockwave-flash" data="filename.swf" width="200" height="200" id="movie1"> <param name="movie" value="filename.swf"> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <p>you need the Flash plugin.</p> <p><a href="http://www.macromedia.com/go/getflashplayer/"> Download Macromedia Flash Player</a></p> </object>
Multimedia: Portale WWW Macromedia (Adobe) Flash Osadzanie z wykorzystaniem JavaScript http://blog.deconcept.com/swfobject/ <script type="text/javascript" src="swfobject.js"></sc <div id="flashcontent"> This text is replaced by the Flash movie. </div> <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699"); so.write("flashcontent"); </script> SWFObject: swf, id elementu, szer., wys., wersja flash, kolor tła Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 6 / 34
Multimedia: Portale WWW Macromedia (Adobe) Flash Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 7 / 34 Wady Flash a Reklamy, Rozpraszanie uwagi, Przeszukiwanie zawartości strony, Różne platformy hardware/software?! Wydajność?!
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 8 / 34 Spis Treści Multimedia: Portale WWW 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Multimedia: aplety Java
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 9 / 34 Multimedia: Portale WWW Osadzanie Apletów Java Multimedia: aplety Java <!--[if!ie]>--> <object classid="java:sample2.class" type="application/x-java-applet" height="300" width="450" > <param name="alpha" value="bubba" /> <!--<![endif]--> <object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d height="300" width="450" > <param name="code" value="sample2" /> <param name="alpha" value="bubba" /> </object> <!--[if!ie]>--> </object> <!--<![endif]-->
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 10 / 34 Multimedia: Portale WWW Multimedia: aplety Java Osadzanie Apletów Java, archiwum jar <!--[if!ie]>--> <object classid="java:sample2.class" type="application/x-java-applet" archive="sample2.jar" height="300" width="450" > <!--<![endif]--> <object classid="clsid:8ad9c840-044e-11d1-b3e9-00805f499d height="300" width="450" > <param name="code" value="sample2" /> <param name="archive" value="sample2.jar" /> </object> <!--[if!ie]>--> </object> <!--<![endif]-->
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 11 / 34 Spis Treści Multimedia: Portale WWW 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Inne
Multimedia: Portale WWW Inne Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 12 / 34 Webcam Generacja strumienia danych Theora, MPEG4 Generacja statycznego obrazu (np. JPEG), odświeżanego z pewnym interwałem Flash
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 13 / 34 Spis Treści Streaming Audio/Wideo 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Przesyłanie
Streaming Audio/Wideo Przesyłanie Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 14 / 34 RealAudio, RealVideo, RealMedia RealNetworks http://www.realnetworks.com/, Różne kodeki, duża rozpiętość jakości, Streaming media odtwarzanie podczas transferu, protokół RDT (Real Data Transport), RA (Real Audio), RV (Real Video), RM (Real Media), RMVB (Real Media Variable Bitrate). Społeczność Helix.
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 15 / 34 Shoutcast Nullsoft, freeware, HTTP + MP3, Streaming Audio/Wideo Przesyłanie Radio Internetowe, Prosty protokól tekstowy + binarny strumień dźwięku, głównie MP3, OGG. icy-notice:shoutcast Distributed Network Audio Server/Li icy-name:rock Radio, icy-genre:alternative rock icy-url:http://wlhsradio.com Content-Type:audio/mpeg icy-pub:1 icy-br:48
Streaming Audio/Wideo Przesyłanie Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 16 / 34 Metainformacje w strumieniu GET: żadanie transferu metadanych: icy-metadata:1 dodatkowa informacja, co każde n bajtów strumienia dźwięku: icy-metaint:n 1-szy bajt bloku metadanych: długość bloku w bajtach / 16 znaczniki: StreamUrl= www.mojeradio.pl ; StreamTitle= autor, tytuł ;
Streaming Audio/Wideo Przesyłanie Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 17 / 34 Icecast http://www.icecast.org Implementacja streamingu A/V, Protokół Shoutcast, icecast (serwer) + libshout (API do komunikacji z serwerem) + IceS (klient generujacy strumienie) OGG Vorbis, Theora, Speex, Flac: ochrona sposobów transmisji multimediów http://www.xiph.org/
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 18 / 34 Spis Treści Streaming Audio/Wideo 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Algorytmy
Streaming Audio/Wideo Algorytmy Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 19 / 34 Kontenery Audio/Video AVI (.avi) Ogg (.ogg) MPEG PS (program stream) / TS (transport stream) (.mpg) MPG4 (.mp4) QuickTime (.mov) Matroska (.mkv)
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 20 / 34 Wolne Kodeki Streaming Audio/Wideo Algorytmy Vorbis otwarty, wolny, audio, średnia wysoka jakość, 45 500 kbps/kanał stałe lub zmienne, 8-192 khz, 1-255 kanałów, wysoka wydajność/jakość (lepszy od Mpeg-1/2 Layer 3 (MP3)) Theora otwarty, wolny, wideo, konkurencja dla opatentowanego MPEG-4, zatwierdzona przez w3c FLAC Free Lossless Audio Codec, Speex otwarty, wolny, kodowanie mowy, przeznaczenie: VoIP,
Streaming Audio/Wideo Algorytmy Więzione kodeki Mpeg-1/2 Layer 3 (Moving Pictures Experts Group) 8 320 kbps, do 48kHz, najwyżej 2 kanały ATRAC3: Adaptive TRansform Acoustic Coding Windows Media Audio MPEG4 (DivX, XviD 1 ), MPEG1, MPEG2, H.264. 1 GNU GPL, http://xvid.org, implementujacy opatentowany MPEG4 Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 21 / 34
Streaming Audio/Wideo Algorytmy Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 22 / 34 Przyszłość transmisji obrazu? Kontener: WebM (bazujacy na Matroska), licencja BSD, http://www.webmproject.org/ Kodek: VP8 + Ogg Vorbis Youtube: HTML5
Streaming Audio/Wideo Algorytmy Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 23 / 34 Narzędzia FFmpeg http://www.ffmpeg.org/ GStreamer http://www.gstreamer.net/ MPlayer http://www.mplayerhq.hu/
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 24 / 34 Spis Treści Voice Over IP 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 25 / 34 Koncepcja VoIP Voice Over IP Voice Over IP, eksperymenty: 1973 Network Voice Protocol, ARPANET Struktura Główne problemy: Niedeterministryczny charakter Internetu: QoS, Opoźnienia na łaczach satelitarnych, Strumień danych zwykle niekodowany (Skype kodowany!),
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 26 / 34 Technologie Voice Over IP Software: Skype Gizmo Project (otwarty protokół, closed source, SIP) Ekiga, xten-xlite (SIP) Soft/Hard-ware Session Initiation Protocol (SIP) Routery pozowalajace na podłaczenie analogowych telefonów: Cisco, Linksys, D-Link, ipfon, upc, aster (autocom)
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 27 / 34 Spis Treści Voice Over IP 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5 Protokoły
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 28 / 34 Voice Over IP Protokoły Protokół SIP: Session Initiation Protocol RFC 2543, http://tools.ietf.org/html/2543 TCP, UDP, port 5060, Sygnalizacja oraz nawiazywanie połaczeń: dokad kierować ruch, dzwoni telefon, zajęte Session Description Protocol: metadane, co jest przesyłane Transmisja A/V za pomoca Real-time Transport Protocol (RTP) Podobny do HTTP, human readable
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 29 / 34 Voice Over IP Real-time Transfer Protocol Protokoły Szeroka gama portów UDP: 16384-32767, parzyste, nieparzyste używane przez Real-time Control Protocol: RCPT, RTP: Dane, RCPT: Jakość, RFC 1889, 3550, http://tools.ietf.org/html/3550 Identyfikacja zawartośći, Numerowanie pakietów, Oznaczanie temporalne pakietów, Kontrola dostarczania, Nie implementuje QoS, ale klient powiadamiany o zatorach: zmniejszenie strumienia
Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 30 / 34 Spis Treści HTML5 1 Multimedia: Portale WWW Macromedia (Adobe) Flash Multimedia: aplety Java Inne 2 Streaming Audio/Wideo Przesyłanie Algorytmy 3 Voice Over IP Protokoły 4 HTML5
HTML5 Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 31 / 34 HTML5 Cel: aplikacje, DOM API. HTML5. XHTML5. http://dev.w3.org/html5/spec/
HTML5 Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 32 / 34 HTML5: multimedia video?! audio?! canvas?! atrybut multiple dla plików
HTML5 Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 33 / 34 HTML5, struktura dokumentu article spójny fragment dokumentu section część article nav elementy nawigacyjne figure element pływajacy figcaption podpis dla figure
HTML5 Igor Wojnicki (AGH, KA) Multimedia 18 czerwca 2012 34 / 34 HTML5: komunikacja WebSocket dwukierunkowa, TCP (nie HTTP), komunikaty, specjalny serwer np.: http://code.google.com/p/phpwebsocket/