During my last talks about Blysk I presented couple of new HTML5 features that are quite new, and were implemented only in Flash before. Access to the webcam was one of the most interesting.
VideoPuzzle on WebRebels:
And since learning by playing is always fun, I made a simple puzzle game that uses webcam to display realtime video on the puzzles. To run it you need Chrome Canary with Media Stream enabled.
I was asked to publish it somewhere so you can find the source code on Github:
.getUserMedia() VideoPuzzle game
or try it now here
Why doesn't it work in Opera with .getUserMedia() support?
I was superlazy writing the code (it took me less than hour, it was just techdemo, not the regular, production code). And the easiest way to determine if the pieces was dropped in the right place was to check if the previously added 'data-order' values of the DOM elements (canvas - piece & div - place in which you put the piece) are equal. I took the second element from event.target argument of mouseup event, and since dragged piece has 'pointer-events' set to 'none'. It should allow the event to go through the piece. Not in Opera. I don't know if it's Opera's or all the other vendors, there's nothing in spec about that.