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.

7 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
  2. thanks for this selfless act, and sharing your secret to your audience.School website design uk

    ReplyDelete
  3. Awesome..You have clearly explained …Its very useful for me to know about new things..Keep on blogging..
    Cloud Computing Online Training | Cloud Computing Online Certification | Learn Cloud Computing Course

    ReplyDelete
  4. Thanks for sharing, nice post! Post really provice useful information!

    Giaonhan247 chuyên dịch vụ vận chuyển hàng đi mỹ cũng như dịch vụ ship hàng mỹ từ dịch vụ nhận mua hộ hàng mỹ từ trang ebay vn cùng với dịch vụ mua hàng amazon về VN uy tín, giá rẻ.

    ReplyDelete