How to make embedded video with circuit playground

In the teacher guide they have a video of a sample student and it has the screen recording and the circuit playground. How would I create this type of video?
Example: Lights and Music - YouTube

Hi @lalamillo,

Yes - that is a cool video. It is helpful to show the app input and the circuit board output. I use Screencastify Chrome extension AND Loom. Both have the options to record your screen as well as an embedded webcam. To achieve the look in the video, you would point the embedded webcam at the circuit board while recording your screen interaction with the app.

Both screen recording apps have free options but I would explore the limitations of each of those pricing options (free) to make sure they meet your needs.

I am sure there are other screen recorders that have these features - these are just the ones I use. Others may reply with other suggestions and/or tools.

Good luck!
~Michelle

Hi @lalamillo - I made that video. Happy to share how I made it happen =)

I used Loom (like @melynn suggested). Loom lets you record your screen and provides the little circular “talking head” widget that records your webcam. You can move the “talking head” anywhere on the screen, which is how I moved it there.

To get the circuit playground to appear in that frame, I kinda had to hack it together. I have an external webcam, and I positioned it so it was above the circuit playground, which I had taped to my desk. I took inspiration from DIY “document cameras” that I saw during the pandemic (like this one)

My setup was basically the same, but with a webcam instead of an iPad. That distinction is important because I needed the screen and the physical interactions, so I couldn’t record them separately - I needed Loom for the screen + webcam, then an external webcam setup like this to look down at the circuit playground.

Definitely tricky to keep this structure going for a long time, but it was great for making these images and the animated gifs that show in some levels.

Hope that helps!
Dan - Code.org Curriculum Writer

Thank you! I tried to use Loom and choose “screen and camera” for video settings. While I am recording I can see my screen and the circle of my camera. But they are on two different windows and when I look at my recording I only see my computer screen and not the circle of my webcam. How do I get them together?

@lalamillo -

I could not get Loom to embed the circle webcam in Maker App either. It appeared easily in the browser but disappears when I move to Maker App. I think I tried all the options. I did get Screencastify to embed the webcam in Maker App.

It was super cool @Dan shared his tips and tricks. Maybe he can give some insight on embedding the webcam with Loom in Maker App.

Good luck!
~Michelle

@melynn @lalamillo Oh! I wonder if it’s because I was using the Loom Desktop App - Download the Loom Desktop App | Loom. That app lets you set a specific window of your screen to record, rather than just the browser window. Maybe try that?