javascript - loop - HTML5 captura y guarda video
video html5 poster (2)
La secuencia se crea aquí.
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
sus datos son sream .. o window.URL.createObjectURL (secuencia).
pero no puede simplemente escribir stream o window.URL.createObjectURL (stream) a un almacenamiento local (2mb .. a small) o webkitRequestFileSystem (que le permite gb''s) ... necesita leer los datos enviados a la etiqueta de video y conviértalo a lienzo como un solo cuadro guardándolo en el sistema de archivos web.
Como el sistema de archivos ha cambiado últimamente, busqué en Google el nuevo código y encontré este ejemplo perfecto para ti. https://gist.github.com/piatra/2549734
en el ejemplo que usa
setTimeout(function(){ draw(v, bc, w, h); }, 200);
que escribe un marco cada 200 ms
Si quieres un framrate personalizado solo cambia 200ms a 1000/25 .. (25fps)
o use requestanimationframe y debería obtener alrededor de 60 fps si su CPU admite eso.
ahora no tienes un flujo real en un formato agradable como mp4 ... pero muchos de los cuadros que puedes mostrar con otra función ... otra vez necesitas una CPU muy rápida.
en este ejemplo el audio no funciona.
para grabar también el audio en WAV (no puedes grabar mp3 o aac) ... encontré esto.
http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/
así que al final podrías hacer eso ... pero tomaría mucho espacio por unos minutos y necesita una CPU muy rápida para elaborar todo.
Estoy construyendo un sitio para cantar, donde el usuario puede capturar un video de ellos mismos cantando con un mp3. Llegué al punto de que puedo acceder a la cámara y mostrar la transmisión en vivo, pero ¿cómo puedo guardar el video para que el usuario pueda descargarlo y conservarlo?
Mi código:
<!DOCTYPE html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"">
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<button class="btn" onclick="show();">Record!</button>
<div id="record" style="display:none; text-align:center;">
<div id="container">
<video autoplay="false" id="videoElement">
</video>
</div>
<button id="play" class="btn" onclick="play()">Start Recording!</button>
<audio id="song" style="hidden">
<source src="love.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
document.getElementById("videoElement").pause();
}
function videoError(e) {
alert("There was an error with the video stream./nCheck that your webcam is connected.");
}
function play()
{
var video = document.getElementById("videoElement");
var music = document.getElementById("song");
var button = document.getElementById("play");
if (video.paused) {
video.play();
music.play();
button.textContent = "Stop Recording";
} else {
video.pause();
music.pause();
button.textContent = "Continue Recording";
}
}
function show()
{
document.getElementById("record").style.display="block";
}
</script>
</body>
¿hay una manera en handleVideo que pueda guardar la secuencia como viene o algo así?
ACTUALIZACIÓN 12/2014 Para su información, hay una nueva API en su camino llamada MediaRecorder . Actualmente solo es compatible con Firefox, y en un estado temprano, pero algo a tener en cuenta.
MediaStream y almacenamiento local.
En un ambiente local puro, no puedes y no obtendrás un muy buen resultado. Puede guardar los fotogramas utilizando el elemento de lienzo dibujando en él y almacenar imágenes jpeg en un almacenamiento local desde el flujo de video junto con el audio (que debe guardarse por separado) y luego, luego, use una biblioteca para crear, por ejemplo, un MJPEG archivo (AFAIK actualmente no hay ninguno que admita audio).
Sin embargo, se encontrará con varios problemas con este enfoque: tardará mucho tiempo en usar JavaScript para procesar toda esta información: simplemente guardar un marco como jpeg, convertirlo en blob y guardarlo en el sistema de archivos o la base de datos indexada consumirá la mayoría ( o más) del presupuesto de tiempo que tiene disponible para un solo marco.
No podrá sincronizar los cuadros de video con el audio correctamente; puede guardar una marca de tiempo y usarlo para "corregir" los cuadros, pero su FPS probablemente variará al crear un video entrecortado. E incluso si obtiene la sincronización en cierto orden temporal, probablemente enfrentará problemas con el retraso donde el audio y el video no coinciden, ya que inicialmente son dos transmisiones independientes.
Pero los videos rara vez superan los 30 FPS (EE. UU.) O los 25 FPS (Europa), por lo que no necesitará la tasa completa de 60 FPS que puede proporcionar el navegador. Esto le proporciona un presupuesto de tiempo un poco mejor de aproximadamente 33 milisegundos por cuadro para el sistema de EE. UU. (NTSC) y un poco más si se encuentra en un país que utiliza el sistema PAL. No hay nada de malo en utilizar una velocidad de cuadro aún más baja, pero en un cierto punto (<12-15 FPS) comenzará a notar una falta de suavidad grave.
Sin embargo, hay muchos factores que influirán en esto, como la CPU, el sistema de disco, la dimensión del marco, etc. JavaScript es de un solo hilo y la API del lienzo es sincrónica, por lo que una CPU de 12 núcleos no le ayudará mucho en ese sentido y la utilidad de los Trabajadores Web actualmente se limita bastante a más tareas de larga duración. Si tiene una gran cantidad de memoria disponible, puede almacenar en caché los marcos en la memoria que se puede hacer y realizar todo el procesamiento en la publicación, lo que nuevamente llevará algo de tiempo. Una transmisión grabada a 720P @ 30 FPS consumirá un mínimo de 105 mb por segundo (solo se trata de datos sin procesar, sin incluir el manejo interno de los buffers que pueden duplicar o incluso triplicar esto).
WebRTC
Probablemente, una mejor solución sea utilizar WebRTC y conectarse a un servidor (externo o local) y procesar el flujo allí. Este flujo contendrá audio y video sincronizados y usted puede almacenar el flujo temporal en el disco sin las limitaciones de un área de almacenamiento en caja de arena del navegador. El inconveniente aquí será (para conexiones externas) el ancho de banda, ya que esto puede reducir la calidad, así como la capacidad del servidor.
Esto abre la posibilidad de usar, por ejemplo, Node.js, .Net o PHP para realizar el procesamiento real utilizando componentes de terceros (o un enfoque más de bajo nivel, como el uso de C / C ++ y CGI / canalización compilados si te gusta ese).
Puede consultar este proyecto de código abierto que admite la recodificación de flujos de WebRTC:
http://lynckia.com/licode/
El proyecto Licode proporciona una API de cliente NodeJS para WebRTC para que pueda usarla en el lado del servidor, consulte la documentación
Y esto es básicamente hasta dónde puede llegar con el estado actual de HTML5.
Destello
Luego está la opción de instalar Flash y usarlo: aún necesitará una solución del lado del servidor (Red5, Wowza o AMS).
Esto probablemente le dará una experiencia menos dolorosa, pero necesita tener Flash instalado en el navegador (obviamente) y en muchos casos hay un factor de costo más alto debido a las licencias (vea Red5 para una alternativa de código abierto ).
Si está dispuesto a pagar por soluciones comerciales, existen soluciones como esta:
http://nimbb.com/