Registrare video e audio e caricare sul server

Question

Desidero aggiungere funzionalità di registrazione video al sito Web. Ho cercato e provato ogni possibile soluzione disponibile, ma ancora non funziona ancora bene.
Ho cercato di sotto di soluzione

• WebRTC
  So utilizzando WebRTC possiamo ottenere il flusso dal webcam e il microfono. Ho trovato un sacco di articoli sullo stesso ma nessuno di loro ha spiegato come estrarre il blob da quel flusso e salvarlo o caricarlo sul server. Che cosa ho ottenuto è fino a ottenere userMediaStream e mostrarlo in del browser con la creazione di blob URL oggetto
  

  navigator.getUserMedia = navigator.getUserMedia || 
           navigator.webkitGetUserMedia || 
           navigator.mozGetUserMedia || 
           navigator.msGetUserMedia; 
  
  var video = document.querySelector('video'); 
  
  if (navigator.getUserMedia) { 
      navigator.getUserMedia({audio: true, video: true}, function(stream) { 
      video.src = window.URL.createObjectURL(stream); 
  }, errorCallback); 
  } else { 
      video.src = 'somevideo.webm'; // fallback. 
  } 
  

  Come estrarre oggetti da questo flusso in modo da poter salvare o caricare sul server?

• RecorRTC
  RecordRTC è una libreria scritta da Mauz Khan per la registrazione video/video, che in realtà è buona. Usando questa libreria sono in grado di registrare il video e l'audio, Ma c'è qualche problema con questo, come di seguito

  • in Chrome sto ottenendo due Blob oggetto uno per l'audio e uno per il video, al fine di generare file finale è necessario unire i file nel file video finale. Sto usando FFMPEG per convertire e unire i file su sever.
  • Funziona bene con video brevi, anche se richiede molto tempo per convertire i file sul server, ma il problema inizia con i file di registrazione lunghi. Io sono sempre Array memory out of exception per la registrazione di più di 4 min e quando la dimensione del blob superi 10 MB

• MediaStreamRecorder
  Questa è un'altra libreria Mauz Khan che dà blob registrata dopo intervallo di tempo specifico. Ho pensato che questo risolva il mio problema di eccezione di memoria. Così ho implementato come qui sotto

  • Prendere blob pezzo su intervallo e post al server

  • Converti blob pezzo in file video piccola usando FFMPEG

  • Alla fine unire tutti i piccoli file in finale utilizzando FFMPEG file video completo

  • Problema con questo è quando piccolo pezzo di blob salvato in un piccolo file video sembra che stia iniziando il byte del file danneggiato in modo che venga impiccato al momento di ogni piccolo file di partenza e dopo la fusione di tutti i file in video completato finale, il video viene appendere e c'e 'trrrrrr' suono rumore dopo ogni intervallo
  • anche iniziare il video appeso per lungo video

Ora sto pensando di registrare video usando puro javascript WebRTC UserMedia API ma ora sono davvero scioccato perché non c'è nemmeno un singolo articolo che spieghi How to record video with audio and upload to server. Ogni articolo o risposta che mostra solo get UserMedia and show stream in video tag come codice mostra nell'esempio sopra. Passo già molto tempo su questo. si prega di suggerire qualsiasi soluzione. Andrà bene anche se c'è qualche biblioteca o servizio a pagamento.

Answer 1

So che questa risposta arriva in ritardo, ma ora c'è una formatura standard per fare questo in modo nativo: MediaRecorder, supportato in Chrome e Firefox in questo momento.

C'è un esempio per la funzionalità lato client che si desidera here. È quindi possibile prendere il blob e caricarlo come parte di una richiesta POST sul server. In questo modo ottieni WebM che potresti ancora transcodificare sul server (ad esempio usando ffmpeg).