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