Frontend MediaStream takelis: išsamus medijos takelių valdymo vadovas

MediaStreamTrack sąsaja atspindi vieną medijos takelį MediaStream viduje. Šis takelis gali turėti garso arba vaizdo įrašą. Supratimas, kaip valdyti šiuos takelius, yra labai svarbus kuriant patikimas ir interaktyvias medijos programas internete. Šis išsamus vadovas padės jums susipažinti su MediaStream takelių kūrimu, manipuliavimu ir valdymu frontend kūrime.

Kas yra MediaStream takelis?

MediaStream yra medijos turinio srautas, kuriame gali būti keli MediaStreamTrack objektai. Kiekvienas takelis atspindi vieną garso ar vaizdo šaltinį. Įsivaizduokite tai kaip konteinerį, kuriame laikomas vienas garso arba vaizdo duomenų srautas.

Pagrindinės savybės ir metodai

• kind: Tik skaitoma eilutė, nurodanti takelio tipą ("audio" arba "video").
• id: Tik skaitoma eilutė, atspindinti unikalų takelio identifikatorių.
• label: Tik skaitoma eilutė, pateikianti žmogui suprantamą takelio etiketę.
• enabled: Loginė reikšmė, nurodanti, ar takelis šiuo metu yra įjungtas. Nustačius reikšmę false, takelis nutildomas arba išjungiamas jo nesustabdant.
• muted: Tik skaitoma loginė reikšmė, nurodanti, ar takelis yra nutildytas dėl sistemos lygio apribojimų ar vartotojo nustatymų.
• readyState: Tik skaitoma eilutė, nurodanti dabartinę takelio būseną ("live", "ended").
• getSettings(): Grąžina žodyną su dabartiniais takelio nustatymais.
• getConstraints(): Grąžina žodyną su apribojimais, taikytais takeliui jį kuriant.
• applyConstraints(constraints): Bando taikyti naujus apribojimus takeliui.
• clone(): Grąžina naują MediaStreamTrack objektą, kuris yra originalo klonas.
• stop(): Sustabdo takelį, nutraukdamas medijos duomenų srautą.
• addEventListener(): Leidžia klausytis takelio įvykių, tokių kaip ended ar mute.

MediaStream takelių gavimas

Pagrindinis būdas gauti MediaStreamTrack objektus yra per getUserMedia() API. Šis API paprašo vartotojo leidimo pasiekti jo kamerą ir mikrofoną, o jei leidimas suteikiamas, grąžina MediaStream, kuriame yra prašomi takeliai.

getUserMedia() naudojimas

Štai pagrindinis pavyzdys, kaip naudoti getUserMedia() norint pasiekti vartotojo kamerą ir mikrofoną:

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

    // Example: Display the video in a video element
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });

Paaiškinimas:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): Prašoma prieigos prie vaizdo ir garso įvesties. Objektas, perduodamas getUserMedia, apibrėžia prašomus medijos tipus.
• .then(function(stream) { ... }): Tai įvykdoma, kai vartotojas suteikia leidimą ir sėkmingai gaunamas MediaStream.
• stream.getVideoTracks()[0]: Gaunamas pirmasis vaizdo takelis iš srauto. Sraute gali būti keli to paties tipo takeliai.
• stream.getAudioTracks()[0]: Gaunamas pirmasis garso takelis iš srauto.
• videoElement.srcObject = stream: Nustatomas vaizdo elemento srcObject į MediaStream, leidžiant rodyti vaizdo įrašą.
• videoElement.play(): Pradedamas vaizdo įrašo atkūrimas.
• .catch(function(err) { ... }): Tai įvykdoma, jei įvyksta klaida, pavyzdžiui, vartotojas atmeta leidimą.

Apribojimai

Apribojimai leidžia nurodyti reikalavimus medijos takeliams, tokius kaip skiriamoji geba, kadrų dažnis ir garso kokybė. Tai labai svarbu norint užtikrinti, kad jūsų programa gautų medijos duomenis, atitinkančius jos specifinius poreikius. Apribojimai gali būti nurodyti getUserMedia() iškvietime.

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("An error occurred: " + err);
});

Paaiškinimas:

• width: { min: 640, ideal: 1280, max: 1920 }: Nurodoma, kad vaizdo plotis turi būti ne mažesnis kaip 640 pikselių, idealiai 1280 pikselių ir ne daugiau kaip 1920 pikselių. Naršyklė bandys rasti kamerą, kuri palaiko šiuos apribojimus.
• height: { min: 480, ideal: 720, max: 1080 }: Panašiai kaip plotis, tai apibrėžia norimą vaizdo aukštį.
• frameRate: { ideal: 30, max: 60 }: Prašoma, kad kadrų dažnis būtų idealiai 30 kadrų per sekundę ir ne daugiau kaip 60 kadrų per sekundę.
• echoCancellation: { exact: true }: Prašoma, kad garso takeliui būtų įjungtas aido slopinimas. exact: true reiškia, kad naršyklė *privalo* pateikti aido slopinimą, kitaip užklausa nepavyks.
• noiseSuppression: { exact: true }: Prašoma, kad garso takeliui būtų įjungtas triukšmo slopinimas.

Svarbu paminėti, kad naršyklė gali nesugebėti įvykdyti visų apribojimų. Galite naudoti getSettings() ant MediaStreamTrack, kad nustatytumėte faktinius nustatymus, kurie buvo pritaikyti.

MediaStream takelių manipuliavimas

Gavę MediaStreamTrack, galite jį įvairiai manipuliuoti, kad valdytumėte garso ir vaizdo išvestį.

Takelių įjungimas ir išjungimas

Galite įjungti arba išjungti takelį naudodami enabled savybę. Nustačius enabled į false, garso takelis bus efektyviai nutildytas arba vaizdo takelis išjungtas jo nesustabdant. Nustačius atgal į true, takelis bus vėl įjungtas.

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

// Disable the video track
videoTrack.enabled = false;

// Enable the video track
videoTrack.enabled = true;

Tai naudinga diegiant funkcijas, tokias kaip nutildymo mygtukai ir vaizdo perjungikliai.

Apribojimų taikymas po sukūrimo

Galite naudoti applyConstraints() metodą, norėdami pakeisti takelio apribojimus po jo sukūrimo. Tai leidžia dinamiškai koreguoti garso ir vaizdo nustatymus atsižvelgiant į vartotojo pageidavimus ar tinklo sąlygas. Tačiau kai kurie apribojimai gali būti nekeičiami po takelio sukūrimo. applyConstraints() sėkmė priklauso nuo pagrindinės aparatinės įrangos galimybių ir dabartinės takelio būsenos.

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

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Constraints applied successfully.");
  })
  .catch(function(err) {
    console.log("Failed to apply constraints: " + err);
  });

Takelių stabdymas

Norėdami visiškai sustabdyti takelį ir atlaisvinti pagrindinius išteklius, galite naudoti stop() metodą. Tai svarbu norint atlaisvinti kamerą ir mikrofoną, kai jie nebėra reikalingi, ypač išteklių ribojamose aplinkose, pavyzdžiui, mobiliuosiuose įrenginiuose. Sustabdžius takelį, jo negalima paleisti iš naujo. Jums reikės gauti naują takelį naudojant getUserMedia().

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

// Stop the track
videoTrack.stop();

Taip pat gera praktika yra sustabdyti visą MediaStream, kai baigiate su juo dirbti:

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

Pažangios technikos

Be pagrindų, yra keletas pažangių technikų, kurias galite naudoti norėdami toliau manipuliuoti ir patobulinti MediaStreamTrack objektus.

Takelių klonavimas

Metodas clone() sukuria naują MediaStreamTrack objektą, kuris yra originalo kopija. Klonuotas takelis dalijasi tuo pačiu pagrindiniu medijos šaltiniu. Tai naudinga, kai reikia naudoti tą patį medijos šaltinį keliose vietose, pavyzdžiui, rodant tą patį vaizdo įrašą keliuose vaizdo elementuose.

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

// Create a new MediaStream with the cloned track
const clonedStream = new MediaStream([clonedTrack]);

// Display the cloned stream in another video element
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

Atkreipkite dėmesį, kad sustabdžius originalų takelį, bus sustabdytas ir klonuotas takelis, nes jie dalijasi tuo pačiu pagrindiniu medijos šaltiniu.

Garso ir vaizdo apdorojimas

Pati MediaStreamTrack sąsaja nepateikia tiesioginių metodų garso ar vaizdo duomenims apdoroti. Tačiau tam galite naudoti kitus žiniatinklio API, tokius kaip Web Audio API ir Canvas API.

Garso apdorojimas su Web Audio API

Galite naudoti Web Audio API, norėdami analizuoti ir manipuliuoti garso duomenimis iš MediaStreamTrack. Tai leidžia atlikti tokias užduotis kaip garso vizualizavimas, triukšmo mažinimas ir garso efektai.

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

// Create an analyser node to extract audio data
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Connect the source to the analyser
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Get the frequency data
  analyser.getByteFrequencyData(dataArray);

  // Use the dataArray to visualize the audio
  // (e.g., draw a frequency spectrum on a canvas)
  console.log(dataArray);
}

draw();

Paaiškinimas:

