niek / obs-web

OBS-web - the easiest way to control OBS remotely

OBS-web

The easiest way to control OBS remotely

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

Download latest build here

---

Screenshot:

Features:

• No installation or extra software is needed, works in any modern browser (desktop + mobile)
• Support for local network and internet control through WSS tunnels
• Easily switch scenes and start/stop streaming and recording
• Support for Studio Mode (preview and program scenes)
• Support for Virtual Camera
• Live view of preview & output, updating 1 fps
• Fullscreen button and wakelock support (keeps the screen on)
• Replay Buffer button
• Easy bookmarking/deeplink by specifying host in URL
• Profile switching support
• Scene Collections switching support
• Custom transition support
• Extra features:
  • Hide scenes that have (hidden) in their name
  • Switch sources in scenes with (switch) in their name visually by thumbnails

---

Requirements:

• OBS v28 or higher - this includes the latest version of the OBS-websocket plugin
  • OBS v27 is also supported, by manually installing the OBS-websocket v5 plugin
  • For older OBS versions, use the OBS-websocket v4 plugin and OBS-web v4 (no longer maintained)
• Enabling the OBS-websocket server in OBS under Tools -> obs-websocket Settings -> Enable WebSocket Server
• Optionally: a tunnel service if you want to control OBS outside your local network, see these instructions

---

Build instructions:

npm ci
npm run dev # or: npm run build

Docker:

docker run --rm -p5000:5000 ghcr.io/niek/obs-web

Contributors ✨

Thanks goes to these wonderful people (emoji key):

verstaerker-583 💻	crazy4groovy 🐛	Isaac Taylor 💻 🤔	darthclide 🐛	Rodrigo Graça 📖	Daniel Feitosa 💻	Arun Woosaree 💻
Aleksey Pivkin 💻 🤔	Nathan Easton 💻	Tristan Smith 🐛	Filip Hanes 💻 🤔 🎨 🐛	TotalInternalReflection 🐛	Alessio Nossa 🤔	tt2468 🤔
donahuetech 💻 🤔	AshwinSatyawan 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

obs-web's Issues

Request: sources?

I'm trying to figure out a way to remotely control a source. Ideally the webpage would only have one button. The source would be in a nested scene so not necessarily a source in the active scene. From what I've seen with the web integrations of obswebsockets it only pulls the active scene.

Is this doable?

Webp Image Compression?

I've found webp image compression to be more efficient on compression and use much less bandwidth. We've made sure we ship it with all OBS 28, and Ubuntu image-formats contains the codec too. iPhone used to be the only real browser limitation but as of like 2020 safari has support.

Thoughts?

[Feature Request] Replay buffer save trigger/notification

I see a button to start and stop the replay buffer, but it would be very nice to have one which allows us to save the buffer, and similarly, something to notify when a save has occurred (in case it is triggered from elsewhere, to confirm that it worked).

Thanks!

[Feature Reqest] UI component to Toggle Show/Hide for sources on active scene

In my OBS setup which I've been using to perform technical product demos in VC calls I use Scenes for defining the layout of sources and toggle them on and off based on what I want to show. This means that I only need 6 or 7 scenes with the 5 sources I make use of instead of 30-40 scenes to accommodate every permutation.

I also use a scene for managing pre-recorded videos which are set to play when un-hidden which I can't trigger unless I make a scene for each video.

Scene collections aren't an answer because there is no UI in the OBS app to select them quickly.

Before v28 and websocket 5 I was using t2t2.github.io/obs-tablet-remote/ which allowed for showing the sources alongside the scenes but this project seems abandoned.

Documentation

Can anyone clarify if there's any kind of documentation for this project!?

Is it possible to adjust or control the sound audio of the scene in the same way as the web_remote_for_OBS?

Is it possible to adjust or control the sound audio of the scene in the same way as the web_remote_for_OBS?

web_remote_for_OBS: https://github.com/dvangennip/web_remote_for_OBS

Web Buttons / Sandwich Broken

I just noticed that on mobile, the sandwich at the top right is not functioning so I can't expand the menu to access those buttons to see the "start streaming" "stop streaming" buttons.

config file

I have a use case where I want the remote user to be able to switch scene but not control the stream or record.
In fact in some cases not even have the image pre-view.

It would be awesome if there was a place in the code like a json file where a bunch of parameters were kept to toggle certain functionality on and off.

Custom Deployment issues - NPM build errors

Niek,

Wonderful web application, but I have a situation where I need to build and deploy this on internal servers. On the internal servers is there a way to customize the interface (remove disconnect, force full screen), hardcode the IP address & port & password within the code itself?

Also when building, I'm having the below issue. Any help would be greatly appreciated. Thank you.

I have tried to use npm i and then run build on both windows and Mac and getting build errors. Specifically on npm i, I get a warning regarding the repository field which I have ignored. But when I run npm run build I get the following output:

fatal: not a git repository (or any of the parent directories): .git
[!] Error: Command failed: git rev-parse --short HEAD
fatal: not a git repository (or any of the parent directories): .git

Error: Command failed: git rev-parse --short HEAD
fatal: not a git repository (or any of the parent directories): .git

at checkExecSyncError (child_process.js:611:11)
at Object.execSync (child_process.js:647:15)
at Object.<anonymous> (/Users/xxxx/Desktop/obs-web-master/rollup.config.js:27:49)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.require.extensions.<computed> [as .js] (/Users/xxxx/Desktop/obs-web-master/node_modules/rollup/dist/shared/loadConfigFile.js:513:20)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1036:19)
at require (internal/modules/cjs/helpers.js:72:18)
at loadConfigFromBundledFile (/Users/xxxx/Desktop/obs-web-master/node_modules/rollup/dist/shared/loadConfigFile.js:521:42)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: rollup -c
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

How does it compare to obs-tablet-remote?

Hi,

I've learned about your project through the "Show HN". So far I am using http://t2t2.github.io/obs-tablet-remote/.

What would you say are the strengths of your project compared to obs-tablet-remote?

And where would you say is it lacking?

I've noticed that you brought up live preview in the obs-tablet-remote bugtracker as well t2t2/obs-tablet-remote#73

Ubuntu 22

I am trying to build this on Ubuntu 22 LTS and it does not work. Using a digital ocean droplet. Any thoughts on how to make this work?

password

How do I specify a password to connect remotely?

Feature request: ability to specify host, port, and password for bookmarking

Hi! I was wondering if it would be possible to specify the host, port, and password in a URL so that navigating to it would automatically log me in to my OBS through the remote.

Included Dockerfile errors during build

Building the container from master with the provided Dockerfile, the process errors during the rollup -c step.
Complains about not having git in the path, of course adding RUN apk --no-cache add git to the Dockerfile solves the issue but I wanted to open an issue regarding it anyways.

If need be I can do a PR to fix it, though it would only really be a single change.

Log below.

tsmith@streambox:~/obs-web$ docker build -t obs-web:dev .
Sending build context to Docker daemon  1.711MB
Step 1/6 : FROM node:16-alpine
 ---> 5521a6fdce5c
Step 2/6 : COPY ./ ./
 ---> 84a33050b24a
Step 3/6 : RUN npm i && npm run build
 ---> Running in a0224fae4fa6
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.

added 210 packages, and audited 211 packages in 14s

26 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.5.0 -> 8.6.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.6.0>
npm notice Run `npm install -g [email protected]` to update!
npm notice

> [email protected] build
> rollup -c

/bin/sh: git: not found
[!] Error: Command failed: git rev-parse --short HEAD
/bin/sh: git: not found

Error: Command failed: git rev-parse --short HEAD
/bin/sh: git: not found

    at checkExecSyncError (node:child_process:828:11)
    at Object.execSync (node:child_process:902:15)
    at Object.<anonymous> (/rollup.config.js:27:84)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.require.extensions.<computed> [as .js] (/node_modules/rollup/dist/shared/loadConfigFile.js:614:20)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (/node_modules/rollup/dist/shared/loadConfigFile.js:622:42)

The command '/bin/sh -c npm i && npm run build' returned a non-zero code: 1

