nhtua / greencam Goto Github PK

View Code? Open in Web Editor NEW

193.0 11.0 22.0 5.41 MB

a virtual green backdrop for OBS Studio

License: Apache License 2.0

JavaScript 51.40% HTML 47.30% CSS 1.30%

livestream virtualcamera obs-studio

greencam's Introduction

GreenCam

👈 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!!

How to use GreenCam with OBS Studio

Follow steps below to setup:

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

🚲The easy way
🏍️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

greencam's People

Contributors

Stargazers

Watchers

Forkers

taarskog seskabooom mochaap edurenye gahssi ildaviz ccinc stream-notes juliannevela killusions nutyhw peterkw dimmyjean zetachan17 adambear shahinsorkh 4aiman giflw liu19841108 gmh5225

greencam's Issues

Run on an internal server?

Is there a way to install and operate Greencam from an internal server, and not have to go to https://greencam.netlify.app?

Cannot select webcam source.

I have multiple webcams. Looks like the code shows only the first one (which isn't the right one). Need to be able to pick.

Documentation for running locally

I the file https://github.com/nhtua/greencam/blob/main/docs/how-to-use-browser-in-obs.md

The instructions still point to the remote https://greencam.netlify.app/ site, but I believe you should be pointing to the local player.html file?

Update to instructions for "easy method" ?

Hi there, love this program it's so useful. I'm using the "easy way" to add the virtual background, but my OBS has no fields to enter in crop data for the Window Capture. The best way to change the "crop values is to hold down the "ALT" key as mentioned here:

https://obsproject.com/forum/threads/how-do-i-crop-my-window-capture.59724/

thank you !

Edge Chromium support

I tried running this in Edge Chromium and it does run. But the video is very choppy and as soon as it opens my laptop's fans start blowing pretty hard.

Any chance on support for this browser?

Browser source in OBS not working

When I'm trying to set up "hard way" of greencam and run OBS with --enable-gpu --enable-media-stream params and use Browser source, app is still loading and in cosole are those two errors:

[1031/203957.018223:INFO:CONSOLE(31)] "Something went wrong!", source: https://greencam.netlify.app/app.js (31)
[1031/203957.018351:INFO:CONSOLE(32)] "[object DOMException]", source: https://greencam.netlify.app/app.js (32)

OBS version: 25.0.8-2 (linux)
Browser version: obs-linuxbrowser-bin 0.6.1-1

Customize BodyPix Params

Hey, really awesome project!

It'd be neat if there was an interface on the website to allow users to customize the parameters passed into bodyPix.load, so that they can use a better/worse model depending on what they need. And it'd allow them to mess around with settings to find one that works best.

If you think it's a good idea, I can take a look at making a PR.

Kind regards,

Jan