/lab_web_multimedia

Experiments on web multimedia

Primary LanguageJavaScript

lab_web_multimedia

Experiments on web multimedia, including video and audio.

By: X. Chen
Since: April 2015

About

It used to need plug-in, like adobe flash, or silverlight. Now HTML5 has navigator.getUserMedia feature implemented into some browsers. Now although HTML5 can capture video (and audio), but it's still hard to capture the stream and munipulate it, such as sending it to server side and display in another user's computer, such tasks still need plug-ins such as flash.

Ideally, if HTML5 can support audio/video natively, then javascript may suffice, and not need for plug-ins like flash/silverlight.

But it seems that to surpass this, there are issues more than just HTML5 standards and browser technology. Patents, privacy, policies are the obstacles.

Video

Html5 video

jQuery-webcam

This actually use flash to capture video in the first place, then draw it on a canvas. The stream size is big, each capture image is represented as a 2D array in javascript, size is 320*240 * 4bytes = 307200 bytes, actually including delimiter ";", the saved text file is 600KB each image. It's too big to be practical to send over network.

scriptcam

From its website: "ScriptCam is a popular JQuery plugin to manipulate webcams. Take snapshots, detect movement, colors, QR and barcodes, record videoclips and organize videochats".

This actually use flash to capture video in the first place, then post as text of about 8K bytes, or draw to a img tag. The size is only 8K bytes, so this is practical to send over network. Say in 10 fps, it's 80k/sec. For a 1GB/120min DVD movie, the rate is 140KB/sec. So these 2 are similar.

Although 24 fps is standard to look real, 10 fps is acceptable in quality. 5 fps not.

Audio

libmp3lame-js

Recordmp3js

Examples

Capture audio from browser

Capture both video and audio from browser

More references