Frontend MediaStream ierakstīšana: pārlūkprogrammas mediju tveršana

Spēja tvert audio un video tieši tīmekļa pārlūkprogrammā ir revolucionizējusi tīmekļa lietotņu izstrādi. Frontend MediaStream ierakstīšana, izmantojot MediaRecorder API, nodrošina jaudīgu un efektīvu veidu, kā ieviest šo funkcionalitāti, nepaļaujoties uz sarežģītu servera puses apstrādi. Šī pieeja nodrošina reāllaika mijiedarbību, samazinātu latentumu un uzlabotu lietotāja pieredzi, īpaši tādās lietotnēs kā tiešsaistes sanāksmes, video rediģēšanas rīki un interaktīvas pamācības.

Izpratne par MediaStream API

Pārlūkprogrammas mediju tveršanas pamatā ir MediaStream API. MediaStream attēlo mediju datu plūsmu, piemēram, audio vai video celiņus. Lai piekļūtu MediaStream, parasti tiek izmantota getUserMedia() metode.

getUserMedia() metode pieprasa lietotājam atļauju piekļūt mikrofonam un/vai kamerai. Tā atgriež Promise, kas tiek izpildīts ar MediaStream objektu, ja lietotājs piešķir atļauju, vai noraidīts ar kļūdu, ja lietotājs liedz atļauju vai piekļuve nav pieejama.

Piemērs: Kameras piekļuves pieprasīšana

Šeit ir pamata piemērs, kā pieprasīt piekļuvi lietotāja kamerai:

            
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
              
            
          

Paskaidrojums:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): Šī rinda pieprasa piekļuvi kamerai (video: true) un skaidri atspējo audio (audio: false). Jūs varat pielāgot šos iestatījumus, lai pieprasītu gan audio, gan video, vai tikai audio.
• .then(function(stream) { ... }): Šis bloks tiek izpildīts, ja lietotājs piešķir atļauju. stream mainīgais satur MediaStream objektu.
• .catch(function(error) { ... }): Šis bloks tiek izpildīts, ja rodas kļūda, piemēram, lietotājs liedz atļauju. Ir svarīgi korekti apstrādāt kļūdas, lai nodrošinātu labu lietotāja pieredzi.

getUserMedia() konfigurācijas opcijas

getUserMedia() metode pieņem izvēles ierobežojumu objektu, kas ļauj norādīt vēlamās mediju plūsmas īpašības. Tas ietver tādas opcijas kā:

• video: Būla vērtība (true/false), lai pieprasītu video, vai objekts specifiskākiem video ierobežojumiem (piem., izšķirtspēja, kadru ātrums).
• audio: Būla vērtība (true/false), lai pieprasītu audio, vai objekts specifiskākiem audio ierobežojumiem (piem., atbalss slāpēšana, trokšņu slāpēšana).
• width: Vēlamais video plūsmas platums.
• height: Vēlamais video plūsmas augstums.
• frameRate: Vēlamais video plūsmas kadru ātrums.

Piemērs: Specifiskas kameras izšķirtspējas pieprasīšana

            
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
              
            
          

Šajā piemērā mēs pieprasām video plūsmu ar platumu no 640 līdz 1920 pikseļiem (ideāli 1280) un augstumu no 480 līdz 1080 pikseļiem (ideāli 720). Mēs arī pieprasām audio.

Iepazīstinām ar MediaRecorder API

Kad jums ir MediaStream, varat izmantot MediaRecorder API, lai ierakstītu mediju datus. MediaRecorder API nodrošina metodes ierakstīšanas sākšanai, apturēšanai, pauzēšanai un atsākšanai, kā arī piekļuvei ierakstītajiem datiem.

MediaRecorder instances izveide

Lai izveidotu MediaRecorder instanci, jūs nododat MediaStream objektu MediaRecorder konstruktoram:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

Jūs varat arī norādīt papildu opcijas konstruktorā, piemēram, vēlamo MIME tipu ierakstītajiem datiem:

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

            

              
                Copy
              
            
          

Atbalstītie MIME tipi:

Pieejamie MIME tipi ir atkarīgi no pārlūkprogrammas un tās atbalstītajiem kodekiem. Biežākie MIME tipi ietver:

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

Jūs varat izmantot MediaRecorder.isTypeSupported() metodi, lai pārbaudītu, vai pārlūkprogramma atbalsta konkrētu MIME tipu:

            
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
              
            
          

Datu ierakstīšana ar MediaRecorder

