1
0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2024-12-23 01:32:19 +00:00

No more bootstrap, and index page

This commit is contained in:
Alexandre Iooss 2020-09-14 12:47:58 +02:00
parent 372d1c4c5d
commit ed85463187
No known key found for this signature in database
GPG Key ID: 6C79278F3FCDCC02
7 changed files with 239 additions and 7 deletions

View File

@ -1,9 +1,11 @@
import os
# Default configuration # Default configuration
# LDAP # LDAP
LDAP_URI = "ldap://127.0.0.1:389" LDAP_URI = os.environ.get('LDAP_URI') or "ldap://127.0.0.1:389"
LDAP_USER_DN = "cn=users,dc=example,dc=com" LDAP_USER_DN = os.environ.get('LDAP_USER_DN') or "cn=users,dc=example,dc=com"
# Web page # Web page
SITE_NAME = "Ghostream" SITE_NAME = os.environ.get('SITE_NAME') or "Ghostream"
FAVICON = "/favicon.ico" FAVICON = os.environ.get('FAVICON') or "/favicon.ico"

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -1,17 +1,97 @@
body, html { body, html {
height: 100%; height: 100%;
margin: 0;
} }
body { body {
background-color: #3b4b5b; background-color: #3b4b5b;
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #bbb;
text-align: justify;
user-select: none; user-select: none;
} }
.text-select { p {
margin-top: 0;
margin-bottom: 1rem;
}
code {
font-size: 87.5%;
word-break: break-word;
user-select: text; user-select: text;
} }
.my-row { svg {
overflow: hidden;
vertical-align: middle;
}
a {
text-decoration: underline;
text-decoration-style: dotted;
color: inherit;
}
img {
max-width: 100%;
}
h1, h2, h3, h4 {
color: #ddd;
}
.container {
height: 100%;
width: 100%;
display: flex; display: flex;
flex-wrap: wrap;
height: 100%; height: 100%;
} }
.col-video {
padding: 1rem;
flex-basis: 0;
flex-grow: 1;
position: relative;
width: 100%;
text-align: right;
}
.col-chat {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 1rem 3rem rgba(0,0,0,0.175);
}
.col-chat iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Hide chat toggler on small screen */
#chatToggle {
margin-left: 0.5rem;
display: none;
}
/* On large screen, put chat on left */
@media(min-width:1000px){
.col-chat {
width: 33.33333%;
flex: 0 0 33.33333%;
}
#chatToggle {
display: inline;
}
}

View File

@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}{{ config.SITE_NAME }}{% endblock %}</title> <title>{% block title %}{{ config.SITE_NAME }}{% endblock %}</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
<link rel="shortcut icon" href="{{ config.FAVICON }}"> <link rel="shortcut icon" href="{{ config.FAVICON }}">
</head> </head>

View File

