Frontend MediaStream -nauhoitus: Selainpohjainen mediatallennus

Mahdollisuus tallentaa ääntä ja videota suoraan verkkoselaimessa on mullistanut verkkosovellusten kehityksen. Frontend MediaStream -nauhoitus, joka hyödyntää MediaRecorder API:a, tarjoaa tehokkaan ja suorituskykyisen tavan toteuttaa tämä toiminnallisuus ilman monimutkaista palvelinpuolen käsittelyä. Tämä lähestymistapa mahdollistaa reaaliaikaisen vuorovaikutuksen, pienemmän viiveen ja paremman käyttökokemuksen erityisesti sovelluksissa, kuten verkkokokouksissa, videoeditointityökaluissa ja interaktiivisissa opetusohjelmissa.

MediaStream API:n ymmärtäminen

Selainpohjaisen median tallennuksen ytimessä on MediaStream API. MediaStream edustaa media-datavirtaa, kuten ääni- tai videoraitoja. Päästäksesi käsiksi MediaStream-virtaan käytät tyypillisesti getUserMedia()-metodia.

getUserMedia()-metodi pyytää käyttäjältä lupaa käyttää heidän mikrofoniaan ja/tai kameraansa. Se palauttaa Promise-olion, joka ratkeaa MediaStream-olion kanssa, jos käyttäjä myöntää luvan, tai hylätään virheellä, jos käyttäjä kieltää luvan tai jos pääsyä ei ole saatavilla.

Esimerkki: Kameran käyttöoikeuden pyytäminen

Tässä on perusesimerkki siitä, kuinka pyytää pääsyä käyttäjän kameraan:

            
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
              
            
          

Selitys:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): Tämä rivi pyytää pääsyä kameraan (video: true) ja kytkee äänen pois päältä (audio: false). Voit säätää näitä asetuksia pyytääksesi sekä ääntä että videota tai vain ääntä.
• .then(function(stream) { ... }): Tämä lohko suoritetaan, jos käyttäjä myöntää luvan. stream-muuttuja sisältää MediaStream-olion.
• .catch(function(error) { ... }): Tämä lohko suoritetaan, jos tapahtuu virhe, kuten käyttäjän kieltäessä luvan. On tärkeää käsitellä virheet sulavasti hyvän käyttökokemuksen tarjoamiseksi.

getUserMedia()-metodin asetusvaihtoehdot

getUserMedia()-metodi hyväksyy valinnaisen rajoiteolion (constraints object), jonka avulla voit määrittää halutut mediavirran ominaisuudet. Tähän sisältyy vaihtoehtoja, kuten:

• video: Boolen arvo (true/false) videon pyytämiseksi, tai olio tarkempia videorajoituksia varten (esim. resoluutio, kuvataajuus).
• audio: Boolen arvo (true/false) äänen pyytämiseksi, tai olio tarkempia äänirajoituksia varten (esim. kaiunvaimennus, kohinanvaimennus).
• width: Videovirran haluttu leveys.
• height: Videovirran haluttu korkeus.
• frameRate: Videovirran haluttu kuvataajuus.

Esimerkki: Tietyn kameraresoluution pyytäminen

            
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
              
            
          

Tässä esimerkissä pyydämme videovirtaa, jonka leveys on 640–1920 pikseliä (ihanteellisesti 1280) ja korkeus 480–1080 pikseliä (ihanteellisesti 720). Pyydämme myös ääntä.

Esittelyssä MediaRecorder API

Kun sinulla on MediaStream, voit käyttää MediaRecorder API:a mediatiedon nauhoittamiseen. MediaRecorder API tarjoaa metodeja nauhoituksen aloittamiseen, lopettamiseen, keskeyttämiseen ja jatkamiseen sekä nauhoitetun datan käyttämiseen.

MediaRecorder-instanssin luominen

Luodaksesi MediaRecorder-instanssin, välität MediaStream-olion MediaRecorder-konstruktorille:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

Voit myös määrittää lisäasetuksia konstruktorissa, kuten halutun MIME-tyypin nauhoitetulle datalle:

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

            

              
                Copy
              
            
          

Tuetut MIME-tyypit:

Saatavilla olevat MIME-tyypit riippuvat selaimesta ja sen tukemista koodekeista. Yleisiä MIME-tyyppejä ovat:

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

Voit käyttää MediaRecorder.isTypeSupported()-metodia tarkistaaksesi, tukeeko selain tiettyä MIME-tyyppiä:

            
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
              
            
          

Datan nauhoittaminen MediaRecorderilla

