streaming.html 4.04 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
{% 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">
22
					<div style="background-image: url('{{ config.VIDEOPREFIX }}/thumbnail/s_{{ source.id }}.jpg')" class="col-sm-2 col-xs-12 thumbnailimg">
23
					{% if source.clientid %}
24
						<a href="#" data-toggle="modal" data-target="#preview-player" data-srcname="{{ source.name }}" data-srckey="{{ source.key }}">
25 26 27 28 29 30 31 32 33 34
							<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>
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
						{% 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'));
Julian Rother's avatar
Julian Rother committed
80
	$(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}}/pub/hls/preview/'+btn.data('srckey')+'.m3u8"/></video>');
81 82 83 84 85 86 87 88 89
	var player = videojs('previewplayer');
	player.play();
});
$('#preview-player').on('hidden.bs.modal', function (e) {
	videojs('previewplayer').dispose();
	$(this).find('.modal-body').text('');
});
</script>
{% endblock %}