Frontend MediaStream Track: Sveobuhvatan Vodič za Upravljanje Medijskim Zapisima

Sučelje MediaStreamTrack predstavlja jedan medijski zapis unutar MediaStream-a. Taj zapis može sadržavati ili audio ili video. Razumijevanje načina upravljanja ovim zapisima ključno je za izradu robusnih i interaktivnih medijskih aplikacija na webu. Ovaj sveobuhvatni vodič provest će vas kroz stvaranje, manipulaciju i upravljanje MediaStream zapisima u frontend razvoju.

Što je MediaStream Zapis?

MediaStream je tok medijskog sadržaja koji može sadržavati više MediaStreamTrack objekata. Svaki zapis predstavlja jedan izvor zvuka ili videa. Zamislite ga kao spremnik koji drži jedan tok audio ili video podataka.

Ključna Svojstva i Metode

• kind: String samo za čitanje koji označava vrstu zapisa ("audio" ili "video").
• id: String samo za čitanje koji predstavlja jedinstveni identifikator zapisa.
• label: String samo za čitanje koji pruža čovjeku čitljivu oznaku za zapis.
• enabled: Booleova vrijednost koja označava je li zapis trenutno omogućen. Postavljanje na false utišava ili onemogućuje zapis bez zaustavljanja.
• muted: Booleova vrijednost samo za čitanje koja označava je li zapis utišan zbog ograničenja na razini sustava ili korisničkih postavki.
• readyState: String samo za čitanje koji označava trenutno stanje zapisa ("live", "ended").
• getSettings(): Vraća rječnik trenutnih postavki zapisa.
• getConstraints(): Vraća rječnik ograničenja primijenjenih na zapis prilikom njegovog stvaranja.
• applyConstraints(constraints): Pokušava primijeniti nova ograničenja na zapis.
• clone(): Vraća novi MediaStreamTrack objekt koji je klon originala.
• stop(): Zaustavlja zapis, prekidajući protok medijskih podataka.
• addEventListener(): Omogućuje vam slušanje događaja na zapisu, kao što su ended ili mute.

Dobivanje MediaStream Zapisa

Glavni način dobivanja MediaStreamTrack objekata je putem getUserMedia() API-ja. Ovaj API traži od korisnika dopuštenje za pristup kameri i mikrofonu te, ako je dopuštenje odobreno, vraća MediaStream koji sadrži tražene zapise.

Korištenje getUserMedia()

Evo osnovnog primjera kako koristiti getUserMedia() za pristup korisnikovoj kameri i mikrofonu:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // Ovdje koristite stream.
    const videoTrack = stream.getVideoTracks()[0];
    const audioTrack = stream.getAudioTracks()[0];

    // Primjer: Prikaz videa u video elementu
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("Došlo je do pogreške: " + err);
  });

Objašnjenje:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): Ovo zahtijeva pristup i video i audio ulazima. Objekt proslijeđen getUserMedia definira tražene vrste medija.
• .then(function(stream) { ... }): Ovo se izvršava kada korisnik odobri dopuštenje i MediaStream je uspješno dobiven.
• stream.getVideoTracks()[0]: Ovo dohvaća prvi video zapis iz streama. Stream može sadržavati više zapisa iste vrste.
• stream.getAudioTracks()[0]: Ovo dohvaća prvi audio zapis iz streama.
• videoElement.srcObject = stream: Ovo postavlja srcObject video elementa na MediaStream, omogućujući prikaz videa.
• videoElement.play(): Pokreće reprodukciju videa.
• .catch(function(err) { ... }): Ovo se izvršava ako dođe do pogreške, primjerice ako korisnik odbije dopuštenje.

Ograničenja

Ograničenja vam omogućuju da specificirate zahtjeve za medijske zapise, kao što su rezolucija, broj sličica u sekundi i kvaliteta zvuka. To je ključno kako biste osigurali da vaša aplikacija prima medijske podatke koji zadovoljavaju njezine specifične potrebe. Ograničenja se mogu specificirati unutar poziva getUserMedia().

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("Došlo je do pogreške: " + err);
});

Objašnjenje:

• width: { min: 640, ideal: 1280, max: 1920 }: Ovo specificira da bi širina videa trebala biti najmanje 640 piksela, idealno 1280 piksela, a najviše 1920 piksela. Preglednik će pokušati pronaći kameru koja podržava ta ograničenja.
• height: { min: 480, ideal: 720, max: 1080 }: Slično širini, ovo definira željenu visinu videa.
• frameRate: { ideal: 30, max: 60 }: Ovo zahtijeva broj sličica u sekundi od idealno 30, a ne više od 60.
• echoCancellation: { exact: true }: Ovo zahtijeva da poništavanje jeke bude omogućeno za audio zapis. exact: true znači da preglednik *mora* osigurati poništavanje jeke ili će zahtjev propasti.
• noiseSuppression: { exact: true }: Ovo zahtijeva da suzbijanje buke bude omogućeno za audio zapis.

