mirror of
https://gitlab.crans.org/nounous/ghostream.git
synced 2024-12-22 15:02:19 +00:00
No more bootstrap, and index page
This commit is contained in:
Alexandre Iooss
parent
372d1c4c5d
commit
ed85463187
@ -1,9 +1,11 @@
|
||||
import os
|
||||
|
||||
# Default configuration
|
||||
|
||||
# LDAP
|
||||
LDAP_URI = "ldap://127.0.0.1:389"
|
||||
LDAP_USER_DN = "cn=users,dc=example,dc=com"
|
||||
LDAP_URI = os.environ.get('LDAP_URI') or "ldap://127.0.0.1:389"
|
||||
LDAP_USER_DN = os.environ.get('LDAP_USER_DN') or "cn=users,dc=example,dc=com"
|
||||
|
||||
# Web page
|
||||
SITE_NAME = "Ghostream"
|
||||
FAVICON = "/favicon.ico"
|
||||
SITE_NAME = os.environ.get('SITE_NAME') or "Ghostream"
|
||||
FAVICON = os.environ.get('FAVICON') or "/favicon.ico"
|
||||
|
||||
BIN
ghostream/static/obs_sortie.png
Normal file
BIN
ghostream/static/obs_sortie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
ghostream/static/obs_stream.png
Normal file
BIN
ghostream/static/obs_stream.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -1,17 +1,97 @@
|
||||
body, html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
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;
|
||||
}
|
||||
|
||||
.text-select {
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 87.5%;
|
||||
word-break: break-word;
|
||||
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;
|
||||
flex-wrap: wrap;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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 rel="shortcut icon" href="{{ config.FAVICON }}">
|
||||
</head>
|
||||
|
||||
80
ghostream/templates/index.html
Normal file
80
ghostream/templates/index.html
Normal 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 %}
|
||||
71
ghostream/templates/viewer.html
Normal file
71
ghostream/templates/viewer.html
Normal 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 %}
|
||||
Loading…
Reference in New Issue
Block a user