war3observer is a tool that keeps a local webpage updated with data from the Warcraft III observer API. This can be used for streaming tools such as OBS to render the data on stream.
It runs a local websocket server which sends a message with the entire state periodically. It uses war3structs to parse the state from the memory mapped file. A web client written in mithril.js is included to render the state.
- Download the latest release
- Extract it somewhere
- In OBS, add a browser source to your scene, tick
Local file
and select any of the.html
files in theclient
folder you extracted - Set the width and height to 1920x1080 for 16:9, 1440x1080 for 4:3, scale it in OBS as needed
- For best performance (optional):
- Use existing sources between scenes (one file = one source)
- To avoid them running in the background regardless of whether you're using them or not, keep the sources in a separate scene collection OR enable
Shutdown source when not visible
on them
- Now you can run
war3observer.exe
whenever you want the overlay to start updating
You generally shouldn't, but if you experience the overlay not updating properly, you can try any of these:
- Close both Warcraft III and
war3observer.exe
and then restart them in that order - Refresh the browser cache in OBS (
Refresh cache of current page
on the source)
To update to the latest version you can download the latest release and extract the contents to wherever you have the previous version installed (replacing files). If you are using the included client you will have to clear the browser cache in OBS as well.
For advanced options you can create a file called war3observer.config.json
in the same directory as war3observer.exe
. Example config file:
{
"port": 8657,
"clientSettings": {
"useTeamColors": true,
"showHeroItems": false,
"reversePlayerOrder": true
}
}
war3observer.exe
also comes with some command-line options, run it with --help
for details.
It's possible to control the overlay beyond OBS scenes with an external program. Send a JSON message to the server with top-level action
as "setClientSettings"
and content
as an object of settings to change. All listening clients will update accordingly.
- Have Python 3, node, and Warcraft III installed
git clone https://github.com/sides/war3observer.git
cd war3observer
pip install -r requirements.txt -r requirements-dev.txt
python -m war3observer
to start the servercd client
npm install
npm run start
to watch for changes and build the client (rerun this whenever a new view is added)mkdir dist\icons
python ..\tools\extract_icons.py <wc3 installation dir> .\dist\icons
if you want to include icons
If you're interested in making personalized views and you want to make use of the included client's environment, you can use the war3observer-client-tools
package on npm instead of cloning the repo.
Note: If you only need to edit a view's settings and/or add custom CSS, you can just copy+paste one of the included views and edit its HTML. Add custom CSS in
<style>
tags or link to one; changeapp.settings
before the call toapp.boot()
.
Create a directory for your project that contains these files:
package.json
{
"private": true,
"scripts": {
"start": "webpack -d --watch",
"build": "webpack -p"
}
}
webpack.config.js
const config = require('war3observer-client-tools');
module.exports = config;
views/<your view>/app.js
import App from 'war3observer-client-tools/common/App';
const app = new App();
export { app };
Now you can npm install --save-dev war3observer-client-tools
and npm run build
and it will create your view in dist
.