HTML5 kamera internetowa getUserMedia, zarówno audio, jak i wideo

Question

Czy można używać przeglądarki Chrome do przechwytywania wideo (kamery internetowej) i dźwięku (mikrofonu) z przeglądarki, a następnie zapisywania strumienia jako pliku wideo?

Chciałbym użyć tego do stworzenia aplikacji typu wideo/fotobudka, która pozwala użytkownikom nagrywać proste (30 sekund) wiadomości (zarówno wideo, jak i audio) do plików, które mogą być później oglądane.

Przeczytałem dokumentację, ale nie widziałem (jeszcze) przykładów, jak przechwytywać wideo audio &, także nie znalazłem jeszcze sposobu na zapisanie wyników w pliku wideo.

Kto może pomóc?

Answer 1

użyć następujących:

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

Następnie traktować postać jako zwykłego pliku w php

Answer 2

O ile mi wiadomo nie ma takiego sposobu, aby nagrać audio i wideo razem i je zapisać jako jeden plik. możliwe jest przechwytywanie i zapisywanie dźwięku jako pliku wav i wideo jako pliku webma.

Oto świetny post na temat zapisywania wideo; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

i użytecznie utillity zapisać audio

https://github.com/mattdiamond/Recorderjs

Answer 3

MediaStreamRecorder jest API WebRTC do nagrywania getUserMedia() strumienie (nadal w trakcie realizacji). Umożliwia aplikacjom internetowym tworzenie pliku z sesji audio/wideo na żywo.

<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

To mój github repo która dostarcza bibliotekę do nagrywania audio + video i wreszcie przesłać treść do serwera jako kawałki

1. obsługuje chrom, Opera
2. Czas przesyłania jest skrócony, ponieważ bloby są krojone i przesyłane

Html_Audio_Video_Recorder

Answer 5

Obecnie istnieje kilka produkcyjne gotowe rozwiązania do nagrywania audio i wideo w internecie.

Pulpit Przeglądarki

MediaRecorder API (HTML)

MediaRecorder API (MediaStream Recorder) opiera się na getUserMedia() dostępu do kamery i is supported by Firefox 30+ and Chrome 49+.

klienta Flash + RTMP mediów serwera

Będziesz potrzebował Flash (.swf) aplikacja osadzona na Twojej stronie internetowej, rejestrująca kamerę internetową i mikrofon, kodująca nieprzetworzone dane wideo i audio (przy użyciu wbudowanych kodeków: H.264, Spark, Nellymoser ASAO i Speex) oraz przesyła dane podczas ich rejestrowania (przez rtmp) na serwer multimediów.

Ponieważ dane są przesyłane strumieniowo, natychmiast po zatrzymaniu nagrywania wszystkie dane są już w sewerach nośników (brak czasów ładowania). Kolejną zaletą jest to, że wideo nie zostanie utracone, jeśli komputer kliencki ulegnie awarii.

mieć co najmniej 3 opcje dla serwera mediów:

1. Red5 jest darmowy i open source (ja osobiście przyczynił łatek kodu do procesu nagrywania w nim i mogę zagwarantować, że działa świetnie)
2. Wowza (65 $/miesiąc)
3. Adobe Media Server Pro ($ 4500)

serwer multimedialny otrzyma (ponownie przez streamingu/RTMP nie poprzez http) danych oraz, w zależności od kodeku używanego na kliencie i używanym serwerze multimedialnym, dane audio i wideo są multipleksowane w plikach mp4, flv lub f4v.

Ten proces nagrywania klient-serwer + nośnik Flash - który pracował bardzo dobrze, ponieważ Flash Player 6 w 2002.

mobilnych przeglądarek

HTML Mediów Przechwytywanie

Można używać HTML przechwytywania mediów (explained here with screenshots) do nagrywania wideo za pomocą natywnej aplikacji do nagrywania wideo i kodeków. HTML Media Capture zapisuje lokalnie (na urządzeniu), a następnie przesyła (normalny proces wysyłania HTTP) plik do serwera WWW.

Podczas używania HTML Media Capture w Safari na urządzeniach z systemem iOS, takich jak iPhone utworzy plik .mov, którego nie można odtworzyć na Androidzie. Rozwiązaniem jest przekonwertowanie go na stronę serwera .mp4 przy użyciu FFmpeg.

Podczas korzystania z HTML Media Capture w przeglądarce Android, wynikiem końcowym będzie plik .mp4, który można odtwarzać na iPhonie. Niektóre starsze telefony z Androidem utworzą pliki .3gp.

Rozwiązaniem komercyjnym, które implementuje oba (klient Flash + serwer multimediów na komputerze stacjonarnym i HTML Media Capture na urządzeniach mobilnych) jest HDFVR.