Frontend MediaStream Track: Kattava opas mediaraitojen hallintaan

MediaStreamTrack-rajapinta edustaa yhtä mediaraitaa MediaStream-virtauksen sisällä. Tämä raita voi sisältää joko ääntä tai videota. Näiden raitojen hallinnan ymmärtäminen on ratkaisevan tärkeää vankkojen ja interaktiivisten mediasovellusten rakentamisessa verkossa. Tämä kattava opas opastaa sinut MediaStream Trackien luomisen, muokkaamisen ja hallinnan läpi frontend-kehityksessä.

Mikä on MediaStream Track?

MediaStream on mediasisällön virta, joka voi sisältää useita MediaStreamTrack-olioita. Jokainen raita edustaa yhtä ääni- tai videolähdettä. Ajattele sitä säiliönä, joka pitää sisällään yhden joko ääni- tai videodatan virran.

Tärkeimmät ominaisuudet ja metodit

• kind: Vain luku -muotoinen merkkijono, joka ilmaisee raidan tyypin ("audio" tai "video").
• id: Vain luku -muotoinen merkkijono, joka on raidan uniikki tunniste.
• label: Vain luku -muotoinen merkkijono, joka on raidalle ihmisluettava nimi.
• enabled: Boolean-arvo, joka ilmaisee, onko raita tällä hetkellä käytössä. Asettamalla tämän arvoon false mykistää tai poistaa raidan käytöstä pysäyttämättä sitä.
• muted: Vain luku -muotoinen boolean-arvo, joka ilmaisee, onko raita mykistetty järjestelmätason rajoitusten tai käyttäjäasetusten vuoksi.
• readyState: Vain luku -muotoinen merkkijono, joka ilmaisee raidan nykyisen tilan ("live", "ended").
• getSettings(): Palauttaa sanakirjan raidan nykyisistä asetuksista.
• getConstraints(): Palauttaa sanakirjan rajoitteista, joita raitaan sovellettiin sen luomisen yhteydessä.
• applyConstraints(constraints): Yrittää soveltaa uusia rajoitteita raitaan.
• clone(): Palauttaa uuden MediaStreamTrack-olion, joka on klooni alkuperäisestä.
• stop(): Pysäyttää raidan ja päättää mediadatan virtauksen.
• addEventListener(): Mahdollistaa tapahtumien, kuten ended tai mute, kuuntelun raidalla.

MediaStream Trackien hankkiminen

Ensisijainen tapa hankkia MediaStreamTrack-olioita on getUserMedia()-API:n kautta. Tämä API pyytää käyttäjältä lupaa käyttää heidän kameraansa ja mikrofoniaan, ja jos lupa myönnetään, se palauttaa MediaStream-virtauksen, joka sisältää pyydetyt raidat.

getUserMedia()-metodin käyttäminen

Tässä on perusesimerkki siitä, miten getUserMedia()-metodia käytetään käyttäjän kameran ja mikrofonin käyttämiseen:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // Käytä streamia tässä.
    const videoTrack = stream.getVideoTracks()[0];
    const audioTrack = stream.getAudioTracks()[0];

    // Esimerkki: Näytä video video-elementissä
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("Tapahtui virhe: " + err);
  });

Selitys:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): Tämä pyytää pääsyä sekä video- että äänilähteisiin. getUserMedia-metodille välitetty olio määrittelee pyydetyt mediatyypit.
• .then(function(stream) { ... }): Tämä suoritetaan, kun käyttäjä myöntää luvan ja MediaStream on saatu onnistuneesti.
• stream.getVideoTracks()[0]: Tämä hakee ensimmäisen videoraidan streamista. Stream voi sisältää useita samantyyppisiä raitoja.
• stream.getAudioTracks()[0]: Tämä hakee ensimmäisen ääniraidan streamista.
• videoElement.srcObject = stream: Tämä asettaa videoelementin srcObject-ominaisuuden MediaStream-virtaukseksi, mikä mahdollistaa videon näyttämisen.
• videoElement.play(): Käynnistää videon toiston.
• .catch(function(err) { ... }): Tämä suoritetaan, jos tapahtuu virhe, kuten käyttäjän kieltäessä luvan.

