mirror of
https://gitlab.crans.org/nounous/ghostream.git
synced 2024-12-22 20:52:20 +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
|
# 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"
|
||||||
|
|||||||
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 {
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
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