MediaRecorder API tarjoaa useita tapahtumia, joita voit kuunnella seurataksesi nauhoitusprosessia:

• dataavailable: Tämä tapahtuma laukeaa aina, kun dataa on saatavilla tallennettavaksi.
• start: Tämä tapahtuma laukeaa, kun nauhoitus alkaa.
• stop: Tämä tapahtuma laukeaa, kun nauhoitus pysähtyy.
• pause: Tämä tapahtuma laukeaa, kun nauhoitus keskeytetään.
• resume: Tämä tapahtuma laukeaa, kun nauhoitusta jatketaan.
• error: Tämä tapahtuma laukeaa, jos nauhoituksen aikana tapahtuu virhe.

Tärkein tapahtuma on dataavailable. Tämä tapahtuma tarjoaa Blob-olion, joka sisältää nauhoitetun datan. Voit kerätä näitä Blob-olioita ja yhdistää ne sitten yhdeksi Blob-olioksi, kun nauhoitus on valmis.

Esimerkki: Videon nauhoittaminen ja tallentaminen

            
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
              
            
          

Selitys:

• let recordedChunks = [];: Taulukko nauhoitettujen datapalojen tallentamiseen.
• mediaRecorder.ondataavailable = function(event) { ... }: Tämä funktio kutsutaan aina, kun uutta dataa on saatavilla. Se lisää datan recordedChunks-taulukkoon.
• mediaRecorder.onstop = function() { ... }: Tämä funktio kutsutaan, kun nauhoitus pysähtyy. Se luo Blob-olion kerätyistä paloista, generoi URL-osoitteen Blob-oliolle, luo latauslinkin ja käynnistää latauksen. Se myös siivoaa luodun URL-olion pienen viiveen jälkeen.
• mediaRecorder.start();: Tämä aloittaa nauhoitusprosessin.
• mediaRecorder.stop();: Kutsu tätä lopettaaksesi nauhoituksen.

Nauhoitusprosessin hallinta

MediaRecorder API tarjoaa metodeja nauhoitusprosessin hallintaan:

• start(timeslice): Aloittaa nauhoituksen. Valinnainen timeslice-argumentti määrittää aikavälin (millisekunteina), jolla dataavailable-tapahtuma tulisi laukaista. Jos timeslice-arvoa ei anneta, dataavailable-tapahtuma laukeaa vain, kun nauhoitus pysäytetään.
• stop(): Pysäyttää nauhoituksen.
• pause(): Keskeyttää nauhoituksen.
• resume(): Jatkaa nauhoitusta.
• requestData(): Laukaisee manuaalisesti dataavailable-tapahtuman.

Selainyhteensopivuus ja polyfillit

MediaStream- ja MediaRecorder-rajapinnat ovat laajalti tuettuja nykyaikaisissa selaimissa. Vanhemmat selaimet eivät kuitenkaan välttämättä tue näitä rajapintoja natiivisti. Jos sinun on tuettava vanhempia selaimia, voit käyttää polyfillejä tarvittavan toiminnallisuuden tarjoamiseksi.

Saatavilla on useita polyfillejä, mukaan lukien:

• adapter.js: Tämä polyfill tarjoaa selainten välisen yhteensopivuuden WebRTC API:lle, mukaan lukien getUserMedia().
• recorderjs: JavaScript-kirjasto, joka tarjoaa MediaRecorder-toiminnallisuuden selaimille, jotka eivät tue sitä natiivisti.

Käytännön sovellukset ja käyttötapaukset

Frontend MediaStream -nauhoitus avaa laajan valikoiman mahdollisuuksia verkkosovellusten kehittämiseen. Tässä on joitain käytännön sovelluksia ja käyttötapauksia:

• Verkkokokoukset ja videoneuvottelut: Tallenna ja lähetä ääni- ja videovirtoja reaaliaikaisesti verkkokokouksia ja videoneuvotteluita varten.
• Videoeditointityökalut: Salli käyttäjien nauhoittaa ja muokata videosisältöä suoraan selaimessa.
• Interaktiiviset opetusohjelmat ja esittelyt: Luo interaktiivisia opetusohjelmia ja esittelyjä, jotka tallentavat käyttäjän vuorovaikutusta ja antavat henkilökohtaista palautetta.
• Ääninauhoitussovellukset: Rakenna ääninauhoitussovelluksia muistiinpanoja, äänimuistioita ja äänen editointia varten.
• Valvontajärjestelmät ja turvakamerat: Toteuta selainpohjaisia valvontajärjestelmiä ja turvakameroita, jotka tallentavat ja nauhoittavat videovirtoja.
• Saavutettavuustyökalut: Kehitä työkaluja, jotka voivat nauhoittaa puhetta ja muuntaa sen tekstiksi reaaliaikaisesti, tai nauhoittaa näytön toimintaa myöhempää tarkastelua varten.

Esimerkki: Yksinkertaisen videonauhoitussovelluksen toteuttaminen

Tässä on yksinkertaistettu esimerkki siitä, kuinka voit integroida käsitellyt konseptit perusvideonauhoitussovellukseen käyttämällä HTML:ää, CSS:ää 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;

  //Stop all video streams
  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 = []; // Reset array for the next recording
}

            

              
                Copy
              
            
          

Tämä esimerkki demonstroi videon kaappaamisen, näyttämisen, nauhoittamisen ja lataamisen perusperiaatteita suoraan selaimessa. Harkitse virheenkäsittelyn, erilaisten koodekkivaihtoehtojen tai käyttäjän säädettävien nauhoituslaatuasetusten lisäämistä toiminnallisuuden parantamiseksi.

Turvallisuusnäkökohdat

Kun työskentelet MediaStream-nauhoituksen parissa, on tärkeää olla tietoinen turvallisuusnäkökohdista:

• Käyttäjän luvat: Pyydä aina käyttäjältä lupa ennen mikrofonin tai kameran käyttöä. Ilmoita selkeästi, miksi tarvitset pääsyn näihin laitteisiin.
• HTTPS: Käytä HTTPS:ää varmistaaksesi, että mediavirta on salattu ja suojattu salakuuntelulta. getUserMedia()-API vaatii tyypillisesti suojatun kontekstin (HTTPS).
• Datan tallennus: Jos tallennat nauhoitettua dataa, varmista, että se tallennetaan turvallisesti ja suojataan luvattomalta käytöltä. Harkitse salaus- ja pääsynhallintamekanismien käyttöä. Noudata käyttäjiisi ja heidän sijaintiinsa sovellettavia tietosuoja-asetuksia (esim. GDPR, CCPA).
• Yksityisyys: Ole avoin siitä, miten käytät nauhoitettua dataa. Anna käyttäjille hallintamahdollisuus omiin tietoihinsa ja mahdollisuus poistaa ne.
• Haitallinen koodi: Ole varovainen käsitellessäsi käyttäjien luomaa sisältöä, koska se voi sisältää haitallista koodia. Puhdista kaikki käyttäjän syötteet estääksesi sivustojen väliset komentosarjahyökkäykset (XSS).

Suorituskyvyn optimointi

Varmistaaksesi optimaalisen suorituskyvyn MediaStream-nauhoitusta käytettäessä, harkitse seuraavaa:

• MIME-tyypin valinta: Valitse MIME-tyyppi, jota selain tukee ja joka tarjoaa hyvän pakkauksen.
• Timeslice-aikaväli: Säädä timeslice-aikaväliä tasapainottaaksesi datan saatavuutta ja suorituskykyä. Pienempi timeslice-aikaväli johtaa useampiin dataavailable-tapahtumiin, mutta se voi myös lisätä yleiskustannuksia.
• Datan käsittely: Käsittele nauhoitettua dataa tehokkaasti muistivuotojen ja suorituskyvyn pullonkaulojen välttämiseksi. Käytä tekniikoita, kuten puskurointia ja suoratoistoa, suurten tietomäärien käsittelyyn.
• Käyttöliittymä: Suunnittele käyttöliittymä, joka antaa käyttäjälle selkeää palautetta nauhoitusprosessista. Näytä nauhoituksen ilmaisin ja tarjoa säätimet nauhoituksen keskeyttämiseen, jatkamiseen ja lopettamiseen.

Yhteenveto

Frontend MediaStream -nauhoitus antaa verkkokehittäjille mahdollisuuden luoda rikkaita ja interaktiivisia mediakokemuksia suoraan selaimessa. Ymmärtämällä MediaStream- ja MediaRecorder-rajapintoja kehittäjät voivat rakentaa laajan valikoiman sovelluksia verkkokokouksista ja videoeditointityökaluista interaktiivisiin opetusohjelmiin ja valvontajärjestelmiin. Kiinnittämällä huomiota turvallisuus- ja suorituskykynäkökohtiin voit luoda vankkoja ja käyttäjäystävällisiä medianauhoitusratkaisuja, jotka parantavat verkkosovellustesi toiminnallisuutta ja sitouttavuutta.