Nykyinen versio: 1.8.19 · Päivitetty: 2026-08-22
StreamLayer on kevyt ja responsiivinen monistriimaussovellus Twitch- ja Kick-lähetysten seuraamiseen. Lisää kanavat suosikeiksi, avaa useita lähetyksiä rinnakkain ja hallitse chattia sekä ääntä striimikohtaisesti ilman erillistä palvelinsovellusta.
Projekti on toteutettu staattisena HTML-, CSS- ja JavaScript-sovelluksena. Suosikit ja asetukset säilyvät selaimessa, ja niistä voi tehdä ladattavan varmuuskopion.
- Twitch ja Kick: Lisää saman niminen kanava kummaltakin alustalta omaksi suosikikseen.
- Mukautuva asettelu: Yksi avoin striimi käyttää koko pääalueen. Useat striimit asettuvat ruudukoksi.
- Raahaus: Järjestä avoimia striimejä vetämällä. Avoimien striimien järjestys säilyy selaimessa.
- Tyhjät näkymät: Sovellus opastaa, kun suosikkeja tai avoimia striimejä ei vielä ole.
- Striimit asettuvat mobiilissa allekkain ja chatti avautuu videon alapuolelle.
- Sivupalkki sulkeutuu, kun avaat striimin.
- Mobiiliselaimet voivat rajoittaa äänekästä automaattista toistoa. Kickissä ota ääni käyttöön striimikortin äänipainikkeesta ja käynnistä tarvittaessa video soittimen omasta toistopainikkeesta.
- Jokaisella striimillä on oma chat- ja äänensäätönsä.
- Uusi striimi alkaa mykistettynä.
- Avoimien striimien chat- ja äänitilat palautetaan selaimen muistista. Mobiilissa Kick avautuu aina ensin mykistettynä selaimen toistorajoitusten vuoksi.
- Kuvakepainikkeilla on selitteet ja ruudunlukijanimet.
- LIVE-tilassa olevat suosikit nousevat listan alkuun katsojamäärän mukaan.
- Auto-open avaa valitun kanavan, kun se on livenä.
- Asetukset-ikkunasta voi ottaa käyttöön offline-striimin automaattisen sulkemisen minuutin kuluttua. Asetus on oletuksena pois päältä.
- Asetukset-ikkunasta voi viedä ja palauttaa JSON-varmuuskopion.
- Live-merkintä, lähetyksen otsikko ja katsojaluku päivittyvät minuutin välein.
- Kickin tiedot haetaan Kickin kanavarajapinnasta ja Twitchin tiedot DecAPI-palvelusta.
- Haku keskeytyy kahdeksan sekunnin kuluttua ja sitä yritetään kerran uudelleen, jos verkkopyyntö epäonnistuu.
- HTML5 ja CSS3: Tumma StreamLayer Blue -teema, responsiivinen ruudukko ja popup-ikkunat.
- Vanilla JavaScript: Sovelluslogiikka ilman rakennusvaihetta tai npm-riippuvuuksia.
- Upotukset ja rajapinnat: Twitch Embed SDK, Kick Player, DecAPI ja Kickin kanavarajapinta.
- Sovellus tallentaa suosikit, asetukset, avoimet striimit, järjestyksen, chatin ja äänen tilat selaimen
localStorage-muistiin. - Selaindatan tyhjennys poistaa nämä tiedot. Vie ensin JSON-varmuuskopio Asetukset-ikkunasta.
- Varmuuskopio sisältää suosikit, auto-open-valinnat, asetukset ja avoimet striimit. Palautus korvaa nykyiset tiedot vahvistuksen jälkeen.
- Valitse Kick tai Twitch.
- Syötä kanavan käyttäjänimi ja valitse Lisää listalle.
- Avaa kanava klikkaamalla suosikkia.
- Poista suosikki punaisesta sulkupainikkeesta.
- Käytä striimikortin painikkeita chatin avaamiseen, äänen säätämiseen, lataamiseen uudelleen ja sulkemiseen.
- Vedä striimikortteja haluamaasi järjestykseen. Mobiilissa raahaus aloitetaan striimikortin otsikkopalkista, ei videosta tai painikkeista.
- Avaa sivupalkin alareunasta Asetukset.
- Valitse halutessasi offline-striimien automaattinen sulkeminen.
- Vie JSON-varmuuskopio ennen selaindatan tyhjentämistä ja palauta se tarvittaessa samasta ikkunasta.
- Avaa index.html selaimessa tai julkaise projektin tiedostot staattisena sivustona.
- Twitch-upotus tarvitsee tuotannossa HTTPS-osoitteen ja oikean verkkotunnuksen
parent-asetukseksi.
- DecAPI on ulkoinen palvelu. Jos se ei vastaa, Twitchin live-tiedot voivat näkyä virhetilana.
- Kickin ja Twitchin upotusten toiminta, erityisesti mobiiliääni, riippuu myös selaimen autoplay-säännöistä ja palveluiden omista rajoituksista.