diff --git a/config/frontend/config.example.yml b/config/frontend/config.example.yml index 9586428..8fe7b18 100644 --- a/config/frontend/config.example.yml +++ b/config/frontend/config.example.yml @@ -1,12 +1,12 @@ # This is the title and Subtitle displayed on the Head of the Page pagetitle: Zomstream -subtitle: v0.4 +subtitle: v0.5 # the footer footer: "© 2021 by the zom.bi Team" # the ip or hostname used to generate rtmp URLs -rtmp_base: stream.zom.bi +rtmp_base: 127.0.0.1 # this is the base url used to generate internal links -base_url: 127.0.0.1:5001 +base_url: 127.0.0.1:8080 # the url to the nginx servers status page. # this is used for discovering the running streams diff --git a/docker-compose.default.yml b/docker-compose.default.yml index 9466e8f..dd069e9 100644 --- a/docker-compose.default.yml +++ b/docker-compose.default.yml @@ -15,7 +15,7 @@ services: - "./auth:/code" # set the PSK Password for the Auth Daemon here environment: - - password=ex4mple_p4ssw0rd! + - password=P4ssW0rD nginx-rtmp: # nginx rtmp server build: ./docker-nginx-rtmp/. diff --git a/frontend/app/frontend.py b/frontend/app/frontend.py index 22e40df..8338c18 100644 --- a/frontend/app/frontend.py +++ b/frontend/app/frontend.py @@ -31,3 +31,12 @@ def show_player(appname, streamname): configuration=zomstream.configuration ) return page + +@frontend.route("/setup_helper") +def setup_helper(): + template = '%s/setup_helper.html.j2' % zomstream.configuration['template_folder'] + page = flask.render_template( + template, + configuration=zomstream.configuration + ) + return page \ No newline at end of file diff --git a/frontend/app/static/style.default.css b/frontend/app/static/style.default.css index 48c8803..a25ce24 100644 --- a/frontend/app/static/style.default.css +++ b/frontend/app/static/style.default.css @@ -32,6 +32,11 @@ header h2 { margin: 2px; } +header h2 a { + font-style: normal; + color: #555; +} + main { clear: both; margin-left: auto; @@ -54,6 +59,30 @@ article { padding: 0px; } +form { + margin: 4px; +} + +article p { + margin: 4px; +} + +form label { + display: block; + margin-top: 8px; +} + +input, select { + width: 100%; + border: 1px solid #888; + border-radius: 3px; + box-sizing: border-box; +} + +input:focus { + border: 1px solid #88f; +} + article h1 { font-size: 13pt; font-weight: normal; @@ -84,7 +113,7 @@ article table td { border-bottom: 1px solid #eee; } -article table td em.url { +article table td em.url, input.url { font-style: normal; font-family: monospace; background: #eee; @@ -100,7 +129,17 @@ article table th.btn { text-align: right; } -a.btn { +form button.btn-large { + border: none; +} + +td.btn button.btn { + border: none; + width: 100%; + height: 100%; +} + +a.btn, button.btn { color: #eee; display: block; border-radius: 5px; @@ -111,15 +150,15 @@ a.btn { text-align: center; } -a.btn-green { +a.btn-green, button.btn, button.btn-large { background-color: rgb(44, 57, 75); /*background: linear-gradient(#4caf50, #2b622d);*/ } -a.btn-green:hover { +a.btn-green:hover, button.btn:hover { background-color: rgb(60, 78, 104); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); } -a.btn-large { +a.btn-large, button.btn-large { color: #eee; font-size: 16pt; display: block; @@ -191,6 +230,9 @@ video#player { header h2 { color: #777; } + header h2 a { + color: #999; + } footer { color: #999; } @@ -208,7 +250,7 @@ video#player { article table td { border-bottom: 1px solid #333; } - article table td em.url { + article table td em.url, input.url { color: #eee; background: #121212; } diff --git a/frontend/app/templates/default/main.html.j2 b/frontend/app/templates/default/main.html.j2 index e9fb218..8b8720e 100644 --- a/frontend/app/templates/default/main.html.j2 +++ b/frontend/app/templates/default/main.html.j2 @@ -8,7 +8,7 @@

{{ configuration["pagetitle"] }}

-

{{ configuration["subtitle"] }}

+

Setup Helper | {{ configuration["subtitle"] }}

{% if items == [] %} @@ -25,16 +25,45 @@ Protocol URL + RTMP - rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[1] }} - ▶
RTMP + + + + + + + + ▶ RTMP + HTTP-FLV - {{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ item[0] }}&stream={{ item[1] }} - ▶
HTTP-FLV + + + + + + + + ▶ FLV + @@ -48,5 +77,12 @@ + diff --git a/frontend/app/templates/default/player.html.j2 b/frontend/app/templates/default/player.html.j2 index 281e365..610c966 100644 --- a/frontend/app/templates/default/player.html.j2 +++ b/frontend/app/templates/default/player.html.j2 @@ -15,6 +15,61 @@ +
+ +
diff --git a/frontend/app/templates/default/setup_helper.html.j2 b/frontend/app/templates/default/setup_helper.html.j2 new file mode 100644 index 0000000..047db4b --- /dev/null +++ b/frontend/app/templates/default/setup_helper.html.j2 @@ -0,0 +1,146 @@ + + + + + {{ configuration['pagetitle'] }} - Stream Overview + + + +
+

{{ configuration["pagetitle"] }}

 +

{{ configuration["subtitle"] }}

+
+
+
+

+ Setup Helper +

+

+ This tool should help you with the setup of OBS for use with zomstream +

+
+ + + + + + + + + + +
+
+ +
+

OBS Configuration

+

go to Settings -> Stream to set up these parameters in OBS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ParameterSetting
Service
Server
Stream Key
Use Authentication
+
+ +
+

User URLs

+

these are the URLs where other people can access your stream

+ + + + + + + + + + + + + + + + + + + + + + + +
TypeURL
Web Player
FLV HTTP
RTMP
+
+
+ + + \ No newline at end of file