...

View Full Version : How to do streaming video in the shape of a puzzle piece



CoderInTraining
03-21-2011, 08:01 PM
Hello,
I am developing a project based on the OpenTok API (http://www.tokbox.com/opentok/features).
Its no where near completed yet, but the basic idea behind it is to put together a web video chat conference "room", with each user's video stream shaped like a puzzle piece.

I'm trying to figure out how to do this, so I thought I'd post here and see if anyone has any suggestions. Someone at the OpenTok discussion group suggested overlaying the video stream with a transparent puzzle piece image, using CSS absolute positioning, and while this is an interesting thought, I foresaw a problem in that the part of the video stream that did not fit inside the puzzle piece would still be visible, and so how would I get rid of that excess?

Any ideas, suggestions, or the like are welcome.

Thanks in advance.

eu4ria
03-24-2011, 10:45 PM
I am not familiar with OpenTok, but yes the logical way would be display your video then over the top place a puzzle piece that will act as a mask to your video. If you know the sizes of the video then you should be able to design your piece such that it will always fit the video.

CoderInTraining
03-24-2011, 11:08 PM
I am not familiar with OpenTok, but yes the logical way would be display your video then over the top place a puzzle piece that will act as a mask to your video. If you know the sizes of the video then you should be able to design your piece such that it will always fit the video.
Right. I thought of the mask approach, however am not sure what I can use to implement it. Any ideas?

Thanks for the reply.

eu4ria
03-29-2011, 05:10 PM
I would imagine an absolute positioned .png image would be pretty simple, then have the video positioned below it. Below in terms of screen z-depth, not below as in lower part of the screen :)

CoderInTraining
03-30-2011, 01:12 AM
I would imagine an absolute positioned .png image would be pretty simple, then have the video positioned below it. Below in terms of screen z-depth, not below as in lower part of the screen :)
Well, that's the same thing an OpenTok person suggested at their Google Group page. But wouldn't you still be able to see the part of the video that is not under the puzzle piece image? How do you cancel out the excess?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum