streaming.html 4.03 KB
Newer Older
Julian Rother's avatar
Julian Rother committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% extends "base.html" %}
{% block content %}
<div class="panel-group">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h1 class="panel-title">Streamquellen</h1>
		</div>
		<div class="panel-body">
			<form action="{{ url_for('create', table='live_sources', ref=request.url) }}" method="post">
				<div class="input-group pull-right" style="width: 300px;">
					<input type="text" class="form-control" name="name" placeholder="Quellenname" width="100px">
					<span class="input-group-btn">
						<button class="btn btn-default" type="submit">Quelle anlegen</button>
					</span>
				</div>
			</form>
		</div>
		<ul class="list-group">
			{% for source in sources %}
			<li class="list-group-item{% if source.clientid %} list-group-item-danger{% endif %}">
				<div class="row">
					<div style="background-image: url('{{ config.VIDEOPREFIX }}/hls/preview/{{ source.id }}.jpg')" class="col-sm-2 col-xs-12 thumbnailimg">
					{% if source.clientid %}
						<a href="#" data-toggle="modal" data-target="#preview-player" data-srcname="{{ source.name }}" data-srcid="{{ source.id }}">
							<span class="glyphicon glyphicon-play-circle playpreviewbtn"></span>
						</a>
					{% endif %}
					</div>
					<ul class="list-unstyled col-sm-3 col-xs-12">
						<li>{{ moderator_editor(['live_sources',source.id,'name'], source.name) }}</li>
						<li>{{ moderator_editor(['live_sources',source.id,'description'], source.description) }}</li>
					</ul>
					<ul class="list-unstyled col-sm-3 col-xs-12">
					{% if source.clientid %}
35
						<li><a href="rtmp://{{ source.server_public }}/src/{{ source.id }}?preview_key={{ source.preview_key }}">rtmp://{{ source.server_public }}/src/{{ source.id }}</a></li>
Julian Rother's avatar
Julian Rother committed
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
						{% if source.stat and source.video and source.audio %}
						<li>Quelladresse: {{ source.stat.address }}</li>
						<li>Framedrops: {{ source.stat.dropped }}</li>
						<li>Auflösung: {{ source.video.width }}x{{ source.video.height }}</li>
						<li>Framerate: {{ source.video.frame_rate }} fps</li>
						<li>Audiokanäle: {{ source.audio.channels }}</li>
						<li>Audiorate: {{ source.audio.sample_rate }} Hz</li>
						<li>Codecs: {{ source.video.codec }}/{{ source.audio.codec }}</li>
						{% endif %}
					{% else %}
						{% if source.last_active %}
						<li>Zuletzt aktiv: {{ source.last_active|date }}, {{ source.last_active|time }} Uhr</li>
						{% else %}
						<li>Noch nie aktiv</li>
						{% endif %}
					{% endif %}
					</ul>
					<ul class="list-unstyled col-sm-4 col-xs-12">
						<li class="pull-right">{{ moderator_delete(['live_sources',source.id,'deleted']) }}</li>
						<a href="{{ url_for('streamrekey', id=source.id) }}" class="btn btn-{{ 'primary' if not source.key else 'default' }}">Streamkey erneuern</a>
						<a href="{{ url_for('streamdrop', id=source.id, ref=request.url) }}" class="btn btn-danger {% if not source.clientid %} disabled{% endif %}">Trennen</a>
					</ul>
				</div>
			</li>
			{% endfor %}
		</ul>
	</div>
</div>
<div id="preview-player" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Vorschau von</h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
<script>
$('#preview-player').on('show.bs.modal', function (e) {
	var btn = $(e.relatedTarget);
	$(this).find('.modal-title').text('Vorschau von '+btn.data('srcname'));
	$(this).find('.modal-body').html('<video id="previewplayer" style="width: 100%" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="320" controls><source type="application/x-mpegURL" src="{{config.VIDEOPREFIX}}/hls/preview/'+btn.data('srcid')+'.m3u8"/></video>');
	var player = videojs('previewplayer');
	player.play();
});
$('#preview-player').on('hidden.bs.modal', function (e) {
	videojs('previewplayer').dispose();
	$(this).find('.modal-body').text('');
});
</script>
{% endblock %}