Thursday, May 24, 2012

.getUserMedia puzzle game

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:
Michal Budzynski at Web Rebels 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.

4 comments:

  1. That is amazing, I am loving what you can do with the HTML5 Canvas element. I knew about the canvas for a while now, but I have only just started to use it. I would love to have a live video feed Website which uses the canvas element rather than Flash and by the looks of it we could do this soon, if not now. :D

    Check out my Blog where I showcase what I have done every day... myhtmlcanvas.co.uk

    ReplyDelete
    Replies
    1. Thanks! I'm working on a crazy game with getUserMedia now, I hope I'll be able to announce something more around late May. Thanks for the link, added it to my RSS.

      Delete