Reaaliaikaista kameran- ja videonkäsittelyä JavaScriptilla
Lantiainen, Teemu (2013)
Lantiainen, Teemu
Mikkelin ammattikorkeakoulu
2013
All rights reserved
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2013122022067
https://urn.fi/URN:NBN:fi:amk-2013122022067
Tiivistelmä
Kameran hallinta on jo pitkään ollut web-kehityksen tavoitelluimpia ominaisuuksia. Tähän asti kehittäjät ovat joutuneet käyttämään erilaisia kolmannen osapuolen selainlisukkeita, mutta nykyään jo useat selai-met tukevat getUserMedia-nimistä metodia, joka mahdollistaa kameran hallinnan puhtaalla JavaScriptilla ilman ylimääräisiä lisukkeita. Myös kuvien ja videoiden reaaliaikaisen käsittelyn mahdollisuudet se-laimessa ovat kasvaneet canvas-elementin kehityksen myötä. Canvas-elementin avulla on mahdollista manipuloida videoita ja kuvia aivan kuvapistetasolta lähtien.
Koska getUserMedia liittyy uusiin laiteläheisiin rajapintoihin, esittelen työssä hieman erilaisia JavaScript-rajapintoja, joiden avulla kehittäjät voivat hyödyntää laitteiden tarjoamaa dataa verkkosovelluksissaan. Työn tutkimusongelmana on, kuinka laitteen kameraa hallitaan puhtailla selainohjelmointitekniikoilla ja kuinka sitä voidaan hyödyntää verkkosovelluksessa. Käytännön toteutuksena teen mikkeliläiselle Tertin kartanolle virtuaalisen puutarhakierros-sovelluksen, jossa hyödynnetään getUserMedia-metodia ja QR-koodeja, sekä reaaliaikaista videonkäsittelyä canvas-elementtien avulla.
Työn tulokset olivat lupaavia, sillä kameran videokuvan toiston suorituskyky oli hyvä eri selaimilla ja eri tehoisilla laitteilla. Mobiililaitteilla ilmeni ongelmia videon manipuloinnin suorituskyvyn kanssa, mutta sitä on mahdollista optimoida paljonkin. Selaintuen tulevaisuuskin näyttää valoisalta, sillä työtä aloitta-essa mobiilipuolelta vain Googlen Chrome-selain tuki getUserMedia-metodia, mutta työn valmistuttua myös Mozilla oli lisännyt tuen omaan Firefox-selaimeensa. Eri selainten tuki ja toteutukset voivat kuitenkin erota toisistaan huomattavasti, jonka yhtenäinen standardi toivottavasti muuttaa.
Koska getUserMedia liittyy uusiin laiteläheisiin rajapintoihin, esittelen työssä hieman erilaisia JavaScript-rajapintoja, joiden avulla kehittäjät voivat hyödyntää laitteiden tarjoamaa dataa verkkosovelluksissaan. Työn tutkimusongelmana on, kuinka laitteen kameraa hallitaan puhtailla selainohjelmointitekniikoilla ja kuinka sitä voidaan hyödyntää verkkosovelluksessa. Käytännön toteutuksena teen mikkeliläiselle Tertin kartanolle virtuaalisen puutarhakierros-sovelluksen, jossa hyödynnetään getUserMedia-metodia ja QR-koodeja, sekä reaaliaikaista videonkäsittelyä canvas-elementtien avulla.
Työn tulokset olivat lupaavia, sillä kameran videokuvan toiston suorituskyky oli hyvä eri selaimilla ja eri tehoisilla laitteilla. Mobiililaitteilla ilmeni ongelmia videon manipuloinnin suorituskyvyn kanssa, mutta sitä on mahdollista optimoida paljonkin. Selaintuen tulevaisuuskin näyttää valoisalta, sillä työtä aloitta-essa mobiilipuolelta vain Googlen Chrome-selain tuki getUserMedia-metodia, mutta työn valmistuttua myös Mozilla oli lisännyt tuen omaan Firefox-selaimeensa. Eri selainten tuki ja toteutukset voivat kuitenkin erota toisistaan huomattavasti, jonka yhtenäinen standardi toivottavasti muuttaa.