EU Highlights - Setting up web server based highlights tool

Share your ZH-related videos, player streams, gifs, and more!
Post Reply
User avatar
Rigensis
Posts: 888
Joined: Sat May 24, 2014 12:44 pm
Battle.net Name: Rigensis
Battle.net Char Code: 955
Battle.net Server: EU
Location: rigaLatvia.
Contact:

EU Highlights - Setting up web server based highlights tool

Post by Rigensis » Tue Oct 17, 2017 12:37 am

The short version of EU Highlights:
1) There is a web server running locally with web pages for showing the last saved highlight and showing all highlights in highlights directory.
2) Obs's Replay buffer runs and sends highlight videos to a directory after a hotkey is pressed.
3) Then streamer changes to the scene with a "BrowserSource" and then switches back to main scene.


The long version:

0) Grab USB web server with the web page files here:
https://drive.google.com/file/d/0B8c_iZ ... sp=sharing
(copy files from ../root/zhhighlights to a local web server you run if you dont trust the one in this archive).

1) Web Server
Any locally run one will do.
Personally I use this one: http://www.usbwebserver.net/en/

2) Web pages
You have a simple html which calls a simple js file which calls a simple php. The Php file reads the highlight directory for files and then sends file names back. The js file then does its js magic making highlights to appear in the html file. Magic!

3) OBS settings
The recording path (Settings > Output > Recording > Recording Path) must be same as the path to the directory from where the web page takes highlights. (I have - D:\SitesHighlights\root\zhhighlights\video)

The way the web page is written - the recording format (Settings > Output > Recording > Recording Format) must be mp4. And The "Enable Replay Buffer" checkbox should be checked.

Replay buffer (Settings > Output > Recording > Replay Buffer > Maximum Replay Time(Seconds)) setting allows to change how short or long the saved highlight will. 7 seconds for me.

A filename format (Settings > Advanced > Recording) can be whatever as long as each highlight has unique one. I have "%CCYY-%MM-%DD %hh-%mm-%ss" in filename format - this way the latest highlight created will be at the end of files - which then allows to easily grab it for the web page. And "Replay " in prefix.

4) Scenes&Hotkeys
We need to create 2 scenes - one for the last highlight (so we can show the last goal right away) and one for all highlights in that directory.

Create a scene for all highlights - add "BrowserSource" - it will ask for a name. And then in the window after name we need to add the link to the first web page.
URL - http://localhost:8080/zhhighlights/index5.html - this will show all highlights in the highlights directory.
Change the width and height values to match the resolution you stream.
Check both check-boxes at the bottom. If not checked - the web page wont refresh next time you want to run all highlights or to show the recent goal.

Create a scene for all the latest goal - add "BrowserSource" - it will ask for a name. And then in the window after name we need to add the link to the first web page.
URL - http://localhost:8080/zhhighlights/index.html - this will show the newest highlight in the highlights directory.
Change the width and height values to match the resolution you stream.
Check both check-boxes at the bottom. If not checked - the web page wont refresh next time you want to run all highlights or to show the recent goal.

In settings' Hotkey section we need assign Save Replay (under Replay Buffer), Switch to scene (under the scene with starcraft 2), Switch to scene (under the scene with the last goal). Additionally also Start replay buffer and Stop replay buffer commands can be given hotkeys.
I use control+num 0 to save highlight, control+num 1 to return to sc2 scene and control+num 2 to go to the last goal scored scene.

5) In action
Start web server. Start obs. Start Replay buffer in obs. Start Streaming. (order is not important). Then press Save Replay hotkey. And then wait a second and press hotkey for the latest highlight. Then after 7 seconds press a hotkey for the starcraft 2 scene.
To run that usb web server start usbwebserver.exe
To start Replay buffer press "Start Replay Buffer" - 2nd button under "Start Streaming" in obs.

6) Misc
Do not create another folder or put random files inside the folder with highlights - it will confuse the php file and everything will stop working. It is a dumb php file.
I would suggest moving or deleting the files once in a while. Haven't tested what happens when there are over 9000 files.
If something goes wrong - check out that folder - most likely someone accidentally hit Start Recording instead of Start Replay Buffer (after deleting non-mp4 file - it should work again after refresh).
A settings window opens with a button for refresh the web page when double clicked on browser source in one of those highlight scenes.
I finally fixed a problem where in all highlights (index2.html) page there was a tiny gap between each highlight - caused by the fact that next highlight was not preloaded. NA inspired me to fix it finally. Thanks!
If you find this tool/method useful consider dropping some moneys in my paypal: mapets at inbox dot lv.

If something is not working or if there are any questions - feel free to contact me.
OzyWho
Posts: 237
Joined: Sun Jul 03, 2016 1:30 pm
Battle.net Name: Ozy Who
Battle.net Char Code: 0
Battle.net Server: EU

Re: EU Highlights - Setting up web server based highlights tool

Post by OzyWho » Wed Oct 18, 2017 3:39 am

Gotta say. It's way more complicated than I would have thought. :shock:
We experience something, evaluate it, and then we feel an emotional response according to that evaluation.
Reason is emotion's slave and exists to rationalize emotional experience.
Rationalize emotional response in the present experience.
Post Reply