HTML5 getUserMedia registra webcam, sia audio che video

È ansible utilizzare Chrome per acquisire video (webcam) e audio (microfono) dal browser e salvare il stream come file video?

Mi piacerebbe usarlo per creare un’applicazione video / photobooth che consente agli utenti di registrare un semplice messaggio (30 secondi) (sia video che audio) su file che possono essere successivamente visualizzati.

Ho letto la documentazione ma non ho (ancora) visto alcun esempio su come acquisire sia audio che video, inoltre non ho trovato il modo di archiviare i risultati in un file video.

Chi può aiutare?

MediaStreamRecorder è un’API WebRTC per la registrazione di stream getUserMedia () (ancora in fase di implementazione). Consente alle app Web di creare un file da una sessione audio / video live.

 

http://www.w3.org/TR/mediastream-recording/

Per quanto ne so, non esiste un modo per registrare audio e video insieme e salvarli come un unico file. è ansible acquisire e salvare l’audio come file wav e il video come file webm.

ecco un ottimo post su come salvare il tuo video; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

e una utilmente utilità per salvare l’audio

https://github.com/mattdiamond/Recorderjs

Esistono attualmente diverse soluzioni pronte per la produzione per la registrazione di audio e video sul web.

Browser desktop

API MediaRecorder (HTML)

L’API MediaRecorder (MediaStream Recorder) si basa su getUserMedia() per l’accesso alla webcam ed è supportata da Firefox 30+ e Chrome 49+ .

Flash client + media server rtmp

Avrai bisogno di un’applicazione Flash (.swf) che è incorporata nella tua pagina web, cattura la webcam e il microfono dei visitatori, codifica i dati video e audio grezzi (usando i codec integrati: H.264, Spark, Nellymoser ASAO e Speex) e i flussi i dati così come sono registrati (tramite rtmp) su un media server.

Poiché i dati vengono trasmessi in streaming, non appena si interrompe la registrazione, tutti i dati sono già presenti sul supporto multimediale (senza tempi di caricamento). Un altro vantaggio è che il video non viene perso se il computer client si arresta in modo anomalo.

Hai almeno 3 opzioni per il media server:

  1. Red5 è gratuito e open source (ho personalmente contribuito con le patch di codice al processo di registrazione e posso garantire che funzioni bene)
  2. Wowza ($ 65 / mese)
  3. Adobe Media Server Pro ($ 4500)

Il server multimediale riceve (sempre tramite streaming / rtmp non tramite http) i dati e, a seconda del codec utilizzato sul client e del media server utilizzato, i dati audio e video sono multiplati in file mp4, flv o f4v.

Questo processo di registrazione di Flash client + server multimediale – che ha funzionato abbastanza bene da Flash Player 6 nel 2002.

Browser per dispositivi mobili

HTML Media Capture

È ansible utilizzare HTML Media Capture ( spiegato qui con schermate ) per registrare video utilizzando l’app di registrazione video e i codec nativi del dispositivo. HTML Media Cattura i record localmente (sul dispositivo) e poi carica (normale processo di upload HTTP) il file sul server web.

Quando si utilizza HTML Media Capture in Safari su dispositivi iOS come l’iPhone, verrà creato un file .mov non riproducibile su Android . La soluzione è convertirlo in .mp4 lato server usando FFmpeg.

Quando si utilizza HTML Media Capture nel browser Android, il risultato finale sarà un file .mp4 riproducibile su iPhone. Alcuni telefoni Android meno recenti creeranno file .3gp.

Una soluzione commerciale che implementa entrambi (client Flash + media server su desktop e HTML Media Capture su dispositivi mobili) è HDFVR .

Questo è il mio repository Github che fornisce una libreria per registrare audio + video e infine caricare il contenuto sul server come blocchi

  1. Questo supporta Chrome, Opera
  2. Il tempo di caricamento è ridotto, poiché i BLOB vengono tagliati e caricati

Html_Audio_Video_Recorder

Utilizza il seguente:

  \\ Snapshot  \\ Video  \\ Audio 

Quindi considera il modulo come un file normale nel tuo php