I need to create an app that can record video using a webcam or mobile camera (it needs to be cross platform).
So far I have written a small proof of concept using webrt
You can record video and audio separately. You can get files (WAV/WebM) and upload them on demand. webkitMediaStream takes two objects 1) audioTracks and 2) videoTracks. You may be able to combine both audio/video recorded streams!
I know I'm a few years late to the party, but here is a snippet that's capable of capturing video and uploading it to the included node.js server as a webm file. I've tested in Chrome and Firefox.
https://gist.github.com/rissem/d51b1997457a7f6dc4cf05064f5fe984
The only cross platform web video recorder is the HDFVR webcam video recorder software.
It uses Flash (records using Flash codecs + streams to a media server) on the desktop and the HTML Media Capture API (record using OS + upload to webserver) on mobile to record video from pretty much any desktop or mobile browser.
You can link it to a ffmpeg installation to convert everything to a cross platform format like MP4 (iOS records to a .mov container that doesn't play on Android) and it also has a JS API.
Hi sorry if this is kinda late, but here is how i managed to make the file upload to a server, I really don't have an idea if this is the best way to achieve this but i hope it helps to give you a clue.Following the tutorial Eric Bidelman wrote (as Sam Dutton commented) what you get is a blob, so I made a XMLHttpRequest to get the video and set the response type as blob, afterwards I created a FormData in which I appended the response, this will allow the blob to be sent to the server.Here is how my function looks like.
function sendXHR(){
//Envia bien blob, no interpretado
var xhr = new XMLHttpRequest();
var video=$("#myexportingvideo");
xhr.open('GET', video.src , true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'video/webm'});
console.log(blob.size/1024);
console.log(blob.type);
form = new FormData(),
request = new XMLHttpRequest();
form.append("myblob",blob,"Capture.webm");
form.append("myname",$("#name_test").value);
request.open("POST","./UploadServlet",true);
request.send(form);
}
};
xhr.send();
}