Losing settings on reload especially on iOS Safari

iOS Safari randomly unloads tabs once in the background. When a user accesses such tab, session information is lost eg host and password.

Same happens on reloads. Settings should be implemented as session cookies or in another persistent way.

Button refresh input

Hello, can you add a button that refresh a input? i really need this

Feature request - dynamic scene previews

Hi @Niek,
This is a great option for remote control of OBS, and appears to be one of the few that supports the v5 protocol - well done.

Would it be possible to utilise scene previews (similar to the current "queued" scene preview) as buttons for all the scenes?
To reduce clutter (especially since I have many that are solely for use in other scenes) you could utilise the multiview tag (or even have a text filter, similar to https://github.com/dvangennip/web_remote_for_OBS, which unfortunately appears abandoned).

Thanks!
-IB

Not an issue, but is it possible to send / receive custom variable through the websocket?

I added a Random Scene button and functions (see below).
I want to schedule a livestream and want to start the Random Scene automatically on the OBS Server.
Not sure yet how I'm going to do that but I think I can figure that out.

The idea is that the livestream is going to start automatically and someone else can then (if they want) take over (on a tablet for example) and switch off the Random Scene function. But to do that I think I need to be able to send / receive custom variables through the websocket to tell if "Random Scene" is turned on and to tell it to stop the Random Scene function..

Any idea if this is possible?

Random Scene button implementation:

var statusrandom = false;

 async function RandomScene() {

  if (!statusrandom) {
    console.log('start randomscene' + SetRandom);    
    statusrandom = true;
    StartRandomScene()

  } else {
    console.log('stop randomscene' + SetRandom);
    statusrandom = false;
  }

  }


  async function StartRandomScene() {

    while (true) {

    if (statusrandom) {

    timeoutrandom = (Math.floor(Math.random() * 4) + 10) * 1000;
    console.log('delay set',timeoutrandom);
    await delay(timeoutrandom);
    console.log('delay finished',timeoutrandom);
    GetRandomScene();

    } else {

    break;

    }

    }

  }


  async function GetRandomScene() {
    previousrandom = Math.floor(Math.random() * 4) + 1;
    //await sendCommand('SetCurrentScene', { 'scene-name': 'Cam' + previousrandom });

    await sendCommand('SetPreviewScene', { 'scene-name': 'Cam' + previousrandom });
    await sendCommand('TransitionToProgram');

    console.log('Scene changed!!');

  }

and the button:

            {#if statusrandom}
            <a class="button is-danger is-light" on:click={RandomScene}>Stop Random Scene</a>
            {:else}
            <a class="button is-danger is-light" on:click={RandomScene}>Random Scene</a>
            {/if}

will not work

obs 29 on Mac will not work for websocket

Feature Request: change transition

I use a custom transition when going from/to my intro/outro scene to my live scene, but use the standard fade transition when live to switch between different scenes that have different camera views. I need to be able to select which transition I want to use before executing a scene change. According to the websocket documentation, it should be possible to show the available transitions in the web interface you made and allow that selection to be made - I use the "StreamControl" app on Android and that functionality exists but I want to use another desktop to do the remote controlling of OBS.

OBS-websocket 5.0.0 support

Although I have not looked at code and documentation, I think the project needs some adjustments to be compatible with OBS-websocket 5.0.0 that will be released soon.

The program preview error

Sorry my english is bad. The issue is that the program preview should not be change or update when I toggle on/off any scene sources, but in the the web program preview is changed, but in obs program program preview is maintain last changes after transition.

its working fine when i change to other scenes to preview other scenes or scenes items, but when i change or update scene items of the same scene "onAir" is when the error happens.
The program preview in studio mode, i think should be mantain inmutable untill press transition button

Is it possible to see the audio mixer with realtime level and slider control?

The title says it all, but if not, can you direct me to where I can get api info for getting real time audio level data and control?

Make password entry non-modal

Current implementation as a modal entry is not supported by almost all password managers eg 1password. As each reload triggers the input of the password, this is not only a usability issue but will also make people use weak passwords.

Deep-linkin of host, password?

I wish i could deep link/bookmark a link to obs-web including host, port and password.

Automatic disconnection？

Device1: iPad mini (5th generation)
Browser: safari
Device2: iPhone 12PM
Browser: safari
Recurrence success rate：100%

[Feature Reqest] Show Scene On Top - URL String

Hello. I really like this project, and I also prefer to show the scene on top. Would it be possible to have scene on top as part of the URL, that way I can bookmark it and don't have to keep clicking the button each time I open the link? Maybe something like ?sceneontop=true

Switching Collections doesn't update scenes

Switching to another collection doesn't seem to update the scenes to match.
This is true whether making the switch from obs-web or from OBS

Request: obs-websocket command?

Is it possible somehow to run arbitrary command, supported by obs-websocket protocol?
I mean something like a simple console box and similarly to "/command" option from "Command line tool for obs-websocket"

Thank you in advance!

[Feature Request] Save Replay Button

I love the Start Stop Replay button but we also need a Save Replay Button.

Thanks

How can i solve this?

OBS crashes as soon as I try studio mode on the remote

Also, are there any plans to add the ability to mute and unmute sources that are currently visible?

[Feature request] Add replay buffer button

From the discussions:

Would it be possible to add the replay buffer button to this?

Originally posted by @Cman1239 in #98

Screen share functionality

Hello there,

I have found out today that the web-interface ( the share screen functionality is not working ).

I am applying a screenshot to it my friend:

Thanks in advance for your advisory.

change the profile

Greetings, it would be possible to integrate the option in the panel to be able to change the profile

Grammar on readme

grammatical errors on readme

[Feature Request] Specify password in URL

Enhanced bookmarking/deeplink by allowing password to be specified in URL perhaps using 2nd hash.

For example in App.svelte...

if (document.location.hash !== '') { // Read address from hash address = document.location.hash.slice(1) **password = document.location.hash.slice(2)** await connect() }

npm run dev fail on MacOS High Sierra 10.13.6

obs-web runs nicely on my chromebooks but just tried a clean build on an older Mac that failed the npm run build and/or npm run dev steps with rollup throwing an error:

> rollup -c

/Users/sperok/mvp/obs-web/node_modules/rollup/dist/shared/loadConfigFile.js:494
        ? (await import(url.pathToFileURL(fileName).href)).default
                 ^^^^^^

SyntaxError: Unexpected token import

Steps to reproduce:

• git clone https://github.com/Niek/obs-web.git
• cd obs-web
• npm i
• npm run build

console log:

Speros-iMac:mvp sperok$ git clone https://github.com/Niek/obs-web.git
Cloning into 'obs-web'...
remote: Enumerating objects: 17, done.
remote: Counting objects: 100% (17/17), done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 624 (delta 5), reused 8 (delta 2), pack-reused 607
Receiving objects: 100% (624/624), 1.25 MiB | 3.93 MiB/s, done.
Resolving deltas: 100% (320/320), done.
Speros-iMac:mvp sperok$ cd obs-web
Speros-iMac:obs-web sperok$ npm i
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.

added 583 packages from 236 contributors in 13.885s
[+] no known vulnerabilities found [583 packages audited]

Speros-iMac:obs-web sperok$ npm run build

> [email protected] build /Users/sperok/mvp/obs-web
> rollup -c

/Users/sperok/mvp/obs-web/node_modules/rollup/dist/shared/loadConfigFile.js:494
        ? (await import(url.pathToFileURL(fileName).href)).default
                 ^^^^^^

SyntaxError: Unexpected token import
    at new Script (vm.js:51:7)
    at createScript (vm.js:138:10)
    at Object.runInThisContext (vm.js:199:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sperok/.npm/_logs/2021-03-29T18_33_30_253Z-debug.log
Speros-iMac:obs-web sperok$ 

Support for older browser ex. safari 9-10 ,IE11

Any chance for that?
We have bunch of old ipads that we intend to use with obs web but can't cause safari showing blank page.
Maybe this can help? https://www.tutorialspoint.com/babeljs/index.htm

Thx in advance