A quick introduction to Vuo, showing how to display live webcam video, by Vuo community member @sboas

Tutorial: Vuo for Live Video


Hello. I'm Simon Boas, and today we're going to get started using Vuo for live video.

Vuo lets you create live multimedia compositions with much of the same power that you would get from writing code. But, instead of lines of text, you create your program with visual building blocks.

We'll start with something simple: displaying an image from your computer's webcam.

Before we begin, you'll need to follow the instructions on vuo.org to download and install the Vuo Editor. You'll also need a webcam on your computer.

After you click "Create New Composition", you'll see a white window with a single node. A node is a building block. Some nodes connect to devices, like a mouse or a smartphone. Other nodes make something happen on the screen, such as popping up a window or drawing a sphere. Other nodes control when things happen in your composition. The node already on our canvas tells other nodes to start.

Let's add another. Search the Node Library over here on the left side of the screen for the Receive Live Video node. This node gets video from your computer's built-in webcam. Drag the node onto the canvas.

You'll also need a node to tell Vuo to show on the screen the image from your webcam. Search the library for the node called Render Image to Window. In Vuo, "render" means "make" or "draw".

Now that we have all of the building blocks in place, let's see what happens when we run the composition. Nothing! That's because we haven't yet told Vuo how our individual nodes relate to each other. We need to connect them to each other with cables. Cables allow data to flow through your composition. Data flows out of the ports on the right side of a node and into the ports on the left side of a node. Connect the output port of the Receive Live Video node to the Image input port of the Render Image to Window node by clicking and dragging a cable from the output port to the input port.

But when we run the composition, we still get a blank screen. That's because we need to tell the Receive Live Video node to start receiving video frames. Connect the Fire on Start node to the Receive Live Video node. This tells the node it's connected to to begin running when the composition is started.

Great! Now we get live video when we run our composition.

If you want to see a visualization of the data flowing through your composition, click the Show Events button. "Vuo" is actually the Finnish word for "flow".

This is just an introduction on how to get started manipulating video with Vuo. If you keep learning, you'll be able to add video effects to your compositions, control playback with OSC devices like a smartphone, prototype user interfaces, and so much more.

Tutorial category: