Resource icon

OBS-web v5

Niek

New Member
Niek submitted a new resource:

OBS-web - the easiest way to control OBS remotely

URL: http://obs-web.niek.tv/

I made a new SPA (single-page application) inspired by obs-tablet-remote. OBS-web works well on both desktop and mobile devices, and shows a continuously updating preview of the stream output.

Features:
  • No installation needed, works in any browser (desktop + mobile)
  • Easily switch scenes and start/stop streaming
  • Preview of output, updating continuously
  • Support for remote control...

Read more about this resource...
 

THE R3Y3S

Member
Ahh finally! I loved tablet-remote. Just a question man, is difficoult to let us the possibility to edit layout? For example, i don't want to have all scenes on the screen, but only some.
 

Niek

New Member
Ahh finally! I loved tablet-remote. Just a question man, is difficoult to let us the possibility to edit layout? For example, i don't want to have all scenes on the screen, but only some.
Thanks! For now you can hide scenes from OBS-web by adding (hidden) to their name. More features to come (requests are welcome)!
 

THE R3Y3S

Member
Man, sorry if i continue to disturb you with my request, but can you add full screen mode likes obs-tablet-remote?
About preview, i need a gigabit connection to see it without lag or there's no possibility? Or, for example, with a less resolution can be more flowing?
 

Niek

New Member
HI Niek, is it possible to make it usable offline?
I know it works offline once connected via internet at the start, but what if there's no internet connection at all?
If you want to use it offline, use this link: https://github.com/Niek/obs-web/archive/gh-pages.zip (the latest HTML build) and open index.html in your browser.

Man, sorry if i continue to disturb you with my request, but can you add full screen mode likes obs-tablet-remote?
About preview, i need a gigabit connection to see it without lag or there's no possibility? Or, for example, with a less resolution can be more flowing?
Sure, fullscreen button has been added now.
As for the preview: it's not a real video stream, but a screenshot that is sent over every second. A real stream would be better, but that's not possible at the moment I'm afraid.
 
Would it be possible to create an off-line version that:
  1. Only showed a specific scene.
  2. All that was visible in the page was the scene preview window.
I'd like to be able to create a custom dockable window that pointed to said scene (a preview of the webcam) so the user can dock in OBS and always know what the webcam shows.
 
I was wondering if there was also a totally offline mode where I just point my cell phone camera at my monitor and let my Mac be a TV studio and have the cell phone broadcast what's on the Mac screen to everywhere else on Twitch where there's more outbound bandwidth on my cell phone.
 
I just downloaded the HTML file pack, unzipped it into a directory where I keep a lot of ancillary OBS tools, then created a web panel to load this page. Reason: I use a two-OBS setup, one on one computer to capture and composite, sending the resulting video via NDI to a second, which does the actual encoding and streaming. I also have Websockets installed on the encoder/streamer OBS instance, to which I point your page via the abovementioned web panel in the streaming OBS setup. That way I can make sure the right scenes are selected in case something goes wrong with the Advanced Scene Switcher process I use for most of the automation I do, which includes making sure the NDI ingestion scene is actually visible when I need it to be.

Thanks so much for this. I wanted something super simple yet didn't need something needlessly complete like TouchPortal or LioranBoard (which I really only use with the studio PC). This is perfect for this purpose!
 

Otter

New Member
New version seems to work well, but all of my scenes appear in reverse order from the order in OBS. I am using OBS V27.2.4 with the web-socket 5 plugin.
 
I see there is an option to use icons, but it is unclear how specify which icon to use for each scene.

Does one simply put in the entire path to an icon?

What format is allowed?

.ico?
.jpg?
.png?
.bmp?
?
 

Niek

New Member
New version seems to work well, but all of my scenes appear in reverse order from the order in OBS. I am using OBS V27.2.4 with the web-socket 5 plugin.
Good point - this has been fixed in the latest version.
 

Niek

New Member
I see there is an option to use icons, but it is unclear how specify which icon to use for each scene.

Does one simply put in the entire path to an icon?

What format is allowed?

.ico?
.jpg?
.png?
.bmp?
?
This is injected in the CSS as a background-image value, so basically anything that your browser supports. You can even add data-URLs like this: data:image/png;base64,.....
 

Otter

New Member
Good point - this has been fixed in the latest version.
The latest version seems to have a problem. When I click on a scene, a different scene gets highlighted. I have many scenes (~20) and I am using V27.2.4. I think that the formatting many scene names into multiple rows may be the issue. I tested this with both the web site and a local copy of the HTML package.

I also use the OBS Blade app on iPhone and iPad and it shows all scenes and works properly, so I don't think there is anything wrong with the obs-websockect installation.
 

Niek

New Member
The latest version seems to have a problem. When I click on a scene, a different scene gets highlighted. I have many scenes (~20) and I am using V27.2.4. I think that the formatting many scene names into multiple rows may be the issue. I tested this with both the web site and a local copy of the HTML package.

I also use the OBS Blade app on iPhone and iPad and it shows all scenes and works properly, so I don't think there is anything wrong with the obs-websockect installation.
You are right, there was an issue with the reversing - fixed now. Thanks for the report!
 
Top