¿Cómo grabar vídeo y audio con HTML5 desde webcam?

SiNSoNiDo

He estado buscado cómo grabar video y audio desde HTML5 y no doi con una solución que me valga.

Por un lado encuentro cómo grabar vídeo y por otro lado audio, por separado, pero no junto. ¿Alguno sabe si es que acaso no es posible?

Y si es posible, ¿cómo?

He estado utilizando la librería getUserMedia que solo es compatible con chrome y firefox.

sh31k

#1 getusermedia graba audio y video, aquí tienes una buena guía:

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

1 respuesta
SiNSoNiDo

#2 es la guía que estaba siguiendo, pero no consigo que grabe el audio del vídeo V_V

elkaoD

Me gustaría destacar que SiNSoNiDo no consigue que se grabe el audio xD

Respecto al problema, ni idea. ¿Te falla tanto con Chrome como con FF?

4 1 respuesta
SiNSoNiDo

#4 Si, en ambos exploradores.
Estoy siguiendo este ejemplo que me crea un archivo .webm con el vídeo, pero no el sonido:
http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia

Cuando crea el blob del vídeo pone:

 
  if (!url) {
    var webmBlob = Whammy.fromImageArray(frames, 1000 / 60);
    url = window.URL.createObjectURL(webmBlob);
  }

Yo lo he cambiado por:

 
   var encoder = new Whammy.Video(1000/60);
   frames.forEach(function(dataURL, i) {
     encoder.add(dataURL);
   });
   var webmBlob = encoder.compile();

Entendiendo que lo primero solo creaba el vídeo a partir de las capturas de los frames (solo imagen) y que el segundo compilaría sonido y audio, pero nada.

B

Si lo que buscas es streaming esa forma no es la más adecuada actualmente. El soporte en html5 nativo está muy verde todavía y solo va medianamente bien en chrome. Ahora mismo para streaming la única alternativa es flash y red5/macromedia server.

1 respuesta
SiNSoNiDo

#6 ¿Abandono el html5 entonces? ¿No es viable? Con que funcione en chrome solo me vale.

Con getUserMedia tengo bastante control (o eso creía) sobre la etiqueta vídeo parar la grabación a los X segundos y procesar el vídeo para guardarlo en el servidor mediante instrucciones en jquery/javascript.

¿Algún ejemplo o documentacion en flash y red5/macromedia server que pueda seguir?

2 respuestas
B

#7 si te vale que solo funcione en chrome quédate con html de aquí a lima evidentemente.

sh31k

#7 Yo no abandonaría html5, al fin y al cabo en un par de meses tanto mozilla como opera deberán adaptarse a el. Y ya el nuevo IE y Chrome lo soportan.

Pero tampoco estoy siendo objetivo, detesto flash :/

SiNSoNiDo

El problema es que lo necesito ahora para un pequeño proyecto que estoy montando.

Sigo sin conseguir que con getUserMedia me grabe video y audio a la vez.

2 respuestas
sh31k

#10 Has probado con el plugin de jquery?

B

#10 Prueba la nightbuild de chrome y otra cámara web.

 if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
        } else {
          console.log('navigator.getUserMedia not present');
        }

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

Usuarios habituales