Me gustaría grabar la cámara web y el audio de los usuarios y guardarlo en un archivo en el servidor. Estos archivos podrían luego ser entregados a otros usuarios.
No tengo problemas con la reproducción, sin embargo, tengo problemas para grabar el contenido.
Tengo entendido que la .record()función getUserMedia aún no se ha escrito, solo se ha hecho una propuesta hasta ahora.
Me gustaría crear una conexión entre pares en mi servidor usando PeerConnectionAPI. Entiendo que esto es un poco hack, pero creo que debería ser posible crear un par en el servidor y registrar lo que envía el cliente-par.
Si esto es posible, debería poder guardar estos datos en flv o en cualquier otro formato de video.
Mi preferencia es grabar la cámara web + audio del lado del cliente, para permitir que el cliente vuelva a grabar videos si no les gustó su primer intento antes de cargarlos. Esto también permitiría interrupciones en las conexiones de red. He visto un código que permite la grabación de 'imágenes' individuales desde la cámara web enviando los datos al lienzo; eso es genial, pero también necesito el audio.
Aquí está el código del lado del cliente que tengo hasta ahora:
<video autoplay></video>
<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 x = new XMLHttpRequest();
x.open('POST', 'uploadMessage');
x.send(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">
<a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>