Create a video mixer that you can run on a Mac and control with a phone or tablet.
Notes
See the composition gallery post for download and additional instructions.
Transcript
S: Hi, I’m Steve…
J: … and I’m Jaymie, and we’re going to show you how to make your own video mixer that you can control with your phone or tablet.
S: We’ll be using Vuo to create the mixer and TouchOSC to add an interface that you can control from an iPhone, iPad, or Android device.
J: First, download the two pieces you’ll need as a starting point: the video mixer composition for Vuo and the interface layout for TouchOSC. (The links are in the notes for this video.) The video mixer composition for Vuo is what does all the heavy lifting of playing videos and adding effects, and it runs on your Mac. The interface layout for TouchOSC runs on your phone or tablet and sends messages to your Mac, like a remote control. First we’ll show you how to put these two pieces together into a basic mixer, and then we’ll show you how to customize it.
S: TouchOSC needs to talk to Vuo through a network connection. Since many wifi networks block this kind of communication, we recommend setting up your own network. On your Mac, click on the network toolbar icon, go to “Create Network”, and create one. On your phone or tablet, connect to the network you just created.
J: Next, set up the TouchOSC layout on your phone or tablet, like this: Open up the layout on your Mac and click Sync. Run the TouchOSC app on your device. Tap on the current layout, then tap Add, and tap on your computer name. The video mixer layout now shows up in the list. Tap on it to make it the active layout.
S: Now, set up the connection between TouchOSC and Vuo, like this: On your Mac, run the Vuo composition. In the TouchOSC app, go to the OSC Connection. Tap on “Vuo OSC Server” to connect TouchOSC to the Vuo composition. Tap “Done” to go back to the layout. The setup’s all done, so now let’s mix some video.
J: Our video mixer has controls for mixing two videos. This fader crossfades between them. These faders control each one’s exposure. And these faders apply other effects. These buttons pick between the clips shown in the window here. The clips are loaded from folders called “clips-foreground” and “clips-background”, so if you want to change the clips, just put different videos in those folders.
S: You can customize the video mixer to your liking. First, I’ll show you how it works. This is the visual source code for the mixer. The magenta part loads the video clips and plays them. The violet part applies effects and crossfades. The green part down here shows the previews of the clips. The yellow parts receive the messages from TouchOSC and route them around the composition.
J: If you want to change the effects, you can play with these violet nodes. I can change these colors on the color mapping effect by double-clicking and editing them on the Map Image Colors node. I can change the look of the ripple effect by messing with the Ripple Image node’s wavelength. I can change the color offset so the blue offsets diagonally by taking a cable from the TouchOSC messages to feed the data into a horizontal and vertical offset, and then feeding that into the blue offset port of the Offset Image RGB Channels node.
S: You can also put in different effects. Instead of Map Image Colors, I’ll put in a kaleidoscope effect. I’ll add the Make Kaleidoscope Image node and reroute the cables. Now the Make Kaleidoscope Image node is getting a stream of images from the background video through this cable, and it’s applying the kaleidoscope effect and sending them on down the line through this cable. This yellow cable is bringing in messages from one of the effects sliders in TouchOSC. Those messages are numbers between 0 and 1, so I’ll scale them so they make the number of reflective sides in the kaleidoscope range between 0 and 12. And now the effects slider can make a kaleidoscope effect.
J: Another way you can customize the composition is to change the input source from video clips to a live camera feed. I’ll do that for the foreground video. Instead of this Play Movie node, I’ll put in a Receive Live Video node, connect a cable to make it start grabbing video when the composition starts, and another cable to send the video down the effects chain. Now I can mix the clips with the live video.
S: And there’s a lot more you can do… For example, you can Add more widgets to the controller interface… or Add visual effects that react to audio… or make the output feed into Art-Net devices.
J: So that’s a do-it-yourself video mixer made with Vuo and TouchOSC. We hope you’ll try it out!
