Frontend MediaStream Track: Visaptverošs ceļvedis mediju celiņu pārvaldībā

MediaStreamTrack saskarne attēlo vienu mediju celiņu MediaStream ietvaros. Šis celiņš var saturēt vai nu audio, vai video. Izpratne par to, kā pārvaldīt šos celiņus, ir būtiska, lai veidotu stabilas un interaktīvas mediju lietojumprogrammas tīmeklī. Šis visaptverošais ceļvedis jūs iepazīstinās ar MediaStream celiņu izveidi, manipulāciju un pārvaldību frontend izstrādē.

Kas ir MediaStream celiņš?

MediaStream ir mediju satura straume, kas var saturēt vairākus MediaStreamTrack objektus. Katrs celiņš attēlo vienu audio vai video avotu. Uztveriet to kā konteineru, kas satur vienu audio vai video datu plūsmu.

Galvenās īpašības un metodes

• kind: Tikai lasāma virkne, kas norāda celiņa veidu ("audio" vai "video").
• id: Tikai lasāma virkne, kas attēlo unikālu celiņa identifikatoru.
• label: Tikai lasāma virkne, kas nodrošina cilvēkam salasāmu celiņa etiķeti.
• enabled: Būla vērtība, kas norāda, vai celiņš pašlaik ir ieslēgts. Iestatot to uz false, celiņš tiek izslēgts vai atspējots, to neapturot.
• muted: Tikai lasāma būla vērtība, kas norāda, vai celiņš ir izslēgts sistēmas līmeņa ierobežojumu vai lietotāja iestatījumu dēļ.
• readyState: Tikai lasāma virkne, kas norāda celiņa pašreizējo stāvokli ("live", "ended").
• getSettings(): Atgriež vārdnīcu ar celiņa pašreizējiem iestatījumiem.
• getConstraints(): Atgriež vārdnīcu ar ierobežojumiem, kas tika piemēroti celiņam tā izveides brīdī.
• applyConstraints(constraints): Mēģina piemērot jaunus ierobežojumus celiņam.
• clone(): Atgriež jaunu MediaStreamTrack objektu, kas ir oriģināla klons.
• stop(): Aptur celiņu, pārtraucot mediju datu plūsmu.
• addEventListener(): Ļauj klausīties notikumus celiņā, piemēram, ended vai mute.

MediaStream celiņu iegūšana

Galvenais veids, kā iegūt MediaStreamTrack objektus, ir izmantojot getUserMedia() API. Šis API pieprasa lietotājam atļauju piekļūt kamerai un mikrofonam, un, ja atļauja tiek dota, atgriež MediaStream, kas satur pieprasītos celiņus.

getUserMedia() izmantošana

Šeit ir pamata piemērs, kā izmantot getUserMedia(), lai piekļūtu lietotāja kamerai un mikrofonam:

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);
  });

Paskaidrojums:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): Šis pieprasa piekļuvi gan video, gan audio ievadei. Objekts, kas tiek padots getUserMedia, definē pieprasītos mediju veidus.
• .then(function(stream) { ... }): Šis tiek izpildīts, kad lietotājs piešķir atļauju un MediaStream tiek veiksmīgi iegūts.
• stream.getVideoTracks()[0]: Šis iegūst pirmo video celiņu no straumes. Straume var saturēt vairākus viena veida celiņus.
• stream.getAudioTracks()[0]: Šis iegūst pirmo audio celiņu no straumes.
• videoElement.srcObject = stream: Šis iestata video elementa srcObject uz MediaStream, ļaujot parādīt video.
• videoElement.play(): Sāk video atskaņošanu.
• .catch(function(err) { ... }): Šis tiek izpildīts, ja rodas kļūda, piemēram, lietotājs liedz atļauju.

Ierobežojumi

Ierobežojumi ļauj norādīt prasības mediju celiņiem, piemēram, izšķirtspēju, kadru nomaiņas ātrumu un audio kvalitāti. Tas ir būtiski, lai nodrošinātu, ka jūsu lietojumprogramma saņem mediju datus, kas atbilst tās specifiskajām vajadzībām. Ierobežojumus var norādīt getUserMedia() izsaukumā.

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);
});

Paskaidrojums:

• width: { min: 640, ideal: 1280, max: 1920 }: Šis norāda, ka video platumam jābūt vismaz 640 pikseļi, ideālā gadījumā 1280 pikseļi un ne vairāk kā 1920 pikseļi. Pārlūkprogramma mēģinās atrast kameru, kas atbalsta šos ierobežojumus.
• height: { min: 480, ideal: 720, max: 1080 }: Līdzīgi kā platums, šis definē vēlamo video augstumu.
• frameRate: { ideal: 30, max: 60 }: Šis pieprasa kadru nomaiņas ātrumu ideālā gadījumā 30 kadri sekundē un ne vairāk kā 60 kadri sekundē.
• echoCancellation: { exact: true }: Šis pieprasa, lai audio celiņam būtu ieslēgta atbalss slāpēšana. exact: true nozīmē, ka pārlūkprogrammai *obligāti* jānodrošina atbalss slāpēšana, pretējā gadījumā pieprasījums neizdosies.
• noiseSuppression: { exact: true }: Šis pieprasa, lai audio celiņam būtu ieslēgta trokšņu slāpēšana.

Ir svarīgi atzīmēt, ka pārlūkprogramma var nespēt izpildīt visus ierobežojumus. Jūs varat izmantot getSettings() uz MediaStreamTrack, lai noteiktu faktiskos iestatījumus, kas tika piemēroti.

MediaStream celiņu manipulēšana

Kad esat ieguvis MediaStreamTrack, jūs varat ar to manipulēt dažādos veidos, lai kontrolētu audio un video izvadi.

Celiņu ieslēgšana un izslēgšana

Jūs varat ieslēgt vai izslēgt celiņu, izmantojot enabled īpašību. Iestatot enabled uz false, audio celiņš tiks faktiski izslēgts vai video celiņš atspējots, to neapturot. Iestatot to atpakaļ uz true, celiņš tiks atkal ieslēgts.

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

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

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

Tas ir noderīgi, lai ieviestu tādas funkcijas kā skaņas izslēgšanas pogas un video pārslēdzējus.

Ierobežojumu piemērošana pēc izveides

Jūs varat izmantot applyConstraints() metodi, lai modificētu celiņa ierobežojumus pēc tā izveides. Tas ļauj dinamiski pielāgot audio un video iestatījumus, pamatojoties uz lietotāja preferencēm vai tīkla apstākļiem. Tomēr daži ierobežojumi var nebūt maināmi pēc celiņa izveides. applyConstraints() panākumi ir atkarīgi no pamatā esošās aparatūras spējām un celiņa pašreizējā stāvokļa.

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);
  });

Celiņu apturēšana

Lai pilnībā apturētu celiņu un atbrīvotu pamatā esošos resursus, varat izmantot stop() metodi. Tas ir svarīgi, lai atbrīvotu kameru un mikrofonu, kad tie vairs nav nepieciešami, īpaši ierobežotu resursu vidēs, piemēram, mobilajās ierīcēs. Kad celiņš ir apturēts, to nevar restartēt. Jums būs jāiegūst jauns celiņš, izmantojot getUserMedia().

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

// Stop the track
videoTrack.stop();

Ir arī laba prakse apturēt visu MediaStream, kad esat ar to beidzis:

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

Progresīvas metodes

Papildus pamatiem ir vairākas progresīvas metodes, ko varat izmantot, lai vēl vairāk manipulētu un uzlabotu MediaStreamTrack objektus.

Celiņu klonēšana

clone() metode izveido jaunu MediaStreamTrack objektu, kas ir oriģināla kopija. Klonētais celiņš koplieto to pašu pamatā esošo mediju avotu. Tas ir noderīgi, ja nepieciešams izmantot to pašu mediju avotu vairākās vietās, piemēram, rādot to pašu video vairākos video elementos.

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();

Ņemiet vērā, ka, apturot oriģinālo celiņu, tiks apturēts arī klonētais celiņš, jo tie koplieto to pašu pamatā esošo mediju avotu.

Audio un video apstrāde

MediaStreamTrack saskarne pati par sevi nenodrošina tiešas metodes audio vai video datu apstrādei. Tomēr, lai to panāktu, varat izmantot citas tīmekļa API, piemēram, Web Audio API un Canvas API.

Audio apstrāde ar Web Audio API

Jūs varat izmantot Web Audio API, lai analizētu un manipulētu ar audio datiem no MediaStreamTrack. Tas ļauj veikt tādus uzdevumus kā audio vizualizācija, trokšņu samazināšana un audio efekti.

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();

Paskaidrojums:

• new AudioContext(): Izveido jaunu Web Audio API kontekstu.
• audioContext.createMediaStreamSource(stream): Izveido audio avota mezglu no MediaStream.
• audioContext.createAnalyser(): Izveido analizatora mezglu, ko var izmantot, lai iegūtu audio datus.
• analyser.fftSize = 2048: Iestata Ātrās Furjē transformācijas (FFT) izmēru, kas nosaka frekvenču joslu skaitu.
• analyser.getByteFrequencyData(dataArray): Aizpilda dataArray ar frekvenču datiem.
• draw() funkcija tiek atkārtoti izsaukta, izmantojot requestAnimationFrame(), lai nepārtraukti atjauninātu audio vizualizāciju.

Video apstrāde ar Canvas API

Jūs varat izmantot Canvas API, lai manipulētu ar video kadriem no MediaStreamTrack. Tas ļauj veikt tādus uzdevumus kā filtru piemērošana, pārklājumu pievienošana un reāllaika video analīze.

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);

Paskaidrojums:

• drawFrame() funkcija tiek atkārtoti izsaukta, izmantojot requestAnimationFrame(), lai nepārtraukti atjauninātu audeklu.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): Uzzīmē pašreizējo video kadru uz audekla.
• ctx.getImageData(0, 0, canvas.width, canvas.height): Iegūst attēla datus no audekla.
• Kods iterē cauri pikseļu datiem un piemēro pelēktoņu filtru.
• ctx.putImageData(imageData, 0, 0): Ievieto modificētos attēla datus atpakaļ uz audekla.

MediaStream celiņu izmantošana ar WebRTC

MediaStreamTrack objekti ir WebRTC (Web Real-Time Communication) pamatā, kas nodrošina reāllaika audio un video saziņu tieši starp pārlūkprogrammām. Jūs varat pievienot MediaStreamTrack objektus WebRTC RTCPeerConnection, lai nosūtītu audio un video datus attālinātam partnerim.

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.

Tas ļauj veidot videokonferenču lietojumprogrammas, tiešraides straumēšanas platformas un citus reāllaika saziņas rīkus.

Pārlūkprogrammu saderība

MediaStreamTrack API plaši atbalsta mūsdienu pārlūkprogrammas, tostarp Chrome, Firefox, Safari un Edge. Tomēr vienmēr ir laba doma pārbaudīt jaunāko pārlūkprogrammu saderības informāciju resursos, piemēram, MDN Web Docs.

Labākās prakses

• Rīkojieties ar atļaujām uzmanīgi: Vienmēr laipni apstrādājiet lietotāju atļaujas piekļuvei kamerai un mikrofonam. Sniedziet skaidrus paskaidrojumus, kāpēc jūsu lietojumprogrammai ir nepieciešama piekļuve šīm ierīcēm.
• Apturiet celiņus, kad tie nav nepieciešami: Atbrīvojiet kameras un mikrofona resursus, apturot celiņus, kad tie vairs netiek izmantoti.
• Optimizējiet ierobežojumus: Izmantojiet ierobežojumus, lai pieprasītu optimālos mediju iestatījumus savai lietojumprogrammai. Izvairieties no pārmērīgi augstas izšķirtspējas vai kadru nomaiņas ātruma pieprasīšanas, ja tas nav nepieciešams.
• Pārraugiet celiņa stāvokli: Klausieties tādus notikumus kā ended un mute, lai reaģētu uz izmaiņām celiņa stāvoklī.
• Testējiet uz dažādām ierīcēm: Pārbaudiet savu lietojumprogrammu uz dažādām ierīcēm un pārlūkprogrammām, lai nodrošinātu saderību.
• Apsveriet pieejamību: Izstrādājiet savu lietojumprogrammu tā, lai tā būtu pieejama lietotājiem ar invaliditāti. Nodrošiniet alternatīvas ievades metodes un pārliecinieties, ka audio un video izvade ir skaidra un saprotama.

Noslēgums

MediaStreamTrack saskarne ir spēcīgs rīks, lai veidotu ar medijiem bagātas tīmekļa lietojumprogrammas. Izprotot, kā izveidot, manipulēt un pārvaldīt mediju celiņus, jūs varat radīt saistošu un interaktīvu pieredzi saviem lietotājiem. Šis visaptverošais ceļvedis ir aptvēris būtiskākos MediaStreamTrack pārvaldības aspektus, sākot no celiņu iegūšanas, izmantojot getUserMedia(), līdz pat progresīvām metodēm, piemēram, audio un video apstrādei. Strādājot ar mediju straumēm, atcerieties par lietotāju privātuma prioritāti un veiktspējas optimizāciju. Turpmāka WebRTC un saistīto tehnoloģiju izpēte ievērojami uzlabos jūsu spējas šajā aizraujošajā tīmekļa izstrādes jomā.