MediaRecorder API nodrošina vairākus notikumus, kurus varat klausīties, lai uzraudzītu ierakstīšanas procesu:

• dataavailable: Šis notikums tiek aktivizēts, kad dati ir pieejami saglabāšanai.
• start: Šis notikums tiek aktivizēts, kad sākas ierakstīšana.
• stop: Šis notikums tiek aktivizēts, kad ierakstīšana tiek pārtraukta.
• pause: Šis notikums tiek aktivizēts, kad ierakstīšana tiek pauzēta.
• resume: Šis notikums tiek aktivizēts, kad ierakstīšana tiek atsākta.
• error: Šis notikums tiek aktivizēts, ja ierakstīšanas laikā rodas kļūda.

Svarīgākais notikums ir dataavailable. Šis notikums nodrošina Blob objektu, kas satur ierakstītos datus. Jūs varat uzkrāt šos Blob objektus un pēc tam apvienot tos vienā Blob, kad ierakstīšana ir pabeigta.

Piemērs: Video ierakstīšana un saglabāšana

            
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
              
            
          

Paskaidrojums:

• let recordedChunks = [];: Masīvs, kurā glabāt ierakstīto datu daļas.
• mediaRecorder.ondataavailable = function(event) { ... }: Šī funkcija tiek izsaukta ikreiz, kad ir pieejami jauni dati. Tā pievieno datus recordedChunks masīvam.
• mediaRecorder.onstop = function() { ... }: Šī funkcija tiek izsaukta, kad ierakstīšana tiek pārtraukta. Tā izveido Blob no uzkrātajām daļām, ģenerē URL šim Blob, izveido lejupielādes saiti un ierosina lejupielādi. Tā arī pēc īsa brīža attīra izveidoto URL objektu.
• mediaRecorder.start();: Sāk ierakstīšanas procesu.
• mediaRecorder.stop();: Izsauciet šo, lai apturētu ierakstīšanu.

Ierakstīšanas procesa kontrole

MediaRecorder API nodrošina metodes ierakstīšanas procesa kontrolei:

• start(timeslice): Sāk ierakstīšanu. Izvēles timeslice arguments norāda intervālu (milisekundēs), kurā jāaktivizē dataavailable notikums. Ja timeslice nav norādīts, dataavailable notikums tiek aktivizēts tikai tad, kad ierakstīšana tiek pārtraukta.
• stop(): Pārtrauc ierakstīšanu.
• pause(): Pauzē ierakstīšanu.
• resume(): Atsāk ierakstīšanu.
• requestData(): Manuāli ierosina dataavailable notikumu.

Pārlūkprogrammu saderība un polifili

MediaStream un MediaRecorder API ir plaši atbalstītas modernās pārlūkprogrammās. Tomēr vecākas pārlūkprogrammas var neatbalstīt šīs API dabiski. Ja jums ir nepieciešams atbalstīt vecākas pārlūkprogrammas, varat izmantot polifilus, lai nodrošinātu nepieciešamo funkcionalitāti.

Ir pieejami vairāki polifili, tostarp:

• adapter.js: Šis polifils nodrošina starppārlūku saderību WebRTC API, ieskaitot getUserMedia().
• recorderjs: JavaScript bibliotēka, kas nodrošina MediaRecorder funkcionalitāti pārlūkprogrammām, kuras to dabiski neatbalsta.

Praktiskie pielietojumi un lietošanas gadījumi

Frontend MediaStream ierakstīšana paver plašu iespēju klāstu tīmekļa lietotņu izstrādei. Šeit ir daži praktiski pielietojumi un lietošanas gadījumi:

• Tiešsaistes sanāksmes un video konferences: Tveriet un pārraidiet audio un video plūsmas reāllaikā tiešsaistes sanāksmēm un video konferencēm.
• Video rediģēšanas rīki: Ļaujiet lietotājiem ierakstīt un rediģēt video saturu tieši pārlūkprogrammā.
• Interaktīvas pamācības un demonstrācijas: Izveidojiet interaktīvas pamācības un demonstrācijas, kas tver lietotāju mijiedarbību un sniedz personalizētu atgriezenisko saiti.
• Balss ierakstīšanas lietotnes: Izveidojiet balss ierakstīšanas lietotnes piezīmju veikšanai, balss piezīmēm un audio rediģēšanai.
• Novērošanas sistēmas un drošības kameras: Ieviesiet pārlūkprogrammā balstītas novērošanas sistēmas un drošības kameras, kas tver un ieraksta video plūsmas.
• Pieejamības rīki: Izstrādājiet rīkus, kas var ierakstīt runu un pārvērst to tekstā reāllaikā, vai ierakstīt ekrāna darbību vēlākai pārskatīšanai.