Rajoitteet

Rajoitteiden (constraints) avulla voit määrittää vaatimuksia mediaradoille, kuten resoluution, kuvataajuuden ja äänenlaadun. Tämä on ratkaisevan tärkeää varmistaaksesi, että sovelluksesi vastaanottaa sen erityistarpeita vastaavaa mediadataa. Rajoitteet voidaan määrittää getUserMedia()-kutsun sisällä.

navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 }
  },
  audio: {
    echoCancellation: { exact: true },
    noiseSuppression: { exact: true }
  }
})
.then(function(stream) {
  // ...
})
.catch(function(err) {
  console.log("Tapahtui virhe: " + err);
});

Selitys:

• width: { min: 640, ideal: 1280, max: 1920 }: Tämä määrittää, että videon leveyden tulisi olla vähintään 640 pikseliä, ihanteellisesti 1280 pikseliä ja enintään 1920 pikseliä. Selain yrittää löytää kameran, joka tukee näitä rajoitteita.
• height: { min: 480, ideal: 720, max: 1080 }: Samoin kuin leveys, tämä määrittelee videon halutun korkeuden.
• frameRate: { ideal: 30, max: 60 }: Tämä pyytää kuvataajuudeksi ihanteellisesti 30 kuvaa sekunnissa ja enintään 60 kuvaa sekunnissa.
• echoCancellation: { exact: true }: Tämä pyytää, että kaikujen poisto on käytössä ääniraidalla. exact: true tarkoittaa, että selaimen *on* tarjottava kaikujen poisto, tai pyyntö epäonnistuu.
• noiseSuppression: { exact: true }: Tämä pyytää, että kohinanvaimennus on käytössä ääniraidalla.

On tärkeää huomata, että selain ei välttämättä pysty täyttämään kaikkia rajoitteita. Voit käyttää getSettings()-metodia MediaStreamTrack-oliossa selvittääksesi, mitkä asetukset todellisuudessa otettiin käyttöön.

MediaStream Trackien muokkaaminen

Kun olet saanut MediaStreamTrack-olion, voit muokata sitä eri tavoin hallitaksesi ääni- ja videoulostuloa.

Raitojen käyttöönotto ja käytöstä poistaminen

Voit ottaa raidan käyttöön tai poistaa sen käytöstä enabled-ominaisuuden avulla. Asettamalla enabled-arvoksi false mykistät tehokkaasti ääniraidan tai poistat videoraidan käytöstä pysäyttämättä sitä. Asettamalla sen takaisin arvoon true otat raidan uudelleen käyttöön.

const videoTrack = stream.getVideoTracks()[0];

// Poista videoraita käytöstä
videoTrack.enabled = false;

// Ota videoraita käyttöön
videoTrack.enabled = true;

Tämä on hyödyllistä toteutettaessa ominaisuuksia, kuten mykistyspainikkeita ja videon vaihtokytkimiä.

Rajoitteiden soveltaminen luomisen jälkeen

Voit käyttää applyConstraints()-metodia muokataksesi raidan rajoitteita sen luomisen jälkeen. Tämä mahdollistaa ääni- ja videoasetusten dynaamisen säätämisen käyttäjän mieltymysten tai verkkoyhteyden olosuhteiden perusteella. Kaikkia rajoitteita ei kuitenkaan välttämättä voi muokata raidan luomisen jälkeen. applyConstraints()-metodin onnistuminen riippuu taustalla olevan laitteiston ominaisuuksista ja raidan nykyisestä tilasta.

const videoTrack = stream.getVideoTracks()[0];

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Rajoitteet asetettu onnistuneesti.");
  })
  .catch(function(err) {
    console.log("Rajoitteiden asettaminen epäonnistui: " + err);
  });

Raitojen pysäyttäminen

Pysäyttääksesi raidan kokonaan ja vapauttaaksesi sen käyttämät resurssit, voit käyttää stop()-metodia. Tämä on tärkeää kameran ja mikrofonin vapauttamiseksi, kun niitä ei enää tarvita, erityisesti resurssirajoitetuissa ympäristöissä, kuten mobiililaitteissa. Kun raita on pysäytetty, sitä ei voi käynnistää uudelleen. Sinun on hankittava uusi raita käyttämällä getUserMedia()-metodia.

const videoTrack = stream.getVideoTracks()[0];

// Pysäytä raita
videoTrack.stop();

On myös hyvä käytäntö pysäyttää koko MediaStream, kun olet valmis sen kanssa:

stream.getTracks().forEach(track => track.stop());

Edistyneet tekniikat

Perusteiden lisäksi on olemassa useita edistyneitä tekniikoita, joita voit käyttää MediaStreamTrack-olioiden jatkokäsittelyyn ja parantamiseen.

Raitojen kloonaaminen

clone()-metodi luo uuden MediaStreamTrack-olion, joka on kopio alkuperäisestä. Kloonattu raita jakaa saman taustalla olevan medialähteen. Tämä on hyödyllistä, kun sinun täytyy käyttää samaa medialähdettä useissa paikoissa, kuten saman videon näyttämisessä useissa videoelementeissä.

const originalTrack = stream.getVideoTracks()[0];
const clonedTrack = originalTrack.clone();

// Luo uusi MediaStream kloonatulla raidalla
const clonedStream = new MediaStream([clonedTrack]);

// Näytä kloonattu stream toisessa video-elementissä
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

Huomaa, että alkuperäisen raidan pysäyttäminen pysäyttää myös kloonatun raidan, koska ne jakavat saman taustalla olevan medialähteen.

Äänen ja videon käsittely

MediaStreamTrack-rajapinta itsessään ei tarjoa suoria metodeja ääni- tai videodatan käsittelyyn. Voit kuitenkin käyttää muita Web-API:ita, kuten Web Audio API:a ja Canvas API:a, tämän saavuttamiseksi.

Äänenkäsittely Web Audio API:lla

Voit käyttää Web Audio API:a analysoidaksesi ja käsitelläksesi ääntä MediaStreamTrack-raidalta. Tämä mahdollistaa tehtävien, kuten äänen visualisoinnin, kohinanvaimennuksen ja äänitehosteiden, suorittamisen.

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);

// Luo analysaattorisolmu audiodatan erottamiseksi
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Yhdistä lähde analysaattoriin
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Hae taajuusdata
  analyser.getByteFrequencyData(dataArray);

  // Käytä dataArrayta äänen visualisointiin
  // (esim. piirrä taajuusspektri canvas-elementille)
  console.log(dataArray);
}

draw();

Selitys:

• new AudioContext(): Luo uuden Web Audio API -kontekstin.
• audioContext.createMediaStreamSource(stream): Luo äänilähdesolmun MediaStream-virtauksesta.
• audioContext.createAnalyser(): Luo analysaattorisolmun, jota voidaan käyttää audiodatan erottamiseen.
• analyser.fftSize = 2048: Asettaa nopean Fourier-muunnoksen (FFT) koon, joka määrittää taajuuskaistojen määrän.
• analyser.getByteFrequencyData(dataArray): Täyttää dataArray-taulukon taajuusdatalla.
• draw()-funktiota kutsutaan toistuvasti käyttämällä requestAnimationFrame()-metodia päivittämään äänen visualisointia jatkuvasti.

Videonkäsittely Canvas API:lla

Voit käyttää Canvas API:a käsitelläksesi videokuvia MediaStreamTrack-raidalta. Tämä mahdollistaa tehtävien, kuten suodattimien lisäämisen, peittokuvien lisäämisen ja reaaliaikaisen videoanalyysin, suorittamisen.

const videoElement = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Piirrä nykyinen videokuva canvas-elementille
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Muokkaa canvas-dataa (esim. lisää suodatin)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Lisää yksinkertainen harmaasävysuodatin
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // punainen
    data[i + 1] = avg;   // vihreä
    data[i + 2] = avg;   // sininen
  }

  // Aseta muokattu data takaisin canvas-elementille
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

