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


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

    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.

  2. thanks for this selfless act, and sharing your secret to your audience.School website design uk

  3. Thanks For Sharing, Such A Awesome Article. I mentioned some of your points here
    Why We Celebrate Columbus Day THANKS Columbus Day Is A Federal Holiday

  4. Marvelous offer decent to peruse this extremely supportive data for me I am exceptionally cheerful to part of this network continue sharing you may likewise like this
    instagram story downloader online

  5. 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

  6. 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ẻ.

  7. Never too late to start learning at Salesforce Training in Australia even though you don't have any programming knowledge you can excell in Salesforce Training in London United Kingdom (UK) because it is all about your customers, so this time find the best Salesforce Training in Europe. This way we will learn Salesforce CRM.

  8. It's a fantastic combination of creativity and time-saving. Put your time and money where it counts. You already spend too much time in front of the computer; adding more time to your assignment is not a good idea. Contact any online programming help service provider to complete your work from the comfort of your own home.