deflax/vod-rtmp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/frontend/config.yml.dist
View file

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

38
frontend/app/frontend.py
View file

@ -13,22 +13,48 @@ frontend = flask.Blueprint('frontend', __name__)
@frontend.route("/")
def start():
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(
mainTemplate,
items=streamList,
applications=applications,
configuration=zomstream.configuration
)
return page
@frontend.route("/player/<appname>/<streamname>")
def show_player(appname, hlsindex):
@frontend.route("/player/<appname>/<stream>")
def show_player(appname, stream):
playerTemplate = '%s/player.html.j2' % zomstream.configuration['template_folder']
hlsindex = streamname.split('_')[0]
page = flask.render_template(
playerTemplate,
appname=appname,
hlsindex=hlsindex,
stream=stream,
configuration=zomstream.configuration
)
return page

21
frontend/app/templates/default/main.html.j2
View file

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

7
frontend/app/templates/default/player.html.j2
View file

@ -2,7 +2,7 @@
<html>
<head>
<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') }}">
</head>
<body>
@ -22,7 +22,7 @@
var hls = new Hls({
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.on(Hls.Events.MEDIA_ATTACHED, function () {
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.
// This is using the built-in support of the plain video element, without using hls.js.
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.play();
});
}
//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
</script>
</body>
</html>

2
frontend/app/zomstream.py
View file

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