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

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

  • WebRTC
    Я знаю, что с помощью WebRTC мы можем получить поток с веб-камеры и микрофона. Я нашел много статей об одном и том же, но никто из них не объяснил, как извлечь blob из этого потока и сохранить его или загрузить на сервер. что я got должен получить 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 конвертировать и объединять файлы на sever.
    • Its отлично работает с коротким видео, хотя занимает много времени, чтобы конвертировать файлы на сервере, но вопрос начать с длинными файлами записи. Я получаю Array memory out of exception для записи более что 4 min и когда размер blob превышает 10 MB
  • MediaStreamRecorder
    это еще одна библиотека Мауз Хана, которая дает записанный blob после определенного интервала времени. Я думал, что это решит проблему исключения памяти. Поэтому я реализовал его, как показано ниже

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

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

    • в end объединить все небольшой файл в final с помощью FFMPEG полный видеофайл

    • проблема с этим, когда небольшой кусок blob, сохраненный в небольшой видеофайл, кажется, что стартовый байт файла поврежден, поэтому он зависает во время запуска каждого небольшого файла и после слияния всего файла в окончательное завершенное видео, видео получает зависание, и там "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).