Coder Social home page Coder Social logo

greencam's Introduction

GreenCam

Netlify Status πŸ‘ˆ Try it here!

πŸŽ‰πŸŽ‰πŸŽ‰ Version 1.0.0 is OUT now

The online version which is hosted on Netlify is always up to date. Latest version is v1.0.0. This new version gives you abitlity to control GreenCam parameters, play with it back and forth until you satisfy with GreenCam's output. Just remember, I picked the best parameters by default for you. Try it first in Chrome for the best result. At the end of home page, you'll get a generated URL, which will hide all other controller, make you a clean output for OBS. You can consume this URL in OBS Browser plugin or open in a new tab.

πŸ‘ Big shout-out to @Shahin Sorkh with their great improvemnet for GreenCam UI. and off course, lot of love to contributors @Christopher Lee @Eduard ReΓ±Γ© Claramunt and @Linus Schlumberger.

What is GreenCam?

GreenCam is a virtual green backdrop for OBS Studio. Yep! You are not crazy. It basically replaces every thing around you by green color. So that you can use the Chroma Key filter in OBS Studio to put yourself in any other video. GreenCam is powered by a machine learning technology called Tensorflow and its public model BodyPix.

I do a lot of live streaming at home. There is a small living room, a lot of messy stuffs that needs to hide, not much spaces (and *budget) to setup a standard professional studio. I found there are some applications, like XSplit VCam or Chroma Cam, which removes/changes the background of your video, but I don't want to pay them since I can do exactly the same thing for FREE!!

Demo GreenCam

How to use GreenCam with OBS Studio

Follow steps below to setup:

You have 2 ways to use GreenCam, with some trading-offs

  1. 🚲The easy way
  2. 🏍️The hard way

Congrats! You have your new webcam with background removed.

Development

Prerequisite

I tested GreenCam with my OBS Studio 26. But you should able to run GreenCam in any version support Browser plugin.

  • OBS Studio with Browser plugin enabled
  • NodeJS Erbium (12 LTS) or later
  • A webcam

Contribute your idea

You need install GreenCam's dependencies first

$ npm install

GreenCam is written in vanilla Javascript, you don't need to build/transpile any thing. Open index.html in your favorite browser and make some change as you wish.

✌️ All Pull Requests are welcome!!

Road-map

It is a hack I did at the midnight, then some errors or incompatible problems will happens in your machine. Also, there are a lot of features that may be included in next version of GreenCam, like:

  • ⬆Top priority, to improve initMLModel() and transformFrame() which is the bottle-neck for video output frame-rate
  • Add an editor that can run in browser to test customized parameters and generate a link to run in OBS
  • Custom background color, video

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.