OmniPic

The process works by having each user take a photo using a similar color background. Each user can then choose the layer they want their photo to be on, and by clicking the "OMNIPIC IT" button, omnipic will flatten the photos over each other in the specified order.

Making OmniPic

Our chroma keying system operates by taking a snapshot of your webcam and using the background as a chroma key for other photos to be layered behind it. A green screen or other solid color background works best. No background may be used, to varying results. Using the arbitrary background color, omnipic compares color values of all other pixels in the image to see if they match the chroma key, and makes them transparent if they do. We are then left with a cutout image of the user and no background, behind which other users can be rendered behind the cutout as a new background.

The cool part about this project is that it's mostly done using pure javascript served to your browser, no APIs or plugins were used for this hack! This is thanks to the new RTC (Real Time Communications) standards being implemented by the IEEE in order to define a new standard of webcam/audio communication after years of mismatches between Adobe Flash and various other plugins.

The Future

In the future we would like to make omnipic a full fledged photobooth suite on the web, including color correction tools, airbrushing, and photo add-ons such as stickers and writable text to make photos taken on omnipic truly personal. We would also like to include a live video preview of the background for each user so that positioning is much more intuitive.

Built With

Share this project:

Updates

posted an update

DevPost doesn't let me edit this entry even though I'm part of the team, so here's some more info about the project!

The process works by having each user take a photo using a similar color background. Each user can then choose the layer they want their photo to be on, and by clicking the "OMNIPIC IT" button, omnipic will flatten the photos over each other in the specified order.

Our chroma keying system operates by taking a snapshot of your webcam and using the background as a chroma key for other photos to be layered behind it. A green screen or other solid color background works best. No background may be used, to varying results. Using the arbitrary background color, omnipic compares color values of all other pixels in the image to see if they match the chroma key, and makes them transparent if they do. We are then left with a cutout image of the user and no background, behind which other users can be rendered behind the cutout as a new background.

The cool part about this project is that it's mostly done using pure javascript served to your browser, no APIs or plugins were used for this hack! This is thanks to the new RTC (Real Time Communications) standards being implemented by the IEEE in order to define a new standard of webcam/audio communication after years of mismatches between Adobe Flash and various other plugins.

In the future we would like to make omnipic a full fledged photobooth suite on the web, including color correction tools, airbrushing, and photo add-ons such as stickers and writable text to make photos taken on omnipic truly personal. We would also like to include a live video preview of the background for each user so that positioning is much more intuitive.

Log in or sign up for Devpost to join the conversation.