Jump to content

Streamer's Overlay 1.0.0

   (0 reviews)

2 Screenshots

About This File

This is my Xion(pronounced [ˈzīən]; similar to the Mountain in Israel with the name Zion)  Chase-Cam.  

 

This is intended to be used with your streaming/recording software as an overlay.  Simply put, it's an html file with some JavaScript and some HTML that plays a timer in the upper right corner of your stream/video.  It doesn't beep or anything.  It's just a visual.

 

To change the icon, you can simply encode it in Base64 and copy/paste it into the document.  I'll let you figure out how.

 

To configure it, there's a readme.  But basically, you put in the information you want on it.  Me, I used my agency name, first initial, last name, and callsign (Since I used this for my FiveM streams).  But this could easily be used for LSPDFR as well.

 

It's open source, you are welcome to fork it on github and make your own creations from it.  

 

github link:  https://github.com/zhivotnoya/XION-ChaseCam

 

I haven't updated it in a bit, but was planning on offering a recurring beep into the code.  Everything is in one file (the html file) for ease of editing and just putting it somewhere on your computer to reference it in your streaming software

 

 For Support:  Please visit my discord *below* 

https://discord.gg/5Xn4JZn

 

Installation:

It's quite simple.  Extract the file.

Edit the file to change your information (using the included readme to reference what to look for).

Store the file in a safe place.

Link your streaming/recording software to it as a "Browser Source". 

And lastly, enjoy!

 

 

 

 

 




User Feedback

Recommended Comments

possibly.  I'll have to do it as an HTML overlay or something.  Lemme get a few other projects out of the way and I'll let you know. 🙂  Thanks for the idea!

On 1/23/2020 at 5:52 AM, skyred50 said:

is there a way to make it appear in game?

 

Share this comment


Link to comment
Share on other sites

I can't do it every time i post the link in the OBS it reset's

Edited by Nabuda

Share this comment


Link to comment
Share on other sites
On 1/27/2020 at 12:27 PM, Nabuda said:

I can't do it every time i post the link in the OBS it reset's

image.thumb.png.cbe98f977758123738d9d6940cd93797.png

Are you doing it as a local file?  don't mind the custom css, that's something I use locally.  In OBS choose "Browser source" as the scene source.

Share this comment


Link to comment
Share on other sites
On 1/29/2020 at 7:35 AM, Hightower Designs said:

image.thumb.png.cbe98f977758123738d9d6940cd93797.png

Are you doing it as a local file?  don't mind the custom css, that's something I use locally.  In OBS choose "Browser source" as the scene source.

The OBS thing works but every time i paste it on OBS the information that i made for my own resets to default

Share this comment


Link to comment
Share on other sites

How to change the picture size? But when I use a large size png image, it still shows a small size🙂

Share this comment


Link to comment
Share on other sites
On 2/4/2020 at 5:59 AM, CC2020 said:

How to change the picture size? But when I use a large size png image, it still shows a small size🙂

In the HTML file itself, find the img tag and change the width and height to your liking.

Share this comment


Link to comment
Share on other sites
6 hours ago, Hightower Designs said:

在HTML文件本身中,找到img标签,然后根据自己的喜好更改宽度和高度。

When I try to change the img height and width, the picture size changes, but it also causes the text box to become larger

408182989_.PNG.29249cdb4387d0842094e91ce478df6e.PNG

Share this comment


Link to comment
Share on other sites

The image will change the size of the text box as it's a dynamic div.  @CC2020  If the image is bigger than the surrounding text, the box size will change.  You could change the background transparency of the textbox to 0.0 (completely clear) if that's an issue for you.  I put in the transparent background because in some scenes, the text blends with the images underneath.

 

Share this comment


Link to comment
Share on other sites
12 hours ago, Hightower Designs said:

图片是动态div,因此会更改文本框的大小。  @ CC2020   如果图像大于周围的文本,则框的大小将更改。如果您遇到问题,可以将文本框的背景透明度更改为0.0(完全清除)。我放入透明背景,因为在某些场景中,文本与下面的图像融合在一起。

 

Except for OBS, can it be used in Adobe Premiere Pro? ? ?

Share this comment


Link to comment
Share on other sites
12 hours ago, CC2020 said:

Except for OBS, can it be used in Adobe Premiere Pro? ? ?

Not sure.  Whatever you record with, if it accepts html "browser sources" then it can be used there.  But I actively don't know, so you'll have to do an Internet search for your answer.  If you need further help, please request it on my discord.

Share this comment


Link to comment
Share on other sites

Think before you post. Toxic behavior will not be tolerated. Unconstructive, toxic or unnecessarily sarcastic comments will be removed and warnings issued.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...