Запись видео и аудио и загрузка на сервер

Я хочу добавить функции видеозаписи на сайт. Я искал и пробовал все возможные доступные решения, но ничего еще не работал нормально.
Я пробовал ниже решение

  • WebRTC
    Я знаю, что с помощью WebRTC мы можем получить поток с веб-камеры и микрофона. Я нашел много статей об одном и том же, но ни один из них не объяснил, как извлечь из этого потока blob и сохранить его или загрузить на сервер. То, что у меня есть, - это получить userMediaStream и показать его в браузере, создав URL-адрес объекта blob 

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

    Как извлечь объект из этого потока, чтобы я мог его сохранить или загрузить на сервер?

  • RecorRTC
    RecordRTC - это библиотека, написанная Маузом Ханом для видео/видеозаписи, которая на самом деле хорошая. Используя эту библиотеку, я могу записывать видео и аудио, но есть некоторые проблемы с этим, как показано ниже.

    • В chrome я получаю два Blob объекта один для аудио и один для видео. Чтобы генерировать конечный файл, мне нужно объединить эти файлы в окончательный видеофайл. Я использую FFMPEG для преобразования и объединения файлов на сервере.
    • Он отлично работает с коротким видео, хотя долгое время конвертирует файлы на сервер, но проблема начинается с длинных файлов записи. Я получаю Array memory out of exception для записи больше 4 min и когда размер блоба превышает 10 MB

  • MediaStreamRecorder
    Это еще одна библиотека от Mauz Khan, которая дает записанный blob после определенного временного интервала. Я думал, что это решит проблему исключения памяти. Поэтому я реализовал это как ниже

    • Возьмите блок blob на интервал и отправьте его на сервер

    • Преобразование блока blob в маленький видеофайл с помощью FFMPEG

    • В конце слейте весь мелкий файл в финал с помощью FFMPEG полного видеофайла

    • Проблема с этим заключается в том, что небольшой кусок блоба сохраняется в небольшом видеофайле, кажется, что начальный байт файла поврежден, поэтому он становится повесившимся во время запуска каждого небольшого файла и после слияния всего файла с окончательным завершенным видео, получает видео зависать и слышать шум "trrrrrr" после каждого интервала
    • Также видеозахват для длительного видео

Теперь я собираюсь записывать видео, используя чистый javascript WebRTC UserMedia API, но теперь я действительно шокирован, потому что нет ни одной статьи, которая объясняет How to record video with audio and upload to server. Каждая статья или ответ показывает только get UserMedia and show stream in video tag как показанный код в приведенном выше примере. Я уже трачу много времени на это. пожалуйста, предложите любое решение. Также будет хорошо, если есть какая-либо платная библиотека или услуга.

Ответы

Ответ 1

Я знаю, что этот ответ приходит поздно, но теперь есть стандартное формирование, чтобы сделать это изначально: MediaRecorder, поддерживаемый в Chrome и Firefox справа Теперь.

Существует образец для функциональности клиентской стороны, которую вы хотите здесь. Затем вы можете взять blob и загрузить его как часть запроса POST на сервер. Таким образом вы получаете WebM, который вы все еще можете перекодировать на сервере (например, с помощью ffmpeg).