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

Question

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

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

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

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

Answer 1

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

<input type="file" accept="image/*;capture=camera"> \\ Snapshot 
<input type="file" accept="video/*;capture=camcorder"> \\ Video 
<input type="file" accept="audio/*;capture=microphone"> \\ Audio 

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

Answer 2

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

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

и полезно, чтобы сохранить Предприятия обслуживания населения вашего аудио

https://github.com/mattdiamond/Recorderjs

Answer 3

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

<script language="javascript" type="text/javascript"> 
function onVideoFail(e) { 
    console.log('webcam fail!', e); 
    }; 

function hasGetUserMedia() { 
    // Note: Opera is unprefixed. 
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 

if (hasGetUserMedia()) { 
    // Good to go! 
} else { 
    alert('getUserMedia() is not supported in your browser'); 
} 

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || 
          navigator.msGetUserMedia; 

var video = document.querySelector('video'); 
var streamRecorder; 
var webcamstream; 

if (navigator.getUserMedia) { 
    navigator.getUserMedia({audio: true, video: true}, function(stream) { 
    video.src = window.URL.createObjectURL(stream); 
    webcamstream = stream; 
// streamrecorder = webcamstream.record(); 
    }, onVideoFail); 
} else { 
    alert ('failed'); 
} 

function startRecording() { 
    streamRecorder = webcamstream.record(); 
    setTimeout(stopRecording, 10000); 
} 
function stopRecording() { 
    streamRecorder.getRecordedData(postVideoToServer); 
} 
function postVideoToServer(videoblob) { 

    var data = {}; 
    data.video = videoblob; 
    data.metadata = 'test metadata'; 
    data.action = "upload_video"; 
    jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess); 
} 
function onUploadSuccess() { 
    alert ('video uploaded'); 
} 

</script> 

<div id="webcamcontrols"> 
    <button class="recordbutton" onclick="startRecording();">RECORD</button> 
</div> 

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

Answer 4

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

1. Это поддерживает хром, Опера
2. Время загрузки уменьшается, так как кусочки нарезаны и загружены

Html_Audio_Video_Recorder

Answer 5

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

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

MediaRecorder API (HTML)

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

флэш-клиент + RTMP медиа сервер

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

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

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

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

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

Этот флэш-процесс записи клиента + медиа-сервер - который работает довольно хорошо, так как Flash Player 6 в 2002

мобильных браузеров

HTML Медиа Захват

Вы можете использовать HTML захвата медиаданных (explained here with screenshots), чтобы записывать видео, используя собственное приложение для записи видео и кодеки устройства. 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.