Mediarecorder: video & audio

1. De class linken 

Voeg een script-tag toe om de class te linken aan je pagina:

<script src="https://www.leerschool.be/smarticles/system/crowl.mediarecorder.js?v5"></script>

2. Initialisatie van de Class 

Voordat je de CrowlMediaRecorder class kunt gebruiken, moet je deze initialiseren. Dit doe je door een instantie van de class te maken en opties door te geven.


// Voorbeeld: Initialisatie met opties
const mediaRecorder = new CrowlMediaRecorder({
    audio: true, // Schakel audio-opname in
    video: true, // Schakel video-opname in (false voor alleen audio)
    containerId: 'media-container' // Het element waar de media-elementen worden toegevoegd
});

3. Starten van de Opname

Om een opname te starten, roep je de startRecording() methode aan. Deze zal de gebruiker om toegang vragen tot de media-apparaten (microfoon/camera), en de opname starten.


// Start de opname
mediaRecorder.startRecording();

4. Stoppen van de Opname

Je kunt de opname stoppen met de stopRecording() methode. Deze retourneert een Blob met de opgenomen data, die je kunt gebruiken om de opname op te slaan of af te spelen.


// Stop de opname en verkrijg de Blob met de data
mediaRecorder.stopRecording().then((recording) => {
    console.log('Opname voltooid', recording);
});

5. Downloaden van de Opname

Je kunt de opname eenvoudig downloaden met de downloadRecording() methode. Dit maakt een downloadlink aan voor de gebruiker.


// Download de opname
mediaRecorder.downloadRecording();

6. Pauzeren en Hervatten van de Opname

Als je de opname tijdelijk wilt pauzeren, gebruik je de pauseRecording() methode. Om daarna weer verder te gaan, roep je resumeRecording() aan.


// Pauzeer de opname
mediaRecorder.pauseRecording();

// Hervat de opname
mediaRecorder.resumeRecording();

7. Recorder Verwijderen

Om de recorder en alle bijbehorende elementen te verwijderen, gebruik je de removeRecorder() methode. Dit stopt ook alle actieve streams en maakt de resources vrij.


// Verwijder de recorder en maak de resources vrij
mediaRecorder.removeRecorder();

8. Opnameformaat Detecteren

De CrowlMediaRecorder class detecteert automatisch het juiste opnameformaat op basis van de gebruikte browser. Standaard wordt WebM gebruikt voor Chrome en Firefox, en MP4 voor Safari.


// Formaat wordt automatisch bepaald door de detectFormat() methode
console.log('Opnameformaat:', mediaRecorder.fileExtension);

9. Conclusie

De CrowlMediaRecorderclass biedt een eenvoudige interface voor het opnemen van audio en video in de browser. Door de ingebouwde methoden voor het starten, pauzeren, stoppen en downloaden van opnames, kun je deze class gemakkelijk integreren in je project.

10. Demo en download

Test het uit: https://www.leerschool.be/test/recorder.html
Download het voorbeeld. https://www.leerschool.be/dl2.php?f=recorder.html

Volgende pagina