Веб-камера записи HTML5 getUserMedia, как аудио, так и видео

Можно ли использовать Chrome для захвата видео (веб-камеры) и звука (микрофона) из браузера, а затем сохранить stream в виде видеофайла?

Я хотел бы использовать это, чтобы создать приложение для видео / фотобутов, которое позволяет пользователям записывать простые (30 секунд) сообщения (как видео, так и аудио) в файлы, которые впоследствии могут быть просмотрены.

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

Кто может помочь?

MediaStreamRecorder – это API WebRTC для записи streamов getUserMedia () (все еще находится в стадии реализации). Это позволяет веб-приложениям создавать файл с живого сеанса аудио / видео.

 

http://www.w3.org/TR/mediastream-recording/

Насколько мне известно, нет такого способа записи аудио и видео вместе и сохранения их в виде одного файла. можно записать и сохранить аудио в виде файла wav и видео в виде файла webm.

вот отличный пост о том, как сохранить видео; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

и полезная утилита для сохранения звука

https://github.com/mattdiamond/Recorderjs

В настоящее время существует несколько готовых решений для записи аудио и видео в Интернете.

Настольные браузеры

API MediaRecorder (HTML)

MediaRecorder API (MediaStream Recorder) полагается на getUserMedia() для доступа к веб- getUserMedia() и поддерживается Firefox 30+ и Chrome 49+ .

Flash-клиент + медиа-сервер rtmp

Вам понадобится приложение Flash (.swf), встроенное в вашу веб-страницу, захватывающее веб-камеру и микрофон посетителей, кодирует необработанные видео и аудио данные (используя встроенные кодеки: H.264, Spark, Nellymoser ASAO и Speex) и streamи данные по мере их записи (через rtmp) на медиа-сервер.

Поскольку данные передаются по streamу, как только вы останавливаете запись, все данные уже находятся в медиа-севере (без времени загрузки). Другим преимуществом является то, что видео не пропадает, если компьютер клиента сбой.

У вас есть как минимум 3 варианта для медиа-сервера:

  1. Red5 является бесплатным и открытым исходным кодом (я лично внес исправления кода в процесс записи в нем, и я могу гарантировать, что он отлично работает)
  2. Wowza ($ 65 / месяц)
  3. Adobe Media Server Pro ($ 4500)

Медиа-сервер получает (снова через streamовое / rtmp не через http) данные и, в зависимости от кодека, используемого на клиенте и используемом медиа-сервере, аудио- и видеоданные мультиплексируются в файлах mp4, flv или f4v.

Этот процесс записи Flash-клиентом + медиа-сервера – который работал очень хорошо с Flash Player 6 в 2002 году.

Мобильные браузеры

Захват HTML Media

Вы можете использовать HTML Media Capture ( объясненную здесь с помощью скриншотов ) для записи видео с помощью собственного приложения для записи видео и кодеков. HTML Media Capture записывает локально (на устройстве), а затем загружает (обычный процесс загрузки HTTP) файл на веб-сервер.

При использовании HTML Media Capture в Safari на устройствах iOS, таких как iPhone, он создаст файл .mov, который не воспроизводится на Android . Решение состоит в том, чтобы преобразовать его на сервер .mp4 с помощью FFmpeg.

При использовании HTML Media Capture в браузере Android конечным результатом будет файл .mp4, который можно воспроизводить на iPhone. Некоторые старые телефоны Android создадут файлы .3gp.

Коммерческое решение, которое реализует оба (Flash-клиент + медиа-сервер на рабочем столе и HTML Media Capture на мобильном телефоне), является HDFVR .

Это мое github repo, которое предоставляет библиотеку для записи аудио + видео и, наконец, загружает контент на сервер в виде кусков

  1. Это поддерживает хром, Opera
  2. Время загрузки сокращается, так как blobs нарезаны и загружены

Html_Audio_Video_Recorder

Используйте следующее:

  \\ Snapshot  \\ Video  \\ Audio 

Затем обработайте форму как обычный файл в php

  • Рисование изображения из URL-адреса данных на canvas
  • Dropdownlistfor не отобразит правильный выбор
  • Холст HTML5 замедляется с каждым ударом и очищается
  • Как получить доступ к камере мобильного устройства из веб-приложения?
  • Будет ли IE9 поддерживать API файлов HTML5?
  • Как вы создаете сообщения для проверки формы HTML5?
  • Могу ли я избежать встроенного полноэкранного видеоплеера с HTML5 на iPhone или Android?
  • Можете ли вы задать два поля формы для соответствия HTML5?
  • Поддерживается ли google.loader.clientlocation
  • Поддерживает ли Internet Explorer pushState и replaceState?
  • Холст HTML5 - Заполнить круг с изображением
  • Interesting Posts

    Мониторинг изменений жесткого диска в файлах

    Нумерация нулевого месяца

    Проверка подлинности электронной почты с использованием регулярного выражения в JSF 2 / PrimeFaces

    Секвенирование и реорганизация задач

    Мышь родительского контроля Ввод / выключение событий с помощью детского контроля

    Образец RegEx: любые две буквы, за которыми следуют шесть номеров

    Связывание WPF DataGridComboBoxColumn с MVVM

    Прокрутите RecyclerView, чтобы отобразить выбранный элемент сверху.

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

    Должен ли я использовать свойства или прямую ссылку при доступе к переменным экземпляра внутри?

    Что мне делать при запуске приложения триггеров, повторяющих бесконечный самозапуск установщика Windows?

    Сборка Maven 2 с зависимостями: jar under scope «system» не входит в комплект

    Почему strchr принимает int для char, который будет найден?

    Установка драйверов Windows 7 автоматически

    Пароль Защитите SQLite DB. Является ли это возможным?

    Давайте будем гением компьютера.