Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>UPDATE 12/2014</strong> <em>FYI, there is a new API on its way called <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API" rel="nofollow noreferrer">MediaRecorder</a></strong>. Currently only supported in Firefox, and in an early state, but something to have in mind.</em></p> <h1>mediaStream and local storage</h1> <p>In pure local environment you can't and won't get a very good result. You can save out the frames using the canvas element by drawing onto it and store jpeg images to a local storage from the video stream together with the audio (which must be saved separately) and then in post use a library to create for example a MJPEG file (AFAIK there isn't currently any that supports audio).</p> <p>You will run into several issues with this approach however: it will take much time to use JavaScript to process all this information - just saving a frame as jpeg, converting it to blob and save it to the file system or indexed DB will consume most (or more) of the time budget you have available for a single frame.</p> <p>You will not be able to synchronize the video frames with the audio properly - you can save a time-stamp and use that to "correct" the frames but your FPS will most likely vary creating a jerky video. And even if you get the sync in somewhat order time-wise you will probably face problems with lag where audio and video does not match as they are initially two separate streams.</p> <p>But videos are very rarely above 30 FPS (US) or 25 FPS (Europe) so you won't need the full 60 FPS rate the browser <em>may</em> provide. This gives you a little better time budget of about 33 milliseconds per frame for US (NTSC) system and a little more if you are in a country using the PAL system. There is nothing wrong using an even lower frame rate but at a certain point (&lt; 12-15 FPS) you will start noticing severe lack of smoothness.</p> <p>There are however many factors that will influence this such as the CPU, disk system, frame dimension and so forth. JavaScript is single threaded and canvas API is synchronous so a 12-core CPU won't help you much in that regard and Web Workers' usefulness is currently limited pretty much to more long-running tasks. If you have a lot of memory available you can cache the frames in-memory which is do-able and do all processing in post which again will take some time. A stream recorded at 720P @ 30 FPS will consume minimum 105 mb per second (that's just raw data not including the browser's internal handling of buffers which may double or even triple this).</p> <h1>WebRTC</h1> <p>A better solution is probably be to use WebRTC and connect to a server (external or local) and process the stream there. This stream will contain synchronized audio and video and you can store the stream temporary to disk without the limitations of a browser sand-boxed storage area. The drawback here will be (for external connections) bandwidth as this may reduce the quality, as well as the server's capability.</p> <p>This opens up the possibility to use for example Node.js, .Net or PHP to do the actual processing using third-party components (or more low-level approach such as using compiled C/C++ and CGI/piping if you're into that).</p> <p>You can check out this open source project which supports recoding of WebRTC streams:<br> <a href="http://lynckia.com/licode/" rel="nofollow noreferrer">http://lynckia.com/licode/</a></p> <p>The Licode project provides a NodeJS client API for WebRTC so that you can use it on the server side, <a href="http://lynckia.com/licode/client-api.html#erizofc" rel="nofollow noreferrer">see the docs</a></p> <p>And this is basically how far as you can go with current state of HTML5.</p> <h1>Flash</h1> <p>Then there is the option of installing Flash and use that - you <a href="https://stackoverflow.com/questions/1973002/save-video-captured-from-webcam-using-flash">will still need a server</a> side solution (Red5, Wowza or AMS).</p> <p>This will probably give you a less painful experience but you need to have Flash installed in the browser (obviously) and in many cases there is a higher cost factor due to licenses (see <a href="http://www.red5.org/" rel="nofollow noreferrer">Red5 for a open-source</a> alternative).</p> <p>If you are willing to pay for commercial solutions there are solutions such as this:<br> <a href="http://nimbb.com/" rel="nofollow noreferrer">http://nimbb.com/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload