meeting-timeline
Into this:
or this
and then into this:
I love keeping meetings on schedule. It's important, now with us working from home, more than ever, that use our time wisely.
Over the last few months, I've been learning Node and came across the PixiJS HTML5 Game Engine. With PixiJS, I finally found the technology that I needed to create my meeting timeline concept that merges in the idea of the SpaceX Countdown Timer, with a meeting agenda that I've been wanting to do for years.
Something was still missing, I wasn't able to figure out how to splice into my camera feed, until September 4th, then I saw I prerecorded myself in video meetings for a week (and nobody knew), specifically at the 1-minute mark where he talks about Virtual Cameras. Ah ha! Now all of the pieces have come together to allow me to do my SpaceX Meeting Timeline!
Education
I leveraged this Udemy Course very heavily to turn my basic app into a proper NodeJS app
Setup
Prework
You basically need to follow these instructions from ohnboiles/obs-mac-virtualcam, I've broken out these steps below:
- Download OBS for Mac - use v26.1 to get Virtual Camera built in (no extra extension needed)
- For MS Teams, remove the signature from the application so the Virtual Camera will show up
# everything executed with sudo
codesign --remove-signature "/Applications/Skype.app"
codesign --remove-signature "/Applications/Skype.app/Contents/Frameworks/Skype Helper (Renderer).app"
codesign --remove-signature "/Applications/Skype.app/Contents/Frameworks/Skype Helper (GPU).app"
codesign --remove-signature "/Applications/Skype.app/Contents/Frameworks/Skype Helper (Plugin).app"
codesign --remove-signature "/Applications/Skype.app/Contents/Frameworks/Skype Helper.app"
codesign --remove-signature "/Applications/Microsoft Teams.app"
codesign --remove-signature "/Applications/Microsoft Teams.app/Contents/Frameworks/Microsoft Teams Helper.app"
codesign --remove-signature "/Applications/Microsoft Teams.app/Contents/Frameworks/Microsoft Teams Helper (GPU).app"
codesign --remove-signature "/Applications/Microsoft Teams.app/Contents/Frameworks/Microsoft Teams Helper (Plugin).app"
codesign --remove-signature "/Applications/Microsoft Teams.app/Contents/Frameworks/Microsoft Teams Helper (Renderer).app"
Setup OBS
Once you have everything installed, you will need to configure OBS as such:
- Add a new Scene
- Add your Webcam
- Add a Window Capture (make sure this is on top)
- Right-click on your Window Capture and select "Filters"
- Under "Effect Filters" select "Chroma Key"
- Select "Key Color Type" of "Blue" since this code was written for that color
- Adjust the "Similarity" slider until you see something similar to the gray area shown below
- Start the Virtual Camera within OBS so other apps can detect it
- Load up Microsoft Teams and select this new camera option
To run the timeline code
Note: This requires Redis to be running on your laptop as it's used to store all meeting data
git clone <this repo>
cd <this repo's directory you cloned>
npm install
node start.js
Aside: I prefer to use nodemon
so that any edit reloads my Node app.
Then navigate to http://localhost:3000 on your browser.
To run using Docker
This will start both the NodeJS app and Redis in Docker containers
git clone <this repo>
cd <this repo's directory you cloned>
npm install
docker build -t meeting-timeline .
docker-compose up