grabar - take photo webcam html5

HTML5 getUserMedia graba cámara web, audio y video

Question

¿Es posible usar Chrome para capturar video (webcam) y audio (micrófono) desde el navegador y luego guardar la transmisión como archivo de video?

Me gustaría usar esto para crear una aplicación similar a video / photobooth que permita a los usuarios grabar un mensaje simple (de 30 segundos) (tanto de video como de audio) a archivos que luego se pueden ver.

He leído la documentación, pero aún no he visto ningún ejemplo sobre cómo capturar audio y video, tampoco encontré la manera de almacenar los resultados en un archivo de video.

¿Quién puede ayudar?

Answer 1

Actualmente hay varias soluciones listas para producción para grabar audio y video en la web.

Navegadores de escritorio

MediaRecorder API (HTML)

La API MediaRecorder (MediaStream Recorder) se basa en getUserMedia() para el acceso a la cámara web y es compatible con Firefox 30+ y Chrome 49+ .

Cliente Flash + servidor de medios rtmp

Necesitará una aplicación Flash (.swf) que esté integrada en su página web, que capture la cámara web y el micrófono de los visitantes, codifique los datos de audio y video sin procesar (utilizando los códecs integrados: H.264, Spark, Nellymoser ASAO y Speex) y transmisiones los datos a medida que se graban (a través de rtmp) en un servidor de medios.

Debido a que los datos se transmiten, tan pronto como detiene la grabación, todos los datos ya están en el servidor de medios (sin tiempos de carga). Otra ventaja es que el video no se pierde si la computadora cliente falla.

Tiene al menos 3 opciones para el servidor de medios:

1. Red5 es de código abierto y gratuito (personalmente he contribuido con parches de código para el proceso de grabación y puedo garantizar que funciona bien)
2. Wowza ($ 65 / mes)
3. Adobe Media Server Pro ($ 4500)

El servidor de medios recibe (nuevamente a través de streaming / rtmp no a través de http) los datos y, dependiendo del códec utilizado en el cliente y el servidor de medios utilizado, los datos de audio y video se multiplexan en archivos mp4, flv o f4v.

Este proceso de grabación de cliente Flash + servidor de medios, que funcionó bastante bien desde Flash Player 6 en 2002.

Navegadores móviles

HTML Media Capture

Puede usar HTML Media Capture (que se explica aquí con capturas de pantalla ) para grabar video usando la aplicación de grabación de video nativa del dispositivo y los códecs. HTML Media Capture registra localmente (en el dispositivo) y luego carga (el proceso de carga HTTP normal) el archivo en el servidor web.

Al utilizar HTML Media Capture en Safari en dispositivos iOS como el iPhone, creará un archivo .mov que no se puede reproducir en Android . La solución es convertirlo al lado del servidor .mp4 usando FFmpeg.

Al usar la captura de medios HTML en el navegador de Android, el resultado final será un archivo .mp4 que se puede reproducir en el iPhone. Algunos teléfonos Android más antiguos crearán archivos .3gp.

Una solución comercial que implementa ambos (cliente Flash + servidor de medios en el escritorio y captura de medios HTML en el móvil) es HDFVR .

Answer 2

Este es mi repo github que proporciona una biblioteca para grabar audio + video y finalmente subir el contenido al servidor como fragmentos

1. Esto soporta chrome, opera
2. El tiempo de carga se reduce, ya que los blobs se cortan y se cargan

Html_Audio_Video_Recorder

Answer 3

MediaStreamRecorder es una API de WebRTC para grabar secuencias de getUserMedia () (aún en implementación). Permite a las aplicaciones web crear un archivo a partir de una sesión de audio / video en vivo.

<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

Por lo que sé, no hay forma de grabar audio y video juntos y guardarlos como un solo archivo. es posible capturar y guardar el audio como un archivo wav y el video como un archivo webm.

Aquí hay una gran publicación sobre cómo guardar tu video; http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

y una utilidad útil para guardar tu audio

https://github.com/mattdiamond/Recorderjs

Answer 5

Use lo siguiente:

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

Luego trata el formulario como un archivo normal en tu php