• new AudioContext(): Sukuria naują Web Audio API kontekstą.
• audioContext.createMediaStreamSource(stream): Sukuria garso šaltinio mazgą iš MediaStream.
• audioContext.createAnalyser(): Sukuria analizatoriaus mazgą, kurį galima naudoti garso duomenims išgauti.
• analyser.fftSize = 2048: Nustato greitosios Furjė transformacijos (FFT) dydį, kuris lemia dažnių juostų skaičių.
• analyser.getByteFrequencyData(dataArray): Užpildo dataArray dažnių duomenimis.
• draw() funkcija yra iškviečiama pakartotinai naudojant requestAnimationFrame(), kad nuolat atnaujintų garso vizualizaciją.

Vaizdo apdorojimas su Canvas API

Galite naudoti Canvas API, norėdami manipuliuoti vaizdo kadrais iš MediaStreamTrack. Tai leidžia atlikti tokias užduotis kaip filtrų taikymas, perdangų pridėjimas ir realaus laiko vaizdo analizė.

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

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Draw the current video frame onto the canvas
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Manipulate the canvas data (e.g., apply a filter)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Apply a simple grayscale filter
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // red
    data[i + 1] = avg;   // green
    data[i + 2] = avg;   // blue
  }

  // Put the modified data back onto the canvas
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

Paaiškinimas:

• drawFrame() funkcija yra iškviečiama pakartotinai naudojant requestAnimationFrame(), kad nuolat atnaujintų drobę.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Piešia dabartinį vaizdo kadrą ant drobės.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Gauna vaizdo duomenis iš drobės.
• Kodas iteruoja per pikselių duomenis ir taiko pilkų atspalvių filtrą.
• ctx.putImageData(imageData, 0, 0): Įkelia pakeistus vaizdo duomenis atgal ant drobės.

MediaStream takelių naudojimas su WebRTC

MediaStreamTrack objektai yra esminiai WebRTC (Web Real-Time Communication), kuris įgalina realaus laiko garso ir vaizdo ryšį tiesiogiai tarp naršyklių. Galite pridėti MediaStreamTrack objektus į WebRTC RTCPeerConnection, kad siųstumėte garso ir vaizdo duomenis nuotoliniam partneriui.

const peerConnection = new RTCPeerConnection();

// Add the audio and video tracks to the peer connection
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// The rest of the WebRTC signaling and connection establishment process would follow here.

Tai leidžia kurti vaizdo konferencijų programas, tiesioginių transliacijų platformas ir kitus realaus laiko komunikacijos įrankius.

Naršyklių suderinamumas

MediaStreamTrack API yra plačiai palaikomas šiuolaikinių naršyklių, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau visada gera idėja patikrinti naujausią naršyklių suderinamumo informaciją ištekliuose, tokiuose kaip MDN Web Docs.

Geroji praktika

• Atsargiai tvarkykite leidimus: Visada maloniai tvarkykite vartotojo leidimus prieigai prie kameros ir mikrofono. Pateikite aiškius paaiškinimus, kodėl jūsų programai reikia prieigos prie šių įrenginių.
• Sustabdykite takelius, kai nereikia: Atlaisvinkite kameros ir mikrofono išteklius sustabdydami takelius, kai jie nebenaudojami.
• Optimizuokite apribojimus: Naudokite apribojimus, kad paprašytumėte optimalių medijos nustatymų savo programai. Venkite prašyti per didelės skiriamosios gebos ar kadrų dažnio, jei tai nėra būtina.
• Stebėkite takelio būseną: Klausykitės įvykių, tokių kaip ended ir mute, kad reaguotumėte į takelio būsenos pasikeitimus.
• Testuokite skirtinguose įrenginiuose: Išbandykite savo programą įvairiuose įrenginiuose ir naršyklėse, kad užtikrintumėte suderinamumą.
• Atsižvelkite į prieinamumą: Kurkite savo programą taip, kad ji būtų prieinama vartotojams su negalia. Pateikite alternatyvius įvesties metodus ir užtikrinkite, kad garso ir vaizdo išvestis būtų aiški ir suprantama.

Išvada

MediaStreamTrack sąsaja yra galingas įrankis kuriant turtingas medijos žiniatinklio programas. Suprasdami, kaip kurti, manipuliuoti ir valdyti medijos takelius, galite sukurti įtraukiančias ir interaktyvias patirtis savo vartotojams. Šis išsamus vadovas apėmė esminius MediaStreamTrack valdymo aspektus, nuo takelių gavimo naudojant getUserMedia() iki pažangių technikų, tokių kaip garso ir vaizdo apdorojimas. Dirbdami su medijos srautais, nepamirškite teikti pirmenybę vartotojų privatumui ir optimizuoti našumą. Tolesnis WebRTC ir susijusių technologijų tyrinėjimas žymiai išplės jūsų galimybes šioje jaudinančioje žiniatinklio kūrimo srityje.