Summary: by using the “High Contrast” plug-in for Chrome, you can easily import a document into OBS with a black background.

Procedure:

I am assuming you have set up your webcam, installed OBS, and you can already see yourself in the OBS window.

If you haven’t set up your webcam, read this post first: https://www.desktoplightboard.com/2020/08/22/setting-up-webcam-obs/

1. First, set up OBS.

Inside OBS, look at the Scene window, and click on the “+”

(You’ll see my other scenes already there …)
If you’ve already built other scenes, you can copy the sources over from that scene.  Go to a different scene, and look at the sources:
Right-click on the “Webcam” – and then select “Copy”
Go back to the Google Shared Doc scene. You’ll see that there are no “sources”.
Right-click in the Sources window, and select “Paste – Reference”
You’ll see “Webcam” added to the Sources, and you’ll see yourself in the main window.

2. Now let’s set up the Google Doc.

In the previous explanation of how to include Google Shared Documents in an OBS window, the suggestion was to change the colors of the document to a black background with white text.

This has a few issues:

  • It actually changes the colors of the document for everyone who sees it; that means that if you are working with a student, the student will see a black document with white text as well.
  • You will need to change the colors *back* to black-text-on-white-background before you can print.  You’ll also need to change it back before you copy/paste into any other documents, because the colors will copy over.

Wouldn’t it be great if there was a way to just change the colors on the browser, without changing the underlying document?

Today is your lucky day.

First, you must be using Chrome. Other browsers may have similar capabilities.

Second, go here, and install the “High Contrast” plug-in for Chrome: https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en

This will install the plug-in, and you’ll see the symbol in the upper right of your Chrome window, ready to activate:

Your “student” doc will look like this:
Click on the plug-in button, and select “inverted color”
Your student doc will change, and look like this:

3. Now, we bring the document into OBS.

Go back to the Sources window. We are going to add a new Source.  Click on the “+”.        
Select “Window Capture” (NOT “Browser”!)
Name your window. This is what will appear in the Sources list.  Click “OK”
Select the window that has the Student Shared Doc. You’ll see a bunch of other stuff – ignore it.
You’ll see the window pop up.  Click “OK”.

The shared doc appears in the main window.

But now we have three problems:

  1. It’s too big, and probably in the wrong place
  2. There’s a lot of unnecessary stuff in window – the menus, etc.  We only want to see the text.
  3. It’s not transparent.

Resize the window by using the red dots in the corner of the rectangle that is around it.  You can move the rectangle by dragging it.

If you accidentally “miss” and lose the red rectangle (it happens) then select the window again in the Source box, and it will reappear.  Size the window so that it fits nicely on your screen.  You can always resize it again later.
It should end up looking something like this.
Now, right-click on the Source “Student Shared Doc”, and select “Filters”. We’re going to add two filters to this source.
Click on the “+”, and select Crop/Pad.
Click “OK”.

This is where your judgement comes in.  You increase the crop on all four sides, until all the white is gone.  You can also increase it on the left and right to reduce the margins.  This is an example of what I got.  Your numbers will likely be slightly different.

Click “Close”.
Right-click on the Shared Doc source again, and add another filter.
Click the “+” sign to add another filter.
This time, select “Luma Key”
Click “OK”.
You’ll see that the background has disappeared.  Perfect.
You now have an included shared Google Doc, with a cropped frame, and a transparent background!

This is what your entire screen should look like:

Note that resizing your Google Shared Doc will result in the cropped frame messing up in OBS.  So, try to avoid doing that.

You can type into the Google shared doc, and it will be reflected in the OBS window. If another participant edits the doc, then that, too, will show up.

When you are done, click on the Plug-in icon (the black/white circle) and disable the High Contrast so that your Chrome browser returns to its normal appearance.

Related Posts