Live data from Hacker News

HTML5 webcam to canvas stream (Demo + annotated code)

cbrandolino.github.com

1–10 of 26 posts

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

#5
post #2

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

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/

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

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

#6
post #5

Earlier quoted context omitted.

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/

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

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

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

#7
post #6
post #5

Earlier quoted context omitted.

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

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

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

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

#8
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.

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

#9
post #8

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.

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!

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

#10
post #6

Earlier quoted context omitted.

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

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

I know - I am just insane - looks great - thanks for sharing
Post reply on HN