mirror of
https://gitlab.crans.org/nounous/ghostream.git
synced 2025-06-27 11:28:51 +02:00
WebRTC player
This commit is contained in:
Alexandre Iooss
@ -56,9 +56,25 @@ h1, h2, h3, h4 {
|
||||
padding: 1rem;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
/* Limit max width to limit video size */
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.video-responsive {
|
||||
position: relative;
|
||||
padding-top: 56.25%; /* 16/9 */
|
||||
}
|
||||
|
||||
.video-responsive video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
@ -80,7 +96,7 @@ h1, h2, h3, h4 {
|
||||
}
|
||||
|
||||
/* Hide chat toggler on small screen */
|
||||
#chatToggle {
|
||||
#sideWidgetToggle {
|
||||
margin-left: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
@ -92,7 +108,7 @@ h1, h2, h3, h4 {
|
||||
flex: 0 0 33.33333%;
|
||||
}
|
||||
|
||||
#chatToggle {
|
||||
#sideWidgetToggle {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
13
web/static/img/no_stream.svg
Normal file
13
web/static/img/no_stream.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg version="1.1" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(0 -106.5)">
|
||||
<rect y="106.5" width="1280" height="720"/>
|
||||
<g transform="matrix(6.264 0 0 6.264 439.5 193.3)">
|
||||
<path d="m42.23 46.23c14.05-2.364 18.73-9.9 20.12-19.73 0.776-5.46 0.697-9.927-0.878-15.31 0 0-1.185 1.016-2.38 2.425l-1.806 2.13c-4.686-6.643-9.9-9.712-15.85-8.794s-7.133 4.81-10.58 10.7c-0.19-7e-3 -0.97-0.5-1.73-1.094-1.426-1.115-5.473-3.013-5.473-3.013 1.134 7.108 3.98 14.29 8.513 19.12 3.077 3.176 7.316 4.028 5.272 8.304-0.912 1.907-4.373 1.573-5.327 1.582-0.473 4e-3 -1.217 0.235-1.654 0.51-2.425 3.942 4.377 4.418 11.78 3.172z" fill="#ebe7e7" stroke="#b62525" stroke-linejoin="round" stroke-width="2.214"/>
|
||||
<path d="m8.13 24.1v5e-3a7.55 7.55 0 0 0-7.55 7.55 7.55 7.55 0 0 0 7.549 7.547c1.526 0 2.946-0.456 4.135-1.237h9.408a4.52 4.52 0 0 0 4.518-4.518 4.52 4.52 0 0 0-4.518-4.518h-6.508c-1.092-2.824-3.826-4.828-7.036-4.828zm27.07 13.92-12.49 4.028v6.245l12.49 2.685zm-26.6 13.43v3.402h1.995l-1.035 3.458h2.685l1.04-3.458h3.6l1.04 3.458h2.685l-1.04-3.458h1.53v-3.402z" fill="#214378"/>
|
||||
<path d="m29.61 37.33h-29.54v14.77h29.54z" fill="#37abc8"/>
|
||||
<path d="m35.08 19.04c0.876-1.938 1.78-3.835 4.73-2.73m6.42-0.858c2.54-2.016 4.207-1.66 5.38 0.037m-11.68 8.063c3.783 2.094 7.052 0.7 10.13-1.966" fill="none" stroke="#b62525" stroke-linecap="round" stroke-width="1.107"/>
|
||||
</g>
|
||||
<text x="641.03516" y="675.07147" fill="#000000" font-family="'Noto Mono'" font-size="40px" letter-spacing="0px" text-align="center" text-anchor="middle" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><tspan x="641.03516" y="675.07147" fill="#ffffff" font-family="sans-serif" text-align="center" text-anchor="middle">Ce stream semble inactif.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
12
web/static/js/sideWidget.js
Normal file
12
web/static/js/sideWidget.js
Normal file
@ -0,0 +1,12 @@
|
||||
// Side widget toggler
|
||||
const sideWidgetToggle = document.getElementById("sideWidgetToggle")
|
||||
sideWidgetToggle.addEventListener("click", function () {
|
||||
const sideWidget = document.getElementById("sideWidget")
|
||||
if (sideWidget.style.display === "none") {
|
||||
sideWidget.style.display = "block"
|
||||
sideWidgetToggle.textContent = "»"
|
||||
} else {
|
||||
sideWidget.style.display = "none"
|
||||
sideWidgetToggle.textContent = "«"
|
||||
}
|
||||
})
|
||||
45
web/static/js/viewer.js
Normal file
45
web/static/js/viewer.js
Normal file
@ -0,0 +1,45 @@
|
||||
// Init peer connection
|
||||
let pc = new RTCPeerConnection({
|
||||
iceServers: [
|
||||
{
|
||||
// FIXME: let admin customize the stun server
|
||||
urls: 'stun:stun.l.google.com:19302'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// Create an offer to receive one video and one audio track
|
||||
pc.addTransceiver('video', { 'direction': 'sendrecv' })
|
||||
pc.addTransceiver('audio', { 'direction': 'sendrecv' })
|
||||
pc.createOffer().then(d => pc.setLocalDescription(d)).catch(console.log)
|
||||
|
||||
// When local session description is ready, send it to streaming server
|
||||
// FIXME: also send stream path
|
||||
// FIXME: send to wss://{{.Cfg.Hostname}}/play/{{.Path}}
|
||||
pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState)
|
||||
pc.onicecandidate = event => {
|
||||
if (event.candidate === null) {
|
||||
document.getElementById('localSessionDescription').value = JSON.stringify(pc.localDescription)
|
||||
}
|
||||
}
|
||||
|
||||
// When remote session description is received, load it
|
||||
window.startSession = () => {
|
||||
let sd = document.getElementById('remoteSessionDescription').value
|
||||
try {
|
||||
pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(sd)))
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
|
||||
// When video track is received, mount player
|
||||
pc.ontrack = function (event) {
|
||||
if (event.track.kind === "video") {
|
||||
const viewer = document.getElementById('viewer')
|
||||
viewer.srcObject = event.streams[0]
|
||||
viewer.autoplay = true
|
||||
viewer.controls = true
|
||||
viewer.muted = true
|
||||
}
|
||||
}
|
||||
21
web/template/_base.html
Normal file
21
web/template/_base.html
Normal 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}}
|
||||
@ -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}}
|
||||
37
web/template/viewer.html
Normal file
37
web/template/viewer.html
Normal 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}}
|
||||
@ -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}}
|
||||
@ -19,7 +19,7 @@ type Options struct {
|
||||
}
|
||||
|
||||
// Preload templates
|
||||
var templates = template.Must(template.ParseGlob("web/template/*.tmpl"))
|
||||
var templates = template.Must(template.ParseGlob("web/template/*.html"))
|
||||
|
||||
// Handle site index and viewer pages
|
||||
func viewerHandler(w http.ResponseWriter, r *http.Request, cfg *Options) {
|
||||
|
||||
Reference in New Issue
Block a user