Be right back OBS Overlay - Camgirl.Cloud
OBS Overlay for webcam performersAbout
OBS has become more and more popular among webcam performers and new necessities, new requirements popup like mushrooms after a rainy day.
OBS is a free downloadable software which allows recording, editing and live streaming directly from user’s device. The overlay is a piece of content (image, text, web page) displayed on top of a live stream scene.
Feel free to browse through our available templates, download, test, develop. Post your suggestions, feedback on CGC support forum.
General install of OBS overlays downloaded form our platform:
- Download and extract the content from zip file
- Open OBS, click the + button/icon from Sources manager window
- Select the Browser option from the available options panel
- Select Local file checkbox , browse button and select the html file provided
- Set up the width and height of the overlay (it depends on what the overlay is showing)
- Select the Refresh checkbox
- Tweak the position of the installed overlay by dragging the red lines or corners
- To trigger overlay visibility use the eye icon to show or hide
How to use
Because this OBS overlay runs local resources (from your laptop/pc) the install process is simple and doesn't need hosted images (unless you want to use images from internet)
Step One
1. In Sources management section click the plus icon +
2. Select the Browser option
Step Two
1. Click the check-box for the Local file option
*. Optional, name the new source. If you run multiple sources, its better to keep track of them
2. Browse for downloaded file in your desktop/laptop and select the OBS overlay (CGC_obs_overlay_winter_brb.html)
3. Set the width and height of the overlay as you see fit. On my screenshot I wanted to cover the entire screen so I keep edit those values until it looks as I want
4. When you're done, click the OK button and test the overlay
If you need to make changes, simply click on cog icon and settings for selected source will show up.
How to Edit via OBS
Having difficulties in manually edit the OBS source markup? Well, OBS's Interact option comes to the rescue.
This Interact feature allows you to interact with a browser page like click events or hover interactions... a nice feature.
Usually web pages are not editable from front-end but I've added the contenteditable="true" to all editable text boxes and also a way to change the default image with your own
Please note that these changes are not permanent and they will not be permanently saved
How to use the Interact OBS feature?
Right-click on Browser (in my case) and select the Interact option
Another window will showup which allows me to interact with Browser source via OBS interface. As mentioned above, some coding was needed to make the front-end html page editable but none of the editing will be permanent. (If you refresh the web page, close OBS or refresh the browser, your editing will be lost)
Please note that all editing via Interact window are in real time. If you already have a live stream going on and edit the OBS overlay, all changes will be visible (live stream) on your broadcasting session
Change text elements and image is possible but again, not permanent. To change the text, simply click it and type your own text. Change the default image. Click once, upload (swap) the new one and here you go. All done via OBS Interact window.
I strongly recommend that your image's width and height to be the same, a squared-like shape (300x300 , 400x400 , 1024x1024, ...)
How to manually edit the source code
Well, if you want to dig into the source code, feel free to do so and here's how you can do some minor changes even if no coding skills can back you up
Any WYSIWYG editor will do but
Adobe Dreamweaver - can help with HTML/CSS markup editing program. It is a commercial/trial downloadable program, popular among Windows users
Notepad++ - helps with HTML/CSS markup editing. It is a free downloadable program, popular among Windows users
Atom, Brackets, Komodo Edit, jEdit, Vim, TextMate, Sublime Text, BBEdit - helps with HTML/CSS markup editing. Some of this editors are free, some are commercial/trial. Editors for MAC users
No software? Try the Source Editor tool
Edit CSS markup
CSS markup holds all the CSS animation and visual enhancement of the HTML markup.
If you want to change the main background image, in css markup code, look for this line:
and change only the url path between round parentheses (also referred by some as round brackets) --- I'm from Romania, brackets for me are only the squared ones :D [ ]
Change the flakes images (snow effect); uses 3 images all setup as background in the same CSS, snow1.png , snow2.png and snow3.png .
Edit HTML markup
From HTML markup sorce you can change the side rounded default image and text-based content
Image HTML markup:
Keep the image shape square-like between 300px/300px , 500px/500px , 1000px/1000px ... (basically width and height to have same value), otherwise round image will become more oval
All editable text-based content can be changed but keep in mind that viewers can't click on your live broadcast to access links or images (obviously)...