split frontend template to show app, rtmp substreams and hls stream index

This commit is contained in:
deflax 2021-10-12 19:11:19 +00:00
parent 936dcc1f25
commit 15bac63561
5 changed files with 66 additions and 36 deletions

View file

@ -1,6 +1,6 @@
# This is the title and Subtitle displayed on the Head of the Page # This is the title and Subtitle displayed on the Head of the Page
pagetitle: vod-rtmp pagetitle: vod-rtmp
subtitle: v1 subtitle: v0.69
# the footer # the footer
footer: "© 2021 by the zom.bi Team" footer: "© 2021 by the zom.bi Team"

View file

@ -13,22 +13,48 @@ frontend = flask.Blueprint('frontend', __name__)
@frontend.route("/") @frontend.route("/")
def start(): def start():
mainTemplate = '%s/main.html.j2' % zomstream.configuration['template_folder'] mainTemplate = '%s/main.html.j2' % zomstream.configuration['template_folder']
streamList = zomstream.getStreamNames() itemList = zomstream.getStreamNames()
applications = []
appnames = []
for item in itemList:
if item[0] not in appnames:
appnames.append(item[0])
for appname in appnames:
streamnames = []
for item in itemList:
streamitem=item[1].split('_')[0]
if streamitem not in streamnames and item[0] == appname:
streamnames.append(streamitem)
streams = []
for streamname in streamnames:
substreams = []
for item in itemList:
if item[0] == appname:
if item[1].split('_')[0] == streamname:
substreams.append(item[1])
stream = [streamname, substreams]
streams.append(stream)
app = [appname, streams]
applications.append(app)
page = flask.render_template( page = flask.render_template(
mainTemplate, mainTemplate,
items=streamList, applications=applications,
configuration=zomstream.configuration configuration=zomstream.configuration
) )
return page return page
@frontend.route("/player/<appname>/<streamname>") @frontend.route("/player/<appname>/<stream>")
def show_player(appname, hlsindex): def show_player(appname, stream):
playerTemplate = '%s/player.html.j2' % zomstream.configuration['template_folder'] playerTemplate = '%s/player.html.j2' % zomstream.configuration['template_folder']
hlsindex = streamname.split('_')[0]
page = flask.render_template( page = flask.render_template(
playerTemplate, playerTemplate,
appname=appname, appname=appname,
hlsindex=hlsindex, stream=stream,
configuration=zomstream.configuration configuration=zomstream.configuration
) )
return page return page

View file

@ -11,34 +11,39 @@
<h2>{{ configuration["subtitle"] }}</h2> <h2>{{ configuration["subtitle"] }}</h2>
</header> </header>
<main> <main>
{% if items == [] %} {% if applications == [] %}
<p style="margin-top: 20px; margin-bottom: 150px;"> <p style="margin-top: 20px; margin-bottom: 150px;">
<span style="color: #888; font-size: 14pt;">There are currently no streams running</span> <span style="color: #888; font-size: 14pt;">There are currently no streams running</span>
</p> </p>
{% endif %} {% endif %}
{% for tem in items %} {% for application in applications %}
<article> <h1>{{ application[0] }}</h1>
<h1>Stream {{ item[1] }}</h1> {% for stream in application[1] %}
<table> <article>
<tbody> <h2> stream {{ stream[0] }}</h2>
<tr> <table>
<th>Protocol</th> <tbody>
<th>URL</th> <tr>
<th></th> <th>Protocol</th>
</tr> <th>URL</th>
<tr> <th></th>
<td>RTMP substream }}</td> </tr>
<td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ item[0] }}/{{ item[2] }}</em></td> {% for substream in stream[1] %}
<td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ item[0] }}/{{ item[2] }}" class="btn btn-red">&#9654;<br/>RTMP</a></td> <tr>
</tr> <td>RTMP {{ substream }}</td>
<tr> <td><em class="url">rtmp://{{ configuration["rtmp_base"] }}/{{ application[0] }}/{{ substream }}</em></td>
<td>HLS m3u8</td> <td class="btn"><a href="rtmp://{{ configuration['rtmp_base'] }}/{{ application[0] }}/{{ substream }}" class="btn btn-red">&#9654;<br/>RTMP</a></td>
<td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ item[1] }}/index.m3u8</em></td> </tr>
<td class="btn"><a href="{{ url_for('frontend.show_player', appname=item[0], hlsindex=item[1]) }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td> {% endfor %}
</tr> <tr>
</tbody> <td>HLS m3u8</td>
</table> <td><em class="url">{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream[0] }}.m3u8</em></td>
</article> <td class="btn"><a href="{{ url_for('frontend.show_player', appname=application[0], stream=stream[0]) }}" class="btn btn-green">&#9654;<br/>HLS.js</a></td>
</tr>
</tbody>
</table>
</article>
{% endfor %}
{% endfor %} {% endfor %}
</main> </main>
<footer> <footer>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ streamname }}</title> <title>{{ configuration['pagetitle'] }} - {{ appname }}: {{ stream }}</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}"> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.default.css') }}">
</head> </head>
<body> <body>
@ -22,7 +22,7 @@
var hls = new Hls({ var hls = new Hls({
debug: true, debug: true,
}); });
hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8"); hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8");
hls.attachMedia(video); hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () { hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true; video.muted = true;
@ -33,12 +33,11 @@
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property. // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js. // This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) { else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ hlsindex }}.m3u8"; video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ stream }}.m3u8";
video.addEventListener('canplay', function () { video.addEventListener('canplay', function () {
video.play(); video.play();
}); });
} }
//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
</script> </script>
</body> </body>
</html> </html>

View file

@ -41,7 +41,7 @@ class Zomstream:
name = stream.find('name') name = stream.find('name')
rate = stream.find('bw_video') rate = stream.find('bw_video')
if rate.text != "0": if rate.text != "0":
self.streamnames.append( [appname.text, streamname.text] ) self.streamnames.append( [appname.text, name.text] )
return self.streamnames return self.streamnames