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

This is great @Seb. Thanks for putting this together. In the Cowboy’s experience the user selects 5 players and it plays back a video of each player, as they are each selected. Have you attempted or have you had any success using this method to process 5 videos using P5.js and Seriously.js and composite them in Intuiface?

1 Like

Hi @brian1,

I didn’t try this, mainly by lack of time and proper content. Video resolution and JS scripts should be optimized to process such a multiple video rendering smoothly.
If you do this test, please let us know how it goes

2 Likes

@Seb When we testing we opted to just have pre-baked files based on user selection. That said, we ran into another roadblock. The webcam displays an inverted image, like a mirror and of course this is what you expect from a camera. However, once the image is taken, there needs to be a way to invert it. If you notice, in the Dallas experience the image is inverted before displaying the final photo. This is really apparent when people are wearing shirts with print or numbers on them.

We thought we could achieve this by simply switching the dimensions of the photo to negative as this is how it’s accomplished in Photoshop, but Intuiface doesn’t seem to support this. Any thoughts on how we might reverse the image within Intuiface? This ended up being a dealbreaker for us unfortunately.

Hi @brian1,

There’s currently no built-in function in “invert” an image (= mirror horizontally).

One way that you could try would be to

  • take your snapshot and retrieve the image URI
  • pass this URI to a script, as described in this thread, that would invert it
  • retrieve the converted image and display it / enable to send it via email.
3 Likes