Piemērs: Vienkāršas video ierakstīšanas lietotnes ieviešana

Šeit ir vienkāršots piemērs, kā jūs varat integrēt apspriestos jēdzienus pamata video ierakstīšanas lietotnē, izmantojot HTML, CSS un JavaScript:

HTML (index.html):

            



  
  


  
Browser Video Recorder
  

  Record
  Stop
  



            

              
                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
              
            
          

Šis piemērs demonstrē video tveršanas, attēlošanas, ierakstīšanas un lejupielādes pamatprincipus tieši pārlūkprogrammā. Apsveriet iespēju pievienot kļūdu apstrādi, dažādas kodeku opcijas vai lietotāja pielāgojamas ierakstīšanas kvalitātes, lai uzlabotu funkcionalitāti.

Drošības apsvērumi

Strādājot ar MediaStream ierakstīšanu, ir svarīgi apzināties drošības apsvērumus:

• Lietotāja atļaujas: Vienmēr pieprasiet lietotāja atļauju pirms piekļuves mikrofonam vai kamerai. Skaidri norādiet, kāpēc jums ir nepieciešama piekļuve šīm ierīcēm.
• HTTPS: Izmantojiet HTTPS, lai nodrošinātu, ka mediju plūsma ir šifrēta un aizsargāta no noklausīšanās. getUserMedia() API parasti prasa drošu kontekstu (HTTPS).
• Datu glabāšana: Ja jūs glabājat ierakstītos datus, nodrošiniet, ka tie tiek glabāti droši un aizsargāti no neatļautas piekļuves. Apsveriet šifrēšanas un piekļuves kontroles mehānismu izmantošanu. Ievērojiet datu privātuma noteikumus, kas attiecas uz jūsu lietotājiem un viņu atrašanās vietu (piem., GDPR, CCPA).
• Privātums: Esiet caurspīdīgi par to, kā jūs izmantojat ierakstītos datus. Nodrošiniet lietotājiem kontroli pār saviem datiem un iespēju tos dzēst.
• Ļaunprātīgs kods: Esiet piesardzīgi, apstrādājot lietotāju radītu saturu, jo tas var saturēt ļaunprātīgu kodu. Sanitizējiet jebkuru lietotāja ievadi, lai novērstu starpvietņu skriptēšanas (XSS) uzbrukumus.

Veiktspējas optimizācija

Lai nodrošinātu optimālu veiktspēju, izmantojot MediaStream ierakstīšanu, apsveriet sekojošo:

• MIME tipa izvēle: Izvēlieties MIME tipu, ko atbalsta pārlūkprogramma un kas nodrošina labu kompresiju.
• Timeslice intervāls: Pielāgojiet timeslice intervālu, lai līdzsvarotu datu pieejamību un veiktspēju. Mazāks timeslice intervāls radīs biežākus dataavailable notikumus, bet tas var arī palielināt pieskaitāmās izmaksas.
• Datu apstrāde: Efektīvi apstrādājiet ierakstītos datus, lai izvairītos no atmiņas noplūdēm un veiktspējas problēmām. Izmantojiet tādas metodes kā buferizācija un straumēšana, lai apstrādātu lielus datu apjomus.
• Lietotāja saskarne: Izveidojiet lietotāja saskarni, kas sniedz skaidru atgriezenisko saiti lietotājam par ierakstīšanas procesu. Parādiet ierakstīšanas indikatoru un nodrošiniet kontroles pogas ierakstīšanas pauzēšanai, atsākšanai un apturēšanai.

Noslēgums

Frontend MediaStream ierakstīšana dod iespēju tīmekļa izstrādātājiem radīt bagātīgas un interaktīvas mediju pieredzes tieši pārlūkprogrammā. Izprotot MediaStream un MediaRecorder API, izstrādātāji var veidot plašu lietotņu klāstu, sākot no tiešsaistes sanāksmēm un video rediģēšanas rīkiem līdz interaktīvām pamācībām un novērošanas sistēmām. Pievēršot uzmanību drošības un veiktspējas apsvērumiem, jūs varat izveidot robustus un lietotājam draudzīgus mediju ierakstīšanas risinājumus, kas uzlabo jūsu tīmekļa lietotņu funkcionalitāti un iesaisti.