Запись видео и аудио и загрузка на сервер
я хочу добавить функциональность записи видео на веб-сайт. Я искал и пробовал все возможные доступные решения, но ничего еще не работает нормально.
Я пробовал ниже решения
-
WebRTC
Я знаю, что с помощью WebRTC мы можем получить поток с веб-камеры и микрофона. Я нашел много статей об одном и том же, но никто из них не объяснил, как извлечь blob из этого потока и сохранить его или загрузить на сервер. что я got должен получить userMediaStream и показать его в браузере, создав URL объекта blobnavigator.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
- в chrome я получаю два
-
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).