Frontend MediaStream Track: Celovit vodnik po upravljanju medijskih sledi

Vmesnik MediaStreamTrack predstavlja posamezno medijsko sled znotraj MediaStream. Ta sled lahko vsebuje zvok ali video. Razumevanje upravljanja teh sledi je ključno za izgradnjo robustnih in interaktivnih medijskih aplikacij na spletu. Ta celovit vodnik vas bo popeljal skozi ustvarjanje, manipulacijo in upravljanje MediaStream sledi v frontend razvoju.

Kaj je MediaStream Track?

MediaStream je tok medijske vsebine, ki lahko vsebuje več objektov MediaStreamTrack. Vsaka sled predstavlja en vir zvoka ali videa. Predstavljajte si ga kot vsebnik, ki hrani en tok zvočnih ali video podatkov.

Ključne lastnosti in metode

• kind: Niz samo za branje, ki označuje vrsto sledi ("audio" ali "video").
• id: Niz samo za branje, ki predstavlja edinstven identifikator sledi.
• label: Niz samo za branje, ki zagotavlja človeku berljivo oznako za sled.
• enabled: Logična vrednost, ki označuje, ali je sled trenutno omogočena. Nastavitev na false utiša ali onemogoči sled, ne da bi jo ustavila.
• muted: Logična vrednost samo za branje, ki označuje, ali je sled utišana zaradi sistemskih omejitev ali uporabniških nastavitev.
• readyState: Niz samo za branje, ki označuje trenutno stanje sledi ("live", "ended").
• getSettings(): Vrne slovar trenutnih nastavitev sledi.
• getConstraints(): Vrne slovar omejitev, ki so bile uporabljene za sled ob njenem ustvarjanju.
• applyConstraints(constraints): Poskuša uporabiti nove omejitve za sled.
• clone(): Vrne nov objekt MediaStreamTrack, ki je klon izvirnika.
• stop(): Ustavi sled in s tem konča pretok medijskih podatkov.
• addEventListener(): Omogoča poslušanje dogodkov na sledi, kot sta ended ali mute.

Pridobivanje MediaStream sledi

Primarni način za pridobivanje objektov MediaStreamTrack je preko API-ja getUserMedia(). Ta API pozove uporabnika za dovoljenje za dostop do njegove kamere in mikrofona in, če je dovoljenje odobreno, vrne MediaStream, ki vsebuje zahtevane sledi.

Uporaba getUserMedia()

Tu je osnovni primer, kako uporabiti getUserMedia() za dostop do uporabnikove kamere in mikrofona:

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

    // Primer: Prikaz videa v video elementu
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("Prišlo je do napake: " + err);
  });

Pojasnilo:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): To zahteva dostop do video in zvočnih vhodov. Objekt, posredovan getUserMedia, določa zahtevane vrste medijev.
• .then(function(stream) { ... }): To se izvede, ko uporabnik odobri dovoljenje in je MediaStream uspešno pridobljen.
• stream.getVideoTracks()[0]: To pridobi prvo video sled iz toka. Tok lahko vsebuje več sledi iste vrste.
• stream.getAudioTracks()[0]: To pridobi prvo zvočno sled iz toka.
• videoElement.srcObject = stream: To nastavi srcObject video elementa na MediaStream, kar omogoča prikaz videa.
• videoElement.play(): Zažene predvajanje videa.
• .catch(function(err) { ... }): To se izvede, če pride do napake, na primer, če uporabnik zavrne dovoljenje.

Omejitve

Omejitve vam omogočajo, da določite zahteve za medijske sledi, kot so ločljivost, hitrost sličic in kakovost zvoka. To je ključno za zagotavljanje, da vaša aplikacija prejme medijske podatke, ki ustrezajo njenim specifičnim potrebam. Omejitve lahko določite znotraj klica 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("Prišlo je do napake: " + err);
});

Pojasnilo:

• width: { min: 640, ideal: 1280, max: 1920 }: To določa, da mora biti širina videa vsaj 640 slikovnih pik, idealno 1280 slikovnih pik in ne več kot 1920 slikovnih pik. Brskalnik bo poskušal najti kamero, ki podpira te omejitve.
• height: { min: 480, ideal: 720, max: 1080 }: Podobno kot širina, to določa želeno višino videa.
• frameRate: { ideal: 30, max: 60 }: To zahteva hitrost sličic idealno 30 sličic na sekundo in ne več kot 60 sličic na sekundo.
• echoCancellation: { exact: true }: To zahteva, da je za zvočno sled omogočeno odpravljanje odmeva. exact: true pomeni, da mora brskalnik *zagotoviti* odpravljanje odmeva, sicer bo zahteva neuspešna.
• noiseSuppression: { exact: true }: To zahteva, da je za zvočno sled omogočeno dušenje šuma.

Pomembno je omeniti, da brskalnik morda ne bo mogel izpolniti vseh omejitev. Uporabite lahko getSettings() na MediaStreamTrack, da ugotovite dejanske nastavitve, ki so bile uporabljene.

Upravljanje MediaStream sledi

Ko pridobite MediaStreamTrack, ga lahko upravljate na različne načine za nadzor zvočnega in video izhoda.

Omogočanje in onemogočanje sledi

Sled lahko omogočite ali onemogočite z lastnostjo enabled. Nastavitev enabled na false bo učinkovito utišala zvočno sled ali onemogočila video sled, ne da bi jo ustavila. Ponovna nastavitev na true bo sled ponovno omogočila.

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

// Onemogoči video sled
videoTrack.enabled = false;

// Omogoči video sled
videoTrack.enabled = true;

To je uporabno za implementacijo funkcij, kot so gumbi za utišanje in preklapljanje videa.

Uporaba omejitev po ustvarjanju

Uporabite lahko metodo applyConstraints() za spreminjanje omejitev sledi po tem, ko je bila ustvarjena. To vam omogoča dinamično prilagajanje zvočnih in video nastavitev glede na uporabniške preference ali omrežne pogoje. Vendar pa nekatere omejitve morda ne bodo spremenljive, ko je sled že ustvarjena. Uspeh applyConstraints() je odvisen od zmožnosti osnovne strojne opreme in trenutnega stanja sledi.

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

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Omejitve uspešno uporabljene.");
  })
  .catch(function(err) {
    console.log("Uporaba omejitev ni uspela: " + err);
  });

Ustavljanje sledi

Za popolno ustavitev sledi in sprostitev osnovnih virov lahko uporabite metodo stop(). To je pomembno za sprostitev kamere in mikrofona, ko nista več potrebna, zlasti v okoljih z omejenimi viri, kot so mobilne naprave. Ko je sled ustavljena, je ni mogoče ponovno zagnati. Novo sled boste morali pridobiti z uporabo getUserMedia().

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

// Ustavi sled
videoTrack.stop();

Dobra praksa je tudi, da ustavite celoten MediaStream, ko ga ne potrebujete več:

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

Napredne tehnike

Poleg osnov obstaja več naprednih tehnik, ki jih lahko uporabite za nadaljnje upravljanje in izboljšanje objektov MediaStreamTrack.

Kloniranje sledi

Metoda clone() ustvari nov objekt MediaStreamTrack, ki je kopija izvirnika. Klonirana sled si deli isti osnovni medijski vir. To je uporabno, ko morate isti medijski vir uporabiti na več mestih, na primer za prikaz istega videa v več video elementih.

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

// Ustvari nov MediaStream s klonirano sledjo
const clonedStream = new MediaStream([clonedTrack]);

// Prikaži kloniran tok v drugem video elementu
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

Upoštevajte, da bo ustavitev izvirne sledi ustavila tudi klonirano sled, saj si delita isti osnovni medijski vir.

Obdelava zvoka in videa

Sam vmesnik MediaStreamTrack ne ponuja neposrednih metod za obdelavo zvočnih ali video podatkov. Vendar pa lahko za to uporabite druge spletne API-je, kot sta Web Audio API in Canvas API.

Obdelava zvoka z Web Audio API

Z Web Audio API lahko analizirate in upravljate zvočne podatke iz MediaStreamTrack. To vam omogoča izvajanje nalog, kot so vizualizacija zvoka, zmanjšanje šuma in zvočni učinki.

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

// Ustvari analizatorsko vozlišče za pridobivanje zvočnih podatkov
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Poveži vir z analizatorjem
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Pridobi frekvenčne podatke
  analyser.getByteFrequencyData(dataArray);

  // Uporabi dataArray za vizualizacijo zvoka
  // (npr. nariši frekvenčni spekter na platno)
  console.log(dataArray);
}

draw();

Pojasnilo:

• new AudioContext(): Ustvari nov kontekst Web Audio API.
• audioContext.createMediaStreamSource(stream): Ustvari izvorno zvočno vozlišče iz MediaStream.
• audioContext.createAnalyser(): Ustvari analizatorsko vozlišče, ki se lahko uporablja za pridobivanje zvočnih podatkov.
• analyser.fftSize = 2048: Nastavi velikost hitre Fourierjeve transformacije (FFT), ki določa število frekvenčnih pasov.
• analyser.getByteFrequencyData(dataArray): Napolni dataArray s frekvenčnimi podatki.
• Funkcija draw() se večkratno kliče z uporabo requestAnimationFrame() za nenehno posodabljanje vizualizacije zvoka.

Obdelava videa s Canvas API

S Canvas API lahko upravljate video sličice iz MediaStreamTrack. To vam omogoča izvajanje nalog, kot so uporaba filtrov, dodajanje prekrivnih elementov in izvajanje video analize v realnem času.

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

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Nariši trenutno video sličico na platno
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Upravljaj s podatki platna (npr. uporabi filter)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Uporabi preprost sivinski filter
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // rdeča
    data[i + 1] = avg;   // zelena
    data[i + 2] = avg;   // modra
  }

  // Postavi spremenjene podatke nazaj na platno
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

Pojasnilo:

• Funkcija drawFrame() se večkratno kliče z uporabo requestAnimationFrame() za nenehno posodabljanje platna.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Nariše trenutno video sličico na platno.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Pridobi slikovne podatke s platna.
• Koda iterira skozi slikovne podatke in uporabi sivinski filter.
• ctx.putImageData(imageData, 0, 0): Postavi spremenjene slikovne podatke nazaj na platno.

Uporaba MediaStream sledi z WebRTC

Objekti MediaStreamTrack so temeljni za WebRTC (Web Real-Time Communication), ki omogoča avdio in video komunikacijo v realnem času neposredno med brskalniki. Objekte MediaStreamTrack lahko dodate v WebRTC RTCPeerConnection za pošiljanje zvočnih in video podatkov oddaljenemu sogovorniku.

const peerConnection = new RTCPeerConnection();

// Dodaj zvočne in video sledi v peer povezavo
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// Tukaj bi sledil preostanek procesa WebRTC signalizacije in vzpostavitve povezave.

To vam omogoča izgradnjo aplikacij za videokonference, platform za pretakanje v živo in drugih orodij za komunikacijo v realnem času.

Združljivost brskalnikov

API MediaStreamTrack je široko podprt v sodobnih brskalnikih, vključno s Chrome, Firefox, Safari in Edge. Vendar je vedno dobro preveriti najnovejše informacije o združljivosti brskalnikov na virih, kot je MDN Web Docs.

Najboljše prakse

• Pazljivo ravnajte z dovoljenji: Vedno skrbno upravljajte z uporabniškimi dovoljenji za dostop do kamere in mikrofona. Zagotovite jasna pojasnila, zakaj vaša aplikacija potrebuje dostop do teh naprav.
• Ustavite sledi, ko niso potrebne: Sprostite vire kamere in mikrofona tako, da ustavite sledi, ko niso več v uporabi.
• Optimizirajte omejitve: Uporabite omejitve za zahtevanje optimalnih medijskih nastavitev za vašo aplikacijo. Izogibajte se zahtevanju previsokih ločljivosti ali hitrosti sličic, če niso potrebne.
• Spremljajte stanje sledi: Poslušajte dogodke, kot sta ended in mute, da se odzovete na spremembe v stanju sledi.
• Testirajte na različnih napravah: Preizkusite svojo aplikacijo na različnih napravah in brskalnikih, da zagotovite združljivost.
• Upoštevajte dostopnost: Zasnovo aplikacije prilagodite tako, da bo dostopna uporabnikom s posebnimi potrebami. Zagotovite alternativne načine vnosa in poskrbite, da bosta zvočni in video izhod jasna in razumljiva.

Zaključek

Vmesnik MediaStreamTrack je zmogljivo orodje za izgradnjo spletnih aplikacij, bogatih z mediji. Z razumevanjem, kako ustvarjati, upravljati in nadzorovati medijske sledi, lahko ustvarite privlačne in interaktivne izkušnje za svoje uporabnike. Ta celovit vodnik je zajel bistvene vidike upravljanja MediaStreamTrack, od pridobivanja sledi z uporabo getUserMedia() do naprednih tehnik, kot sta obdelava zvoka in videa. Ne pozabite dati prednosti zasebnosti uporabnikov in optimizirati delovanje pri delu z medijskimi tokovi. Nadaljnje raziskovanje WebRTC in povezanih tehnologij bo znatno izboljšalo vaše zmožnosti na tem vznemirljivem področju spletnega razvoja.