Skip to content
View in the app

A better way to browse. Learn more.

LCPDFR.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Streamer's Overlay 1.0.0

(0 reviews)

2 Screenshots

**UPDATE**

I've recently revisited this popular overlay!  I've edited the font, as well as some of the underlying code to streamline it.  You can find the updated code on the github link below.

 

Thanks for all the love and support!

---

 

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

 

 

 

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!

 

 

 

 

 

Edited by Hightower Designs
Updated description


Short Description

works with popular streaming software.

User Feedback

Recommended Comments

Deactivated Member

Deactivated

is there a way to make it appear in game?

Hightower Designs

Members Author

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?

 

Nabuda

Members

(edited)

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

Edited by Nabuda

Hightower Designs

Members Author

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.

Nabuda

Members

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

Benjamin255

Members

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

Hightower Designs

Members Author

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.

Benjamin255

Members

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

Hightower Designs

Members Author

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.

 

Benjamin255

Members

12 hours ago, Hightower Designs said:

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

 

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

Hightower Designs

Members Author

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.

Create an account or sign in to comment

Latest Mods

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.