6 ms·

HTML5 webcam to canvas stream (Demo + annotated code)

60 points by cbrandolino_ 14y ago

ionwake 14y ago
the FPS are really low - is there a way to improve that?
- cbrandolino_ 14y ago
  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 14y ago
    i had around 2fps - is the res too high?
    - ionwake 14y ago
      suddenly my fps is totally awesome and fine!Looks good - Being paranoid I wonder if the stream was being uploaded to your site
      - cbrandolino_ 14y ago
        Lol, look at the commit history for the pages branch - the JS didn't change since submission ^^
        ionwake 14y ago
        I know - I am just insane - looks great - thanks for sharing
  - drivebyacct2 14y ago
    Chrome 12? Where do you even get that? I'm on Chrome 23.
deleted 14y ago
[deleted]
program 14y ago
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_ 14y ago
  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!
ionwake 14y ago
what is p2p performance like? what amount of code would have to be written?
- cbrandolino_ 14y ago
  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 http://www.webrtc.org/running-the-demos
franze 14y ago
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/ http://www.backpacker.io/ - an HTML5 mirror
- se85 14y ago
  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 14y ago
    addy osmani has coded https://github.com/addyosmani/getUserMedia.js 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#issuecomment-7926029 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.
    - se85 14y ago
      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 http://github.com/videlalvaro/gifsockets) earlier today, so I guess anything is possible!
- cbrandolino_ 14y ago
  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.
bencevans 14y ago
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 https://github.com/bencevans/MediaStream Just thought it may be of interest ;)
jayniz 14y ago
SLOW CLAP
- cbrandolino_ 14y ago
  Oh you! Can you suggest a gif? ^^
  - cbrandolino_ 14y ago
    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.
Jelte12345 14y ago
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 14y ago
Really cool, keep up the good work. It works in Google Chrome 21.0.1180.89, on Windows 7 just fine.
jlsync 14y ago
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/ http://svideo.herokuapp.com/ and http://svideo.jit.su/ http://svideo.jit.su/ - your image stream is shared on the internet.
- ukc 14y ago
  Looking forward to seeing more projects like these - is the heroku app open source?

60 points by cbrandolino_ 14y ago

ionwake 14y ago

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

cbrandolino_ 14y ago
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 14y ago
  i had around 2fps - is the res too high?
  - ionwake 14y ago
    suddenly my fps is totally awesome and fine!Looks good - Being paranoid I wonder if the stream was being uploaded to your site
    - cbrandolino_ 14y ago
      Lol, look at the commit history for the pages branch - the JS didn't change since submission ^^
      - ionwake 14y ago
        I know - I am just insane - looks great - thanks for sharing
- drivebyacct2 14y ago
  Chrome 12? Where do you even get that? I'm on Chrome 23.

deleted 14y ago

[deleted]

program 14y ago

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_ 14y ago
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!

ionwake 14y ago

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

cbrandolino_ 14y ago
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 http://www.webrtc.org/running-the-demos

franze 14y ago

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/ http://www.backpacker.io/ - an HTML5 mirror

se85 14y ago
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 14y ago
  addy osmani has coded https://github.com/addyosmani/getUserMedia.js 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#issuecomment-7926029 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.
  - se85 14y ago
    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 http://github.com/videlalvaro/gifsockets) earlier today, so I guess anything is possible!
cbrandolino_ 14y ago
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.

bencevans 14y ago

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 https://github.com/bencevans/MediaStream Just thought it may be of interest ;)

jayniz 14y ago

SLOW CLAP

cbrandolino_ 14y ago
Oh you! Can you suggest a gif? ^^
- cbrandolino_ 14y ago
  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.

Jelte12345 14y ago

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 14y ago

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

jlsync 14y ago

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/ http://svideo.herokuapp.com/ and http://svideo.jit.su/ http://svideo.jit.su/ - your image stream is shared on the internet.

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