76 lines
3.0 KiB
HTML
76 lines
3.0 KiB
HTML
{{define "viewer"}}
|
|
<div class="container">
|
|
<div class="col-video">
|
|
<!-- Video -->
|
|
<div class="video-responsive">
|
|
<video id="viewer" poster="/static/img/no_stream.svg" muted controls autoplay></video>
|
|
</div>
|
|
|
|
<div class="quality-selector">
|
|
<form name="quality_form">
|
|
<input type="radio" id="quality_source" name="quality" value="" checked>
|
|
<label for="quality_source">Source</label>
|
|
<input type="radio" id="quality_720p" name="quality" value="@720p">
|
|
<label for="quality_720p">720p</label>
|
|
<input type="radio" id="quality_480p" name="quality" value="@480p">
|
|
<label for="quality_480p">480p</label>
|
|
<input type="radio" id="quality_240p" name="quality" value="@240p">
|
|
<label for="quality_240p">240p</label>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Links under video -->
|
|
<p>
|
|
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-box-arrow-up-right" fill="#d7d7d7" 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>srt://{{.Cfg.Hostname}}:{{.Cfg.SRTServerPort}}?streamid={{.Path}}</code>
|
|
|
|
<svg class="ml-1" width="1em" height="1em" viewBox="0 0 20 20" fill="#d7d7d7" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z"/>
|
|
<circle cx="10" cy="5.5" r="4.5"/>
|
|
</svg>
|
|
<span id="connected-people">0</span>
|
|
|
|
<svg id="connectionIndicator" class="ml-1" width="1em" height="1em" viewBox="0 0 16 16" fill="#dc3545" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="4" height="5" x="1" y="10" rx="1"/>
|
|
<rect width="4" height="9" x="6" y="6" rx="1"/>
|
|
<rect width="4" height="14" x="11" y="1" rx="1"/>
|
|
</svg>
|
|
|
|
{{if .WidgetURL}}
|
|
<a href="#" id="sideWidgetToggle" class="ml-1" title="Cacher/Afficher le chat">»</a>
|
|
{{end}}
|
|
</p>
|
|
</div>
|
|
|
|
{{if .WidgetURL}}
|
|
<!-- Chat -->
|
|
<div class="col-chat" id="sideWidget">
|
|
<iframe src="{{.WidgetURL}}"
|
|
title="Chat" sandbox="allow-scripts allow-forms allow-same-origin"></iframe>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
{{if .WidgetURL}}<script src="/static/js/sideWidget.js"></script>{{end}}
|
|
<script src="/static/js/videoQuality.js"></script>
|
|
<script src="/static/js/viewer.js"></script>
|
|
<script src="/static/js/viewersCounter.js"></script>
|
|
<script>
|
|
const stunServers = [
|
|
{{range $id, $value := .Cfg.STUNServers}}
|
|
'{{$value}}',
|
|
{{end}}
|
|
]
|
|
startPeerConnection()
|
|
|
|
// Wait a bit before pulling viewers counter for the first time
|
|
setTimeout(() => {
|
|
refreshViewersCounter({{.Cfg.ViewersCounterRefreshPeriod}})
|
|
}, 1000)
|
|
</script>
|
|
{{end}} |