Avastage brauseripõhise MediaStream salvestamise maailma MediaRecorder API abil. Õppige, kuidas jäädvustada heli ja videot otse brauseris, luues rikkalikke veebirakendusi ilma serveripoolsete sõltuvusteta.
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);
});
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. MuutujastreamsisaldabMediaStreamobjekti..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
});
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);
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);
Toetatud MIME-tüübid:
Saadaolevad MIME-tüübid sõltuvad brauserist ja selle toetatud koodekitest. Levinumad MIME-tüübid on:
video/webm;codecs=vp9video/webm;codecs=vp8video/mp4;codecs=avc1audio/webm;codecs=opusaudio/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');
}
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();
Selgitus:
let recordedChunks = [];: Massiiv salvestatud andmeosade hoidmiseks.mediaRecorder.ondataavailable = function(event) { ... }: Seda funktsiooni kutsutakse välja alati, kui uued andmed on saadaval. See lisab andmedrecordedChunksmassiivi.mediaRecorder.onstop = function() { ... }: Seda funktsiooni kutsutakse välja salvestamise peatamisel. See loob kogunenud osadestBlob'i, genereeribBlob'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. Valikulinetimesliceargument määrab intervalli (millisekundites), mille järel tuleksdataavailablesündmus käivitada. Kuitimeslicepole määratud, käivitataksedataavailablesündmus ainult salvestamise peatamisel.stop(): Peatab salvestamise.pause(): Peatab salvestamise ajutiselt.resume(): Jätkab salvestamist.requestData(): Käivitab käsitsidataavailablesü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, sealhulgasgetUserMedia().recorderjs: JavaScripti teek, mis pakubMediaRecorder'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>
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;
}
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
}
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äiksemtimeslice'i intervall toob kaasa sagedasemaiddataavailablesü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.