Važno je napomenuti da preglednik možda neće moći ispuniti sva ograničenja. Možete koristiti getSettings() na MediaStreamTrack-u kako biste utvrdili stvarne postavke koje su primijenjene.

Manipuliranje MediaStream Zapisima

Jednom kada dobijete MediaStreamTrack, možete ga manipulirati na različite načine kako biste kontrolirali audio i video izlaz.

Omogućavanje i Onemogućavanje Zapisa

Možete omogućiti ili onemogućiti zapis koristeći svojstvo enabled. Postavljanje enabled na false učinkovito će utišati audio zapis ili onemogućiti video zapis bez zaustavljanja. Vraćanje na true ponovno će omogućiti zapis.

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

// Onemogući video zapis
videoTrack.enabled = false;

// Omogući video zapis
videoTrack.enabled = true;

Ovo je korisno za implementaciju značajki poput gumba za utišavanje i prebacivanje videa.

Primjena Ograničenja Nakon Stvaranja

Možete koristiti metodu applyConstraints() za izmjenu ograničenja zapisa nakon što je stvoren. To vam omogućuje dinamičko prilagođavanje audio i video postavki na temelju korisničkih preferencija ili mrežnih uvjeta. Međutim, neka ograničenja možda neće biti moguće mijenjati nakon što je zapis stvoren. Uspjeh applyConstraints() ovisi o mogućnostima temeljnog hardvera i trenutnom stanju zapisa.

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

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Ograničenja uspješno primijenjena.");
  })
  .catch(function(err) {
    console.log("Primjena ograničenja nije uspjela: " + err);
  });

Zaustavljanje Zapisa

Da biste potpuno zaustavili zapis i oslobodili temeljne resurse, možete koristiti metodu stop(). To je važno za oslobađanje kamere i mikrofona kada više nisu potrebni, posebno u okruženjima s ograničenim resursima poput mobilnih uređaja. Jednom kad je zapis zaustavljen, ne može se ponovno pokrenuti. Morat ćete dohvatiti novi zapis koristeći getUserMedia().

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

// Zaustavi zapis
videoTrack.stop();

Također je dobra praksa zaustaviti cijeli MediaStream kada završite s njim:

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

Napredne Tehnike

Osim osnova, postoji nekoliko naprednih tehnika koje možete koristiti za daljnju manipulaciju i poboljšanje MediaStreamTrack objekata.

Kloniranje Zapisa

Metoda clone() stvara novi MediaStreamTrack objekt koji je kopija originala. Klonirani zapis dijeli isti temeljni medijski izvor. Ovo je korisno kada trebate koristiti isti medijski izvor na više mjesta, kao što je prikazivanje istog videa u više video elemenata.

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

// Stvori novi MediaStream s kloniranim zapisom
const clonedStream = new MediaStream([clonedTrack]);

// Prikaži klonirani stream u drugom video elementu
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

Imajte na umu da će zaustavljanje originalnog zapisa također zaustaviti i klonirani zapis, jer dijele isti temeljni medijski izvor.

Obrada Zvuka i Videa

Sučelje MediaStreamTrack samo po sebi ne pruža izravne metode za obradu audio ili video podataka. Međutim, možete koristiti druge web API-je, kao što su Web Audio API i Canvas API, da biste to postigli.

Obrada Zvuka s Web Audio API-jem

Možete koristiti Web Audio API za analizu i manipulaciju audio podacima iz MediaStreamTrack-a. To vam omogućuje obavljanje zadataka kao što su vizualizacija zvuka, smanjenje šuma i audio efekti.

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

// Stvori čvor analizatora za izdvajanje audio podataka
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Poveži izvor s analizatorom
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Dohvati podatke o frekvenciji
  analyser.getByteFrequencyData(dataArray);

  // Koristi dataArray za vizualizaciju zvuka
  // (npr. nacrtaj frekvencijski spektar na platnu)
  console.log(dataArray);
}

draw();

Objašnjenje:

