Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML5 webcam to canvas stream (Demo + annotated code)

cbrandolino.github.com

Post reply on HN
Print view View original

11–20 of 26 posts

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#12

Post by 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

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#13

Post by 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 ;)

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#15

Post by se85 »

franze wrote: post #12

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

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.

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#16

Post by cbrandolino_ »

franze wrote: post #12

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

Nice lib!

I was thinking of libifying my thingy, in a quite minimalistic way (at a minumum, the user would just pass two functions, one "update" and one "draw", which would receive a the current frame and, in the first case, the delta time).

This way you could just get freaky with the canvas effects and composing capabilities and stop caring about the low-level stuff.

I see you know your way around building nice, clean APIs; could you suggest me article/book about it? I'm kind of a newbie to that sort of things.

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#17

Post by cbrandolino_ »

ionwake wrote: post #11

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

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

Re: HTML5 webcam to canvas stream (Demo + annotated code)

#19

Post by franze »

se85 wrote: post #15
franze wrote: post #12

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

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.

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... (and suggested a possible solution), but for this we would need the help of a flash megamind-ninja.

Post reply on HN