Selitys:

• drawFrame()-funktiota kutsutaan toistuvasti käyttämällä requestAnimationFrame()-metodia päivittämään canvasia jatkuvasti.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Piirtää nykyisen videokuvan canvas-elementille.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Hakee kuvadatan canvas-elementiltä.
• Koodi käy läpi pikselidatan ja soveltaa harmaasävysuodattimen.
• ctx.putImageData(imageData, 0, 0): Asettaa muokatun kuvadatan takaisin canvas-elementille.

MediaStream Trackien käyttäminen WebRTC:n kanssa

MediaStreamTrack-oliot ovat perustavanlaatuisia WebRTC:lle (Web Real-Time Communication), joka mahdollistaa reaaliaikaisen ääni- ja videoviestinnän suoraan selainten välillä. Voit lisätä MediaStreamTrack-olioita WebRTC:n RTCPeerConnection-yhteyteen lähettääksesi ääni- ja videodataa etävertaiselle.

const peerConnection = new RTCPeerConnection();

// Lisää ääni- ja videoraidat vertaisyhteyteen
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// Tämän jälkeen seuraisivat WebRTC-signalointi ja yhteydenmuodostus.

Tämä mahdollistaa videoneuvottelusovellusten, suoratoistoalustojen ja muiden reaaliaikaisten viestintätyökalujen rakentamisen.

Selainyhteensopivuus

MediaStreamTrack-API:a tukevat laajalti modernit selaimet, kuten Chrome, Firefox, Safari ja Edge. On kuitenkin aina hyvä idea tarkistaa uusimmat selaimen yhteensopivuustiedot resursseista, kuten MDN Web Docs.

Parhaat käytännöt

• Käsittele käyttöoikeuksia huolellisesti: Käsittele aina käyttäjän lupia kameran ja mikrofonin käyttöön asianmukaisesti. Tarjoa selkeät selitykset siitä, miksi sovelluksesi tarvitsee pääsyn näihin laitteisiin.
• Pysäytä raidat, kun niitä ei tarvita: Vapauta kameran ja mikrofonin resurssit pysäyttämällä raidat, kun niitä ei enää käytetä.
• Optimoi rajoitteet: Käytä rajoitteita pyytääksesi sovelluksesi kannalta optimaalisia media-asetuksia. Vältä pyytämästä liian korkeita resoluutioita tai kuvataajuuksia, jos ne eivät ole välttämättömiä.
• Seuraa raidan tilaa: Kuuntele tapahtumia, kuten ended ja mute, reagoidaksesi raidan tilan muutoksiin.
• Testaa eri laitteilla: Testaa sovellustasi erilaisilla laitteilla ja selaimilla varmistaaksesi yhteensopivuuden.
• Harkitse saavutettavuutta: Suunnittele sovelluksesi niin, että se on saavutettavissa myös vammaisille käyttäjille. Tarjoa vaihtoehtoisia syöttötapoja ja varmista, että ääni- ja videoulostulo on selkeää ja ymmärrettävää.

Yhteenveto

MediaStreamTrack-rajapinta on tehokas työkalu monipuolisten mediasovellusten rakentamiseen verkossa. Ymmärtämällä, miten mediaraitoja luodaan, muokataan ja hallitaan, voit luoda käyttäjillesi mukaansatempaavia ja interaktiivisia kokemuksia. Tämä kattava opas on käsitellyt MediaStreamTrack-hallinnan olennaiset näkökohdat, raitojen hankkimisesta getUserMedia()-metodilla edistyneisiin tekniikoihin, kuten äänen ja videon käsittelyyn. Muista priorisoida käyttäjien yksityisyyttä ja optimoida suorituskykyä työskennellessäsi mediavirtojen kanssa. WebRTC:n ja siihen liittyvien teknologioiden jatkotutkimus parantaa merkittävästi kykyjäsi tällä jännittävällä web-kehityksen alalla.