Frontend MediaStream salvestamine: brauseripõhine meedia jäädvustamine

Võimalus jäädvustada heli ja videot otse veebibrauseris on veebirakenduste arenduses revolutsiooni teinud. Frontend MediaStream salvestamine, kasutades MediaRecorder API-t, pakub võimsat ja tõhusat viisi selle funktsionaalsuse rakendamiseks ilma keerukale serveripoolsele töötlemisele tuginemata. See lähenemine võimaldab reaalajas suhtlust, vähendatud latentsust ja paremat kasutajakogemust, eriti sellistes rakendustes nagu veebikoosolekud, videotöötlustööriistad ja interaktiivsed õpetused.

MediaStream API mõistmine

Brauseripõhise meedia jäädvustamise keskmes on MediaStream API. MediaStream esindab meediaandmete voogu, näiteks heli- või videoradu. MediaStream'ile juurdepääsemiseks kasutatakse tavaliselt getUserMedia() meetodit.

Meetod getUserMedia() küsib kasutajalt luba oma mikrofoni ja/või kaamera kasutamiseks. See tagastab Promise'i, mis laheneb MediaStream objektiga, kui kasutaja annab loa, või lükatakse veaga tagasi, kui kasutaja keeldub loast või kui juurdepääs pole saadaval.

Näide: kaamerale juurdepääsu küsimine

Siin on lihtne näide, kuidas küsida kasutaja kaamerale juurdepääsu:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Stream is available, do something with it
    console.log("Camera access granted!");
  })
  .catch(function(error) {
    console.error("Error accessing camera: ", error);
  });

            

              
                Copy
              
            
          

Selgitus:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): See rida küsib juurdepääsu kaamerale (video: true) ja keelab selgesõnaliselt heli (audio: false). Saate neid valikuid kohandada, et küsida nii heli kui ka videot või ainult heli.
• .then(function(stream) { ... }): See plokk käivitatakse, kui kasutaja annab loa. Muutuja stream sisaldab MediaStream objekti.
• .catch(function(error) { ... }): See plokk käivitatakse vea ilmnemisel, näiteks kui kasutaja keeldub loast. Hea kasutajakogemuse pakkumiseks on oluline vigu korrektselt käsitleda.

getUserMedia() seadistusvalikud

Meetod getUserMedia() aktsepteerib valikulist piirangute objekti, mis võimaldab teil määrata meediavoo soovitud omadused. See hõlmab selliseid valikuid nagu:

• video: Boole'i väärtus (true/false) video küsimiseks või objekt täpsemate videopiirangute jaoks (nt eraldusvõime, kaadrisagedus).
• audio: Boole'i väärtus (true/false) heli küsimiseks või objekt täpsemate helipiirangute jaoks (nt kaja summutamine, müra summutamine).
• width: Video voo soovitud laius.
• height: Video voo soovitud kõrgus.
• frameRate: Video voo soovitud kaadrisagedus.

Näide: kindla kaamera eraldusvõime küsimine

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Stream is available
})
.catch(function(error) {
  // Handle errors
});

            

              
                Copy
              
            
          

Selles näites küsime videovoogu laiusega vahemikus 640 kuni 1920 pikslit (ideaalis 1280) ja kõrgusega vahemikus 480 kuni 1080 pikslit (ideaalis 720). Küsime ka heli.

MediaRecorder API tutvustus

Kui teil on MediaStream, saate meediaandmete salvestamiseks kasutada MediaRecorder API-t. MediaRecorder API pakub meetodeid salvestamise alustamiseks, peatamiseks, peatamiseks ja jätkamiseks ning salvestatud andmetele juurdepääsuks.

MediaRecorder instantsi loomine

MediaRecorder'i instantsi loomiseks edastate MediaStream'i objekti MediaRecorder'i konstruktorile:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

Konstruktoris saate määrata ka lisavalikuid, näiteks salvestatud andmete soovitud MIME-tüübi:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

Toetatud MIME-tüübid:

Saadaolevad MIME-tüübid sõltuvad brauserist ja selle toetatud koodekitest. Levinumad MIME-tüübid on:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

Saate kasutada meetodit MediaRecorder.isTypeSupported(), et kontrollida, kas brauser toetab konkreetset MIME-tüüpi:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 is supported');
} else {
  console.log('video/webm;codecs=vp9 is not supported');
}

            

              
                Copy
              
            
          

Andmete salvestamine MediaRecorderiga

MediaRecorder API pakub mitmeid sündmusi, mida saate salvestusprotsessi jälgimiseks kuulata:

• dataavailable: See sündmus käivitatakse alati, kui andmed on salvestamiseks saadaval.
• start: See sündmus käivitatakse salvestamise alustamisel.
• stop: See sündmus käivitatakse salvestamise peatamisel.
• pause: See sündmus käivitatakse salvestamise peatamisel.
• resume: See sündmus käivitatakse salvestamise jätkamisel.
• error: See sündmus käivitatakse, kui salvestamise ajal ilmneb viga.

Kõige olulisem sündmus on dataavailable. See sündmus pakub Blob-objekti, mis sisaldab salvestatud andmeid. Saate neid Blob-objekte koguda ja seejärel salvestamise lõppedes need üheks Blob'iks ühendada.

Näide: video salvestamine ja talletamine

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('data-available: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Recording stopped!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Recording started!");

// To stop recording:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

Selgitus:

• let recordedChunks = [];: Massiiv salvestatud andmeosade hoidmiseks.
• mediaRecorder.ondataavailable = function(event) { ... }: Seda funktsiooni kutsutakse välja alati, kui uued andmed on saadaval. See lisab andmed recordedChunks massiivi.
• mediaRecorder.onstop = function() { ... }: Seda funktsiooni kutsutakse välja salvestamise peatamisel. See loob kogunenud osadest Blob'i, genereerib Blob'i jaoks URL-i, loob allalaadimislingi ja käivitab allalaadimise. See puhastab ka loodud URL-objekti lühikese viivituse järel.
• mediaRecorder.start();: See alustab salvestusprotsessi.
• mediaRecorder.stop();: Kutsuge see välja salvestamise peatamiseks.

Salvestusprotsessi juhtimine

MediaRecorder API pakub meetodeid salvestusprotsessi juhtimiseks:

• start(timeslice): Alustab salvestamist. Valikuline timeslice argument määrab intervalli (millisekundites), mille järel tuleks dataavailable sündmus käivitada. Kui timeslice pole määratud, käivitatakse dataavailable sündmus ainult salvestamise peatamisel.
• stop(): Peatab salvestamise.
• pause(): Peatab salvestamise ajutiselt.
• resume(): Jätkab salvestamist.
• requestData(): Käivitab käsitsi dataavailable sündmuse.

Brauserite ühilduvus ja polüfillid

MediaStream ja MediaRecorder API-d on kaasaegsetes brauserites laialdaselt toetatud. Vanemad brauserid ei pruugi neid API-sid aga loomulikult toetada. Kui peate toetama vanemaid brausereid, saate vajaliku funktsionaalsuse pakkumiseks kasutada polüfille.

Saadaval on mitu polüfilli, sealhulgas:

• adapter.js: See polüfill pakub brauseriteülest ühilduvust WebRTC API-de jaoks, sealhulgas getUserMedia().
• recorderjs: JavaScripti teek, mis pakub MediaRecorder'i funktsionaalsust brauseritele, mis seda loomulikult ei toeta.

Praktilised rakendused ja kasutusjuhud

Frontend MediaStream salvestamine avab veebirakenduste arendamiseks laia valiku võimalusi. Siin on mõned praktilised rakendused ja kasutusjuhud:

• Veebikoosolekud ja videokonverentsid: Jäädvustage ja edastage heli- ja videovooge reaalajas veebikoosolekute ja videokonverentside jaoks.
• Videotöötlustööriistad: Võimaldage kasutajatel salvestada ja redigeerida videosisu otse brauseris.
• Interaktiivsed õpetused ja demonstratsioonid: Looge interaktiivseid õpetusi ja demonstratsioone, mis jäädvustavad kasutajate interaktsioone ja pakuvad isikupärastatud tagasisidet.
• Häälsalvestusrakendused: Looge häälsalvestusrakendusi märkmete tegemiseks, häälmemode jaoks ja helitöötluseks.
• Jälgimissüsteemid ja turvakaamerad: Rakendage brauseripõhiseid jälgimissüsteeme ja turvakaameraid, mis jäädvustavad ja salvestavad videovooge.
• Juurdepääsetavuse tööriistad: Arendage tööriistu, mis suudavad salvestada kõnet ja teisendada selle reaalajas tekstiks või salvestada ekraanitegevust hilisemaks ülevaatamiseks.

Näide: lihtsa videosalvestusrakenduse loomine

Siin on lihtsustatud näide, kuidas saate arutatud kontseptsioone integreerida põhilisse videosalvestusrakendusse, kasutades HTML-i, CSS-i ja JavaScripti:

HTML (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Browser Video Recorder</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Browser Video Recorder</h1>
  <video id="preview" autoplay muted></video><br>
  <button id="recordButton">Record</button>
  <button id="stopButton" disabled>Stop</button>
  <script src="script.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Error accessing media devices.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  //Peata kõik videovood
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Lähtesta massiiv järgmise salvestuse jaoks
}

            

              
                Copy
              
            
          

See näide demonstreerib video jäädvustamise, kuvamise, salvestamise ja allalaadimise põhiprintsiipe otse brauseris. Funktsionaalsuse parandamiseks kaaluge veakäsitluse, erinevate koodekivalikute või kasutaja poolt reguleeritavate salvestuskvaliteetide lisamist.

Turvakaalutlused

MediaStream salvestamisega töötades on oluline olla teadlik turvakaalutlustest:

• Kasutaja load: Küsige alati kasutaja luba enne mikrofoni või kaamera kasutamist. Näidake selgelt, miks teil on vaja neile seadmetele juurdepääsu.
• HTTPS: Kasutage HTTPS-i, et tagada meediavoo krüpteerimine ja kaitse pealtkuulamise eest. getUserMedia() API nõuab tavaliselt turvalist konteksti (HTTPS).
• Andmete säilitamine: Kui salvestate salvestatud andmeid, veenduge, et neid säilitatakse turvaliselt ja kaitstakse volitamata juurdepääsu eest. Kaaluge krüptimise ja juurdepääsukontrolli mehhanismide kasutamist. Järgige oma kasutajate ja nende asukoha suhtes kohaldatavaid andmekaitsemäärusi (nt GDPR, CCPA).
• Privaatsus: Olge läbipaistev, kuidas te salvestatud andmeid kasutate. Andke kasutajatele kontroll oma andmete üle ja võimalus neid kustutada.
• Pahatahtlik kood: Olge kasutajate loodud sisu käsitlemisel ettevaatlik, kuna see võib sisaldada pahatahtlikku koodi. Puhastage igasugune kasutaja sisend, et vältida saidiüleste skriptimiste (XSS) rünnakuid.

Jõudluse optimeerimine

MediaStream salvestamise kasutamisel optimaalse jõudluse tagamiseks kaaluge järgmist:

• MIME-tüübi valik: Valige MIME-tüüp, mida brauser toetab ja mis pakub head tihendust.
• Timeslice'i intervall: Reguleerige timeslice'i intervalli, et tasakaalustada andmete kättesaadavust ja jõudlust. Väiksem timeslice'i intervall toob kaasa sagedasemaid dataavailable sündmusi, kuid see võib ka suurendada lisakoormust.
• Andmekäitlus: Käsitsege salvestatud andmeid tõhusalt, et vältida mälulekkeid ja jõudluse kitsaskohti. Kasutage suurte andmemahtude töötlemiseks selliseid tehnikaid nagu puhverdamine ja voogesitus.
• Kasutajaliides: Kujundage kasutajaliides, mis annab kasutajale selget tagasisidet salvestusprotsessi kohta. Kuvage salvestusindikaator ja pakkuge juhtnuppe salvestamise peatamiseks, jätkamiseks ja lõpetamiseks.

Kokkuvõte

Frontend MediaStream salvestamine annab veebiarendajatele võimaluse luua rikkalikke ja interaktiivseid meediakogemusi otse brauseris. Mõistes MediaStream'i ja MediaRecorder'i API-sid, saavad arendajad luua laia valikut rakendusi, alates veebikoosolekutest ja videotöötlustööriistadest kuni interaktiivsete õpetuste ja jälgimissüsteemideni. Turvalisuse ja jõudluse kaalutlustele tähelepanu pöörates saate luua tugevaid ja kasutajasõbralikke meediasalvestuslahendusi, mis parandavad teie veebirakenduste funktsionaalsust ja kaasatust.