Corsi on-line

Media Recording con MediaStreamRecorder e la MediaRecorder API

La MediaRecorder API è un’interfaccia per la programmazione utilizzabile con il metodo MediaDevices.getUserMedia() che mette a disposizione una soluzione semplice e completa grazie alla quale effettuare registrazioni dello streaming multimediale riprodotto tramite il dispositivo di un utilizzatore; tali registrazioni potranno essere utilizzate immediatamente in una Web application senza la necessità di ulteriori interventi manuali.

Javascript

MediaStreamRecorder è invece un progetto basato sulla MediaRecorder API finalizzato ad offrire un’alternativa cross browser con la quale eseguire operazioni per l’audio recording, il video recording e la registrazione delle attività che si svolgono sul display di un device (screen recording); MediaStreamRecorder supporta diversi browser per la navigazione su Internet tra cui Chrome, Firefox, Opera e Microsoft Edge.

Si tratta di un’applicazione compatibile anche con il browser in dotazione al sistema operativo mobile Android, MediaStreamRecorder è in grado di registrare soltanto lo streaming video, soltanto lo streaming audio o entrambi, su Firefox si potranno inoltre creare filmati completi di audio sfruttando il formato di compressione Open Source WebM utilizzabile in Web application basate su HTML5.

E’ inoltre supportata la registrazione di audio in formato WAV e del Gif animate (nonché nel già citato WebM che è un progetto implementato dagli sviluppatori di Mountain View) sul browser Web Google Chrome. L’utilizzo è molto semplice e si basa sull’utilizzo di un singolo file JavaScript:

<script src="./node_modules/msr/MediaStreamRecorder.js"> </script>

che portà essere richiamato anche CDN (Content Delivery Network):

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>

Il codice seguente mostra un semplice esempio di registrazione audio/video su Chrome:

<script>
var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

function onMediaSuccess(stream) {
    var multiStreamRecorder = new MultiStreamRecorder(stream);
    multiStreamRecorder.video = yourVideoElement; 
    multiStreamRecorder.audioChannels = 1;
    multiStreamRecorder.ondataavailable = function (blobs) {
        // ...
        // ...
    };
    multiStreamRecorder.start(3 * 1000);
}

function onMediaError(e) {
    console.error('Errore', e);
}
</script>

Sarà possibile effettuare l’upload dei file contenenti gli streaming registrati utilizzando JavaScript o una soluzione client side come per esempio PHP.

Via MediaStreamRecorder

Post correlati
I più letti del mese
Tematiche