ynerant/ghostream
1
0
Fork 0
mirror of https://gitlab.crans.org/nounous/ghostream.git synced 2025-06-27 15:42:07 +02:00
Code Issues Releases Wiki Activity

WebRTC player

Browse Source
This commit is contained in:
Alexandre Iooss
2020-09-22 22:08:14 +02:00
parent 1ac7fce31b
commit 73d08f497e
12 changed files with 343 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/template/_base.html Normal file
View File

@ -0,0 +1,21 @@
{{define "base"}}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>{{if .Path}}{{.Path}} - {{end}}{{.Cfg.Name}}</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="shortcut icon" href="{{.Cfg.Favicon}}">
</head>
<body>
{{if .Path}}
{{template "viewer" .}}
{{else}}
{{template "index" .}}
{{end}}
</body>
</html>
{{end}}

18
web/template/base.tmpl
View File

@ -1,18 +0,0 @@
{{define "base"}}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>{{if .Path}}{{.Path}} - {{end}}{{.Cfg.Name}}</title>
<link rel="stylesheet" href="static/style.css">
<link rel="shortcut icon" href="static/favicon.ico">
</head>
<body>
{{if .Path}}
{{template "viewer" .}}
{{else}}
{{template "index" .}}
{{end}}
</body>
</html>
{{end}}

0
web/template/index.tmpl → web/template/index.html
View File

37
web/template/viewer.html Normal file
View File

@ -0,0 +1,37 @@
{{define "viewer"}}
<div class="container">
<div class="col-video">
<!-- Video -->
<div class="video-responsive">
<video id="viewer" poster="/static/img/no_stream.svg"></video>
</div>
<!-- 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://{{.Cfg.Hostname}}:1935/play/{{.Path}}</code>-->
<a href="#" id="sideWidgetToggle" title="Cacher/Afficher le chat">»</a>
</p>
<!-- FIXME: will be automated -->
<textarea id="localSessionDescription" readonly="true"></textarea>
<textarea id="remoteSessionDescription"></textarea>
<button onclick="window.startSession()"></button>
</div>
<!-- Chat -->
<div class="col-chat" id="sideWidget">
<iframe src="https://irc.crans.org/web/?join=stream_{{.Path}}&nick=viewer&password=&realname=Viewer"
title="Chat"></iframe>
</div>
</div>
<script src="/static/js/sideWidget.js"></script>
<script src="/static/js/viewer.js"></script>
{{end}}

67
web/template/viewer.tmpl
View File

@ -1,67 +0,0 @@
{{define "viewer"}}
<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://{{.Cfg.Hostname}}:1935/play/{{.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="/static/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://{{.Cfg.Hostname}}/play/{{.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>
{{end}}