Reaaliaikaista kameran- ja videonkäsittelyä JavaScriptilla

Abstract

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.

The concept of capturing live audio and video has always been one of the most sought-after features of web development. For years web developers have had to rely on third-party plugins like Flash and Silverlight to make it possible, but the growth of the HTML5 standard has brought several new JavaScript APIs (Application Programming Interface) giving web developers the ability to access device hardware. One of these is called getUserMedia which gives access to the device’s camera and microphone without any third-party plugins. Real-time manipulation of video and image has also improved with the development of HTML canvas element and APIs related to it. They allow developers to manipulate videos and images on the pixel level.

The purpose of this thesis was to find out if it was possible to capture video with pure JavaScript, and if it was, how it could be used in web applications. The main focus was on getUserMedia API and video ma-nipulation with canvas element as I tried to include some augmented reality-like features into the appli-cation. Since getUserMedia is one of the APIs giving access to device hardware, I introduced several of them in Chapter 2. As the practical part of my thesis I created a virtual garden tour guide application to Tertti Manor, a tourism company located in Mikkeli, Finland. The application makes use of getUserMedia API, QR codes and real-time video manipulation with canvas elements.

The results of this thesis were promising. The performance of video feed provided by getUserMedia was good across different mobile and desktop platforms and browsers. However, the performance of real-time video manipulation on mobile devices turned out to be not so good. It is good to note though, that I did not do optimization that much. The future of browser support for getUserMedia also seems bright. At the beginning of this thesis Google’s Chrome browser was the only one to support it on mobile devices, but during the work Mozilla added support for it in their Firefox browser. However, support and implementations can vary quite a lot between different browsers at this point until the final official standard arrives.