AR Photobooth with Intuiface - inspired by "Dallas Cowboys' Pose With The Pros"

Since the Dallas Cowboys released their “Pose with the Pros” photobooth video, the topic went “viral” among the signage creatives that we are. We actually got dozens of requests about how to create such an experience within Intuiface.

While Intuiface doesn’t have a built-in “AR photobooth” feature, the good news is that the versatility of Intuiface makes almost anything possible with a bit of reverse engineering of the intent and… creativity :slight_smile:

For our impatient readers, jump to the 3rd part in this post.

1st part: Understand what’s going on in the existing video

Here is what’s going on:

  • Select 5 players out of 6. Note if you don’t select 5, you can’t hit submit. In the end, you’re actually selecting one player who won’t be in the picture. This means you really only have 6 possible combinations.
  • Each time a player is selected, their associated video appears on the right side of the screen.
  • When you hit submit, the 5 selected players appear onscreen. You can see that the order in which the players appear is not the same as when you selected them. This leads us to assume there’s only one video edited in advance for each five player combination, meaning six pre-rendered videos.
  • A webcam feed is then placed behind this pre-rendered video, followed by a countdown for the right pose, and then a snapshot is taken.

And yes, I am talking about videos, and especially videos using the well known green background to apply a chroma key effect. Special mention to @Louie_Smith who has been asking, among others, for this feature a while ago.

So now let’s apply this concept to Intuiface, using some license-free footage found on the web.

2nd part: Reproduce the trick with Intuiface

Although Intuiface supports videos with a transparent background, they’re difficult to generate, use complex codecs, are large, etc…

The movie industry has been using green (or blue) screen for ever, so let’s assume the media producer would give us some regular MP4 videos with such a colored background.

We need to be able to play this video, while removing the “key color”, and to place it on top of the webcam feed.

Since the Video Asset doesn’t have such a feature, we need to use a different asset. The Web Browser Asset will do the job as it enables us to use a local webpage relying on the p5.js and seriously.js JavaScript libraries. Without going too much into the details, these libraries will enable us to apply a chroma key effect on a local video file using shaders and the GPU => it’s good for performance!

This video was my main inspiration for building the web page:

3rd part: Create it in Composer

The result

The next steps

Now it is up to you, the Intuiface community, to take this sample and your creativity, maybe steal some ideas from our Photobooth sample and show us what you can do with this “new feature”. Enjoy!

14 Likes

@Seb My Man… Never fails to impress me!

Finally although not directly inside IF still an easier solution.!

3 Likes

EEEK!! I LOVE this! I’ve been wanting to do something with green screen since seeing a similar project here (watch at the 7:52 mark): https://www.youtube.com/watch?v=ZCnB3gG6YBc

THE JOY IS REAL. :wink:

3 Likes

@megan my hometown!!:partying_face:

1 Like

@seb you are a real magician when it comes to push Intuiface to uncharted territories. Well done and thanks for sharing your R&D process in detail.

2 Likes

@bomee.lafitte I want to go someday! :partying_face:

Very very cool, congrats!! Dozens of clients asked me about this project. Nice to know we can do it in IF

2 Likes

You’re amazing, this is very cool stuff indeed. Will start playing.

1 Like