Record video on browser and upload to LAMP server

Question

I have tried a lot of things out there: red5, jquery webcam, html5 ... but none of these solution record a video and leave it ready to upload to a server.

Is there anyway (html5, flash, whatever ... the better cross-broswer solution, the best) to upload video (+ audio!) and upload the result to a server (I guess through AJAX) ?

Summarize:

• jQueryWebcam (https://github.com/infusion/jQuery-webcam): it has flash video, uploads to a server image, not a video
• Eric Bidelman's solution (http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia):records video in html5 and allows you to download (so you can upload to a server), but no audio !
• Red5 (http://www.red5-recorder.com/services.php): paid services, not uploading in free version :(
• DMV (https://github.com/rwldrn/dmv): it just captures a photo ... besides not cross-browser

Answer 1

I have developed video recording solutions for the better part of the last 5 years and contributed a lot to fixing video recording bugs in Red5.

There are currently 2 production ready technical solutions for recording audio and video on the web. One for desktop and one for mobile.

On desktop you will need a Flash application that sits embedded in a web page, captures the visitors webcam and mic, encodes the raw video and audio data and streams it as it is recorded (through rtmp) to a media server.

You have at least 3 options for the media server:

1. Red5 is free and open source (btw. recording works out of the box in Red5)
2. Wowza ($65/month)
3. Adobe Media Server Pro ($4500)

The media server receives (again through streaming/rtmp not through http) the data and, depending on the codec used on the client, saves it to mp4, flv or f4v files.

This Flash client + media server recording process - which has worked pretty well since Flash Player 6 in 2002 - will most likely replaced by the HTML5 alternative named MediaStream Recorder (not yet implemented fully by any browser).

On mobile you can use HTML Media Capture (explained here with screenshots) to record video using the device's native video recording app and codecs. HTML Media Capture records locally (on the device) and then you upload (normal HTTP upload process) the file to the web server.

A commercial solution that implements both (Flash client + media server on desktop and HTML Media Capture on mobile) is HDFVR.

Answer 2

You could use something like binary download via javascript.

Here is one example

As you have not much info about video protocols i cant give you better answer

Answer 3

you can try this library, RecordRTC. It generates a blob file to put in video source and you can upload this file later to your server.

RecordRTC Library

This library is a container for other libraries, like Whammy for video, Recorderjs for audio and jsGif for gifs.

You can use Whammy library for record videos too: Whammy