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