• new AudioContext(): Stvara novi kontekst za Web Audio API.
• audioContext.createMediaStreamSource(stream): Stvara čvor izvora zvuka iz MediaStream-a.
• audioContext.createAnalyser(): Stvara čvor analizatora koji se može koristiti za izdvajanje audio podataka.
• analyser.fftSize = 2048: Postavlja veličinu Brze Fourierove Transformacije (FFT), koja određuje broj frekvencijskih spremnika.
• analyser.getByteFrequencyData(dataArray): Popunjava dataArray podacima o frekvenciji.
• Funkcija draw() se poziva ponavljano koristeći requestAnimationFrame() kako bi se kontinuirano ažurirala vizualizacija zvuka.

Obrada Videa s Canvas API-jem

Možete koristiti Canvas API za manipulaciju video sličicama iz MediaStreamTrack-a. To vam omogućuje obavljanje zadataka kao što su primjena filtara, dodavanje slojeva i provođenje video analize u stvarnom vremenu.

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

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Nacrtaj trenutnu video sličicu na platno
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Manipuliraj podacima platna (npr. primijeni filtar)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Primijeni jednostavan filtar sivih tonova
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // crvena
    data[i + 1] = avg;   // zelena
    data[i + 2] = avg;   // plava
  }

  // Vrati izmijenjene podatke natrag na platno
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

Objašnjenje:

• Funkcija drawFrame() se poziva ponavljano koristeći requestAnimationFrame() kako bi se kontinuirano ažuriralo platno.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Crta trenutnu video sličicu na platno.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Dohvaća slikovne podatke s platna.
• Kod iterira kroz podatke o pikselima i primjenjuje filtar sivih tonova.
• ctx.putImageData(imageData, 0, 0): Vraća izmijenjene slikovne podatke natrag na platno.

Korištenje MediaStream Zapisa s WebRTC-om

MediaStreamTrack objekti su temeljni za WebRTC (Web Real-Time Communication), koji omogućuje audio i video komunikaciju u stvarnom vremenu izravno između preglednika. Možete dodati MediaStreamTrack objekte u WebRTC RTCPeerConnection kako biste slali audio i video podatke udaljenom sudioniku.

const peerConnection = new RTCPeerConnection();

// Dodaj audio i video zapise u peer vezu
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// Ostatak procesa WebRTC signalizacije i uspostave veze slijedio bi ovdje.

To vam omogućuje izradu aplikacija za videokonferencije, platformi za prijenos uživo i drugih alata za komunikaciju u stvarnom vremenu.

Kompatibilnost s Preglednicima

API MediaStreamTrack široko je podržan u modernim preglednicima, uključujući Chrome, Firefox, Safari i Edge. Međutim, uvijek je dobra ideja provjeriti najnovije informacije o kompatibilnosti preglednika na resursima kao što je MDN Web Docs.

Najbolje Prakse

• Pažljivo Rukujte Dopuštenjima: Uvijek pažljivo rukujte korisničkim dopuštenjima za pristup kameri i mikrofonu. Pružite jasna objašnjenja zašto vaša aplikacija treba pristup tim uređajima.
• Zaustavite Zapise Kada Nisu Potrebni: Oslobodite resurse kamere i mikrofona zaustavljanjem zapisa kada se više ne koriste.
• Optimizirajte Ograničenja: Koristite ograničenja kako biste zatražili optimalne medijske postavke za svoju aplikaciju. Izbjegavajte traženje pretjerano visokih rezolucija ili broja sličica u sekundi ako nisu potrebne.
• Pratite Stanje Zapisa: Slušajte događaje poput ended i mute kako biste reagirali na promjene u stanju zapisa.
• Testirajte na Različitim Uređajima: Testirajte svoju aplikaciju na različitim uređajima i preglednicima kako biste osigurali kompatibilnost.
• Uzmite u Obzir Pristupačnost: Dizajnirajte svoju aplikaciju tako da bude pristupačna korisnicima s invaliditetom. Omogućite alternativne metode unosa i osigurajte da su audio i video izlazi jasni i razumljivi.

Zaključak

Sučelje MediaStreamTrack moćan je alat za izradu web aplikacija bogatih medijskim sadržajem. Razumijevanjem kako stvarati, manipulirati i upravljati medijskim zapisima, možete stvoriti privlačna i interaktivna iskustva za svoje korisnike. Ovaj sveobuhvatni vodič pokrio je bitne aspekte upravljanja MediaStreamTrack-om, od dobivanja zapisa pomoću getUserMedia() do naprednih tehnika poput obrade zvuka i videa. Ne zaboravite dati prioritet privatnosti korisnika i optimizirati performanse pri radu s medijskim streamovima. Daljnje istraživanje WebRTC-a i srodnih tehnologija značajno će poboljšati vaše sposobnosti u ovom uzbudljivom području web razvoja.