Запись видео с аудио с помощью веб-камеры на веб-странице HTML

0

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

Мне нужно создать веб-сайт, который позволяет пользователям записывать прямое видео и сохранять его на веб-сайте. Я попытался использовать некоторые из существующих плагинов, таких как navigator.getUserMedia, для записи видео, но это видео записывается без какого-либо звука.

Поэтому я просто хочу знать, какие изменения мне нужно сделать для getUserMedia, чтобы он записывал звук во время записи видео.

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

На данный момент я использую navigator.getUserMedia

Я где-то читал, что вы не можете записывать VIDEO & AUDIO одновременно с помощью getUserMedia, это правда?

Я не знаю, есть ли какой-либо другой плагин, который является бесплатным и поможет мне записать надлежащее LIVE VIDEO. Я открыт для использования любого другого плагина, который может быть jQuery или Flash, мне просто нужно знать, как записывать надлежащее видео.

Когда я говорю надлежащее видео, я имею в виду, что это видео должно также иметь звук.

Заранее спасибо.

PS: - Я использую PHP, Apache Webserver для внутренней обработки.

  • 0
    Попробуйте ScriptCam, это плагин jQuery, я думаю
  • 0
    ScriptCam достиг конца жизни.
Теги:
video-capture
flash
getusermedia

2 ответа

2

Взгляните на API MediaRecorder. Это позволяет вам легко записывать видео и аудио. Имейте в виду, что это очень экспериментально.

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

Поделиться
  • 0
    MediaRecorder API теперь avb. в Firefox и Chrome, но они записывают с использованием разных звуковых кодеков addpipe.com/media-recorder-api-demo
0

MediaDevices.getUserMedia() теперь является предпочтительным способом доступа к веб-камере и микрофону. Navigator.getUserMedia() теперь считается устаревшим.

Но независимо от того, как вы получаете доступ к веб-камере, есть 2 (HTML) решения для записи аудио/видео данных с веб-камеры:

1) API медиа-рекордера

Некоторое время он поддерживался как Chrome (49+), так и Firefox (30+). Аудио/видеоданные записываются и сохраняются в объекте Blob JS. Вы можете загрузить его как .webm на свой жесткий диск или загрузить его на веб-сервер для хранения.

API Media Recorder прост в реализации, но в зависимости от браузера вы получите различные аудио- и видеокодеки в контейнере.webm. Chrome поддерживает VP8, VP9, H.264 + Opus для аудио, в то время как Firefox поддерживает VP8 и Vorbis.

Возможно, вам придется преобразовать видео в более широко поддерживаемый .mp4 с аудио AAC и видео H.264 если вы планируете поддержку кросс-браузера/устройства.

Спецификация: https://w3c.github.io/mediacapture-record/MediaRecorder.html

Демо + кодеки: https://addpipe.com/media-recorder-api-demo/

2) Запись потока WebRTC

Это связано с открытием подключения WebRTC к медиасерверу, например, к Kurento или Janus и записи на стороне сервера потоков.

Несмотря на более сложную реализацию (вы должны размещать, настраивать и поддерживать медиа-сервер) и иметь одинаковые проблемы с кодеками/контейнерами, у нее есть несколько преимуществ по сравнению с Media Recorder API:

  • Поддержка WebRTC придет к Edge и даже Safari
  • вы можете записывать длинные видео, не беспокоясь об использовании ОЗУ
  • потоковая передача данных в случае сбоя, данные не теряются
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню