Maker.io main logo

How to Use Video Greenscreen in MakeCode

2019-04-04 | By Adafruit Industries

License: See Original Project

Courtesy of Adafruit

Guide by John Park

For creating video tutorials and livestreaming with MakeCode, there's a simple, yet effective way to display video inside of your session. This mini guide will show you how!

1_Blocks

 

The first method is to pick a connected USB camera as your background.

2_makecode

3_makecode

4_makecode 

USB Camera Method

Inside of MakeCode, pick the gear icon and then click the Green Screen On menu item.

Choose one of your USB video cameras from the list.

Your video camera will stream inside of the browser as a background behind all of the MakeCode graphical elements!

You can also choose to use a green background that can be knocked out with a chroma key setting in your capture or livestream software.

5_Green-Background

6_Green-Background

7_Chroma-key

8_Chroma-key

9_Blocks

Chromakey Method

From the same menu item, pick the Green background choice.

This will turn the background of MakeCode to pure green.

This will show up in your layered capture or streaming software as a layer that can be chroma keyed.

Pick the chroma key option. Your software may default to pure green or pure blue (less common) and you should also have choices to pick a specific alternate color and adjust the threshold.

Now, you can switch out your layers dynamically as you normally would in your capture or streaming application.

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.