

HTML5 webcam to canvas stream (Demo + annotated code) - cbrandolino_
http://cbrandolino.github.com/camvas

======
program
I got nice quality on Chrome 21. Substitute the window.requestAnimationFrame
directive with:

    
    
      window.requestAnimationFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); };
      })();
    

and it will work in Opera 12 too.

~~~
cbrandolino_
Wow, I was sure they implemented requestAnimationFrame already!

Anyway, I limited myself to trying out the various vendors' prefixes; this
being mainly an experiment/preview I'd rather keep the code clean than support
non-cutting-edge browsers.

I'll update the paragraph about the compatibility though; thanks for the heads
up!

------
jlsync
Last weekend at #devfestlondon I attempted streaming and sharing these video
streams over socket.io with a node.js backend. Demo is
<http://svideo.herokuapp.com/> and <http://svideo.jit.su/> \- your image
stream is shared on the internet.

~~~
ukc
Looking forward to seeing more projects like these - is the heroku app open
source?

------
bencevans
I wrote a li'l app that does something along the same lines. However it
captures a data uri from the webcam video and sends it via a websocket to a
second user who's also doing the same. It gives you a video chat just without
the audio... <https://github.com/bencevans/MediaStream>

Just thought it may be of interest ;)

------
franze
hi, this is as good a moment as any to promote a little bit a lib i coded some
time ago.

a simple (cross browser) wrapper to make getUserMedia really simple, you call

    
    
      Sinne.getUserVideo(success, error[, options])
      //https://github.com/franzenzenhofer/Sinne
    

and get back a nice HTML5 video element with the webcam as the input

here is a simple demo using the `Sinne` <http://www.backpacker.io/> \- an
HTML5 mirror

~~~
se85
You can't really call it cross browser when it doesn't support browsers that
don't have getUserMedia.

You had me excited for a second there because something like this with a flash
fallback mechanism would be really, really useful.

~~~
franze
addy osmani has coded <https://github.com/addyosmani/getUserMedia.js> which
has a flash fallback, but the thing is that the flash fallback still needs you
to implement a complete different logic then getUserMedia, so it's far from a
perfect solution.

i raised the issue here
[https://github.com/addyosmani/getUserMedia.js/issues/2#issue...](https://github.com/addyosmani/getUserMedia.js/issues/2#issuecomment-7926029)
(and suggested a possible solution), but for this we would need the help of a
flash megamind-ninja.

~~~
se85
That's great, I might actually be able to use this to significantly improve a
certain project I am working on.

It would be really nice to have it using the same API, but yeah, it would be
really tricky to actually pull it off.

Then again, I heard about gifsockets
(<http://github.com/videlalvaro/gifsockets>) earlier today, so I guess
anything is possible!

------
Jelte12345
Strange enough my performance is real crappy (3fps) when I launch it, but when
I switch to another tab and back it's great. This happens on Chrome 21 with
none of the flags enabled.

------
dkroy
Really cool, keep up the good work. It works in Google Chrome 21.0.1180.89, on
Windows 7 just fine.

------
ionwake
the FPS are really low - is there a way to improve that?

~~~
cbrandolino_
I'm afraid it depends on the browser implementation. It works fine on Chrome
12 odd on linux, with all hardware accelerations activated under
chrome://flags/

~~~
ionwake
i had around 2fps - is the res too high?

~~~
ionwake
suddenly my fps is totally awesome and fine!Looks good - Being paranoid I
wonder if the stream was being uploaded to your site

~~~
cbrandolino_
Lol, look at the commit history for the pages branch - the JS didn't change
since submission ^^

~~~
ionwake
I know - I am just insane - looks great - thanks for sharing

------
ionwake
what is p2p performance like? what amount of code would have to be written?

~~~
cbrandolino_
Well, for what concerns the part I focused on (the canvas part) there should
not be any performance issue with p2p.

For WebRTC p2p video streaming in general, it seems promising. At the moment,
though, there's little to no browser support and getting a full system
(there's also a server involved, to initiate the connections) is not automated
or abstracted yet.

For more info, check out this page: <http://www.webrtc.org/running-the-demos>

------
jayniz
SLOW CLAP

~~~
cbrandolino_
Oh you! Can you suggest a gif? ^^

~~~
cbrandolino_
Uh, from the downvotes I gather that was inappropriate. Sorry; I'm completely
new to HN.

Anyway the backstory is that me and jayniz used to work together, and he
usually adds a gif to each of his readme files.

