Video und Audio aufzeichnen und auf den Server hochladen

Question

Ich möchte der Website Videoaufzeichnungsfunktionen hinzufügen. Ich habe jede mögliche verfügbare Lösung gesucht und versucht, aber noch nichts funktioniert gut.
Ich habe versucht, unter Lösung des

• WebRTC
  ich WebRTC wissen wir, den Strom von der Webcam und Mikrofon bekommen. Ich habe viele Artikel darüber gefunden, aber keiner von ihnen hat erklärt, wie man Blob aus diesem Stream extrahiert und speichert oder auf den Server hochlädt. Was habe ich ist bis userMediaStream zu bekommen und es in Browser anzeigen, indem Blob Objekt URL
  Schaffung

  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. 
  } 
  

  Wie Objekt aus diesem Strom zu extrahieren, so dass ich es speichern oder auf den Server hochladen?

• RecorRTC
  RecordRTC ist eine von Mauz Khan geschriebene Bibliothek für Video-/Videoaufnahmen, die eigentlich gut ist. Mit Hilfe dieser Bibliothek ich in der Lage bin, die Video und Audio, Aber es einige Probleme mit dieser, wie unten

  • In Chrom aufnehmen Ich erhalte zwei Blob Objekt eine für Audio und eine für Video, Um endgültige Datei I zu erzeugen müssen diese Dateien in die endgültige Videodatei zusammenführen. Ich verwende FFMPEG, um die Dateien auf dem Server zu konvertieren und zusammenzuführen.
  • Es funktioniert gut mit kurzen Video, obwohl lange dauern, um Dateien auf dem Server zu konvertieren, aber Problem beginnen mit den langen Aufnahmedateien. Ich erhalte Array memory out of exception für mehr Aufnahme, dass 4 min und wenn Blob Größe 10 MB

• MediaStreamRecorder
  Dies ist eine weitere Bibliothek von Mauz Khan überschreiten, die nach bestimmten Zeitintervall aufgezeichnet Blob gibt. Ich dachte, das würde mein Speicherausnahmeproblem lösen. So implementiert ich es wie unten

  • Nehmen blob Klumpen auf Intervall und per Post an den Server

  • Convert blob Brocken in kleine Videodatei FFMPEG

  • Am Ende mit verschmelzen all die kleinen Datei in das Finale mit FFMPEG komplette Videodatei

  • Problem mit diesem ist, wenn kleine Blob Chunk in kleine Videodatei gespeichert scheint dort Startbyte der Datei beschädigt werden, so dass es gehängt werden bei Startzeit jeder kleinen Datei und nach dem Zusammenführen aller Datei in der endgültige fertigem Video, wird Video hängen und es gibt trrrrrr 'Lärm- Ton nach jedem Intervall
  • Auch Video-Start für langes Video hängen

Ich denke jetzt Video mit reinem Javascript aufzunehmen WebRTC UserMedia API aber jetzt bin ich wirklich schockiert, weil es nicht einmal einen einzigen Artikel gibt, der How to record video with audio and upload to server erklärt. Jeder Artikel oder jede Antwort zeigt nur get UserMedia and show stream in video tag als Code im obigen Beispiel. Ich verbringe schon viel Zeit damit. Bitte schlagen Sie eine Lösung vor. Es wird auch gut sein, wenn es eine bezahlte Bibliothek oder einen Service gibt.

Answer 1

Ich weiß, dass diese Antwort spät kommt, aber jetzt gibt es eine Standardformierung, um dies nativ zu tun: MediaRecorder, jetzt in Chrome und Firefox unterstützt.

Es gibt ein Beispiel für die clientseitige Funktionalität, die Sie wollen here. Sie können dann den Blob nehmen und als Teil einer POST-Anfrage auf den Server hochladen. Auf diese Weise erhalten Sie WebM, das Sie noch auf dem Server transkodieren könnten (z. B. mit ffmpeg).