@ -0,0 +1,80 @@
{% extends "base.html" %}
{% block content %}
<div style="max-width:720px;margin:0 auto; padding: 1rem">
<h1>{{ config.SITE_NAME }}</h1>
<p>
{{ config.SITE_NAME }} est un service maintenu par le
<a href="https://crans.org/">Crans</a> permettant de diffuser
un contenu vidéo. Il a pour but d'être utilisé pour diffuser
des séminaires ou évènements.
</p>
<h2>Comment je diffuse ?</h2>
<p>Pour diffuser un contenu vous devez être adhérent Crans.</p>
<h3>Avec Open Broadcaster Software</h3>
<p>
<a href="https://obsproject.com/">Open Broadcaster Software</a>
est une solution libre et open source de diffusion vidéo.
Pour diffuser sur cette plateforme, allez dans les paramètres
« <i>Stream (flux)</i> » :
</p>
<ul>
<li>
<b>Serveur :</b>
<code>rtmps://{{ request.remote_addr }}:1935/app</code>,
</li>
<li>
<b>Clé de stream :</b>
<code>IDENTIFIANT?pass=MOT_DE_PASSE</code>
avec <code>IDENTIFIANT</code> et <code>MOT_DE_PASSE</code>
vos identifiants.
</li>
</ul>
<img alt="" src="{{ url_for('static', filename='obs_stream.png') }}">
<p>
Pour éviter les saccades, changez vos paramètres d'encodage dans
« <i>Sortie</i> » avec un profil <code>baseline</code> et un
règlage fin <code>zerolatency</code>.
</p>
<img alt="" src="{{ url_for('static', filename='obs_sortie.png') }}">
<p>
Votre stream sera alors disponible sur
<code>https://{{ request.remote_addr }}/IDENTIFIANT</code>.
</p>
<h3>Avec FFmpeg</h3>
<p>
<code>
ffmpeg -re -i mavideo.webm -vcodec libx264 -vprofile baseline
-acodec aac -strict -2 -f flv
rtmps://{{ request.remote_addr }}:1935/app/IDENTIFIANT?pass=MOT_DE_PASSE
</code>
</p>
<h2>Mentions légales</h2>
<p>
Le service de diffusion vidéo du Crans est un service d'hébergement
au sens de l'article 6, I, 2e de la loi 2004-575 du 21 juin 2004.
Conformément aux dispositions de l'article 6, II du même,
l'association Crans conserve les données de nature à permettre
l'identification des auteurs du contenu diffusé.
Ce service est hébergé par l'association Crans, au
61 Avenue du Président Wilson, 94235 Cachan Cedex, France.
</p>
<p>
<b>En cas de réclamation sur le contenu diffusé</b> de type
<code>https://{{ request.remote_addr }}/identifiant</code>,
l'auteur peut être contacté par courrier à l'adresse
<code>identifiant@crans.org</code>.
La loi vous autorise à contacter directement l'hébergeur à
l'adresse suivante :
<pre>Association Crans - ENS Paris-Saclay<br/>Notification de Contenus Illicites<br/>61, Avenue du Président Wilson<br/>94235 Cachan Cedex<br/>France</pre>
Vous pouvez également envoyer directement vos réclamations par
courrier électronique à l'adresse <code>bureau[at]crans.org</code>.
</p>
</div>
{% endblock %}

View File

@ -0,0 +1,71 @@
{% extends "base.html" %}
{% block title %}{{ path }} - {{ config.SITE_NAME }}{% endblock %}
{% block content %}
<div class="container">
<div class="col-video">
<!-- Video -->
<video id="player"></video>
<!-- Links under video -->
<p>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h8a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 0-1 0v4a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 5v8zm7-11a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.5H9a.5.5 0 0 1-.5-.5z"/>
<path fill-rule="evenodd" d="M14.354 1.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"/>
</svg>
<code>rtmps://{{ request.remote_addr }}:1935/app/{{ path }}</code>
<a href="#" id="chatToggle" title="Cacher/Afficher le chat">»</a>
</p>
</div>
<!-- Chat -->
<div class="col-chat" id="chatCol">
<iframe src="https://irc.crans.org/web/?join=stream_{{ path }}&nick=viewer&password=&realname=Viewer" title="Chat"></iframe>
</div>
</div>
<script src="/ovenplayer/ovenplayer.js"></script>
<script>
// Toggle chat
const chatToggle = document.getElementById("chatToggle")
chatToggle.addEventListener("click", function () {
const chatCol = document.getElementById("chatCol")
if (chatCol.style.display === "none") {
chatCol.style.display = "block"
chatToggle.textContent = "»"
} else {
chatCol.style.display = "none"
chatToggle.textContent = "«"
}
})
// Create player
player = OvenPlayer.create("player", {
autoStart: true,
mute: true,
expandFullScreenUI: true,
sources: [
{
"file": "wss://{{ request.remote_addr }}/app/{{ path }}",
"type": "webrtc",
"label": "WebRTC Source"
}
]
});
player.on("error", function(error){
if (error.code === 501) {
// Change message
const errorMsg = document.getElementsByClassName("op-message-text")[0]
errorMsg.textContent = "Le stream semble inactif. Cette page se rafraîchit toutes les 30 secondes."
// Reload in 5s
setTimeout(function () {
player.load()
}, 30000)
} else {
console.log(error);
}
});
</script>
{% endblock %}