# OBS-web



## Niek (Jun 10, 2020)

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.
> 
> ...



Read more about this resource...


----------



## THE R3Y3S (Jun 11, 2020)

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 (Jun 11, 2020)

THE R3Y3S said:


> 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)!


----------



## RichieTee (Jun 12, 2020)

Niek said:


> Niek submitted a new resource:
> 
> OBS-web - the easiest way to control OBS remotely
> 
> ...


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?


----------



## THE R3Y3S (Jun 12, 2020)

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 (Jun 17, 2020)

RichieTee said:


> 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.



THE R3Y3S said:


> 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.


----------



## RichieTee (Jun 18, 2020)

Niek said:


> 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.
> 
> Thanks Niek... Awesome Job


----------



## Niek (Jun 29, 2020)

Niek updated OBS-web with a new update entry:

New features: fullscreen, wakelock, studio mode



> Some new features have been added: fullscreen support, wakelock (currently Chrome Canary only), studio mode. Let me know if you have any comments.
> 
> GitHub link: https://github.com/Niek/obs-web
> Live link: http://obs-web.niek.tv/



Read the rest of this update entry...


----------



## ContentDeveloper (Dec 9, 2020)

Would it be possible to create an off-line version that:

Only showed a specific scene.
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.


----------



## tripletopper (Mar 29, 2021)

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.


----------



## KattPhloxworthy (Dec 23, 2021)

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!


----------



## Niek (Jun 22, 2022)

Niek updated OBS-web with a new update entry:

New version released, many changes



> A new version of OBS-web has been released at https://github.com/Niek/obs-web / http://obs-web.niek.tv/
> 
> Transitions are now supported, as well as profiles, collections, and more.



Read the rest of this update entry...


----------



## Niek (Aug 25, 2022)

Niek updated OBS-web with a new update entry:

OBS-web v5 released



> OBS-web v5 has been released - this version is compatible with obs-websocket v5 which is also bundled in the upcoming OBS v28.
> 
> See: http://obs-web.niek.tv/
> 
> For the archived v4 version, see: http://obs-web.niek.tv/v4/



Read the rest of this update entry...


----------



## Otter (Sep 10, 2022)

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.


----------



## ContentDeveloper (Sep 12, 2022)

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 (Oct 2, 2022)

Otter said:


> 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 (Oct 2, 2022)

ContentDeveloper said:


> 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?
> 
> ...


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 (Oct 2, 2022)

Niek said:


> 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.


----------



## ContentDeveloper (Oct 3, 2022)

Is there a way to run an instance on an internal server, within a firewall?


----------



## Niek (Oct 3, 2022)

Otter said:


> 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!


----------



## Niek (Oct 3, 2022)

ContentDeveloper said:


> Is there a way to run an instance on an internal server, within a firewall?


If you mean "can I access an internal/firewalled OBS instance over the internet": sure, the easiest way is this:

Install ngrok from https://ngrok.com/download
Run: ngrok http 4455
Copy the "forwarding" URL you see, change "https" in "wss" and use that to connect, for example: wss://ID.eu.ngrok.io


----------



## ContentDeveloper (Oct 3, 2022)

Niek said:


> If you mean "can I access an internal/firewalled OBS instance over the internet": sure, the easiest way is this:
> 
> Install ngrok from https://ngrok.com/download
> Run: ngrok http 4455
> Copy the "forwarding" URL you see, change "https" in "wss" and use that to connect, for example: wss://ID.eu.ngrok.io



Actually, I meant can I run an instance of obs-web on my own server, within a firewall?


----------



## Niek (Oct 4, 2022)

ContentDeveloper said:


> Actually, I meant can I run an instance of obs-web on my own server, within a firewall?


You can download the latest build ZIP file of obs-web here, there is no need to run a web server - you can just open index.html and have it running.


----------

