OBS face tracking with P5 js

GitHub Repository

OBS-face-tracking-with-P5js​

Do you want to track a face in a video to produce some creative effect? This could be easliy done with the latest Nvidia RTX graphics cards.

If you don't have an RTX card, then try this javaScript to add face tracking to OBS.

This example comes from the coding train beginners guide to machine learning. The Coding Train is a great resource for learning creative coding.

The P5 js library in this repo was modified to capture video from the desktop.

Using this project​

To use this project you'll need OBS, the OBS plugin "Move Transistion", a Chrome web browser, and a text editor.
After installing these programs, download this repo and extract the folder.

Add an OBS Scene and Source​

1. Create a Scene named "Scene"
2. Add a Video Capture Device source
3. Add a Scene Filter
4.Add a "Move Source" filter.
5.Open a preview window
- right click on the "Video Capture Device" source
- click "Windowed Projector (Source)"

Enable the OBS WebSocket Server​

1. In the menu bar click Tools --> WebSocket Server Settings
2. Check the box to "Enable WebSocket Server"
3. Click the "Show Connect Info" button
4. copy the password

Edit the index.html file​

Open the index.html file from this repo with a text editor like VS code.
Replace the text ""YOUR-password-GOES-here" with the WebSocket Server password.
Save the change.

open the index.html file in Chrome​

When the page opens choose the preview window as the window to share.

There should now be a connection from the browser to the OBS WebSocket Server.

As the face moves, commands are being sent to move the video source in OBS.

This has been tested on Chrome for MacOS and Edge on Windows 11. Please share if it works for you!

Explore the code in the "Sketch.js" file.