video streaming

2018-06-29 12:30:49 +02:00 · 2018-06-29 12:30:49 +02:00 · a666c01300
parent 743290d462
commit a666c01300
8 changed files with 136 additions and 0 deletions
--- a/video/Dockerfile
+++ b/video/Dockerfile
--- a/video/README.md
+++ b/video/README.md
@ -0,0 +1,27 @@
+# Livestream
+
+Dockerized livestream server based on nginx that serves HLS and DASH.
+
+## Quickstart 💥
+
+```
+docker-compose up -d
+```
+
+## Setup 🏗
+
+Tweak `nginx.conf` to your likings if necessary.
+
+## Usage 👾
+
+Stream to it with [OBS](https://obsproject.com/)
+
+Settings -> Stream:
+ - Stream Type = custom
+ - Url = rtmp://localhost/mychannel
+ - Stream Key = some *non empty* string
+
+Settings -> Output:
+ - Output Mode = Simple
+ - Streaming
+   - Bitrate = depends on resolution and quality. check [here](https://support.video.ibm.com/hc/en-us/articles/207852117-Internet-connection-and-recommended-encoding-settings)
--- a/video/docker-compose.yml
+++ b/video/docker-compose.yml
--- a/video/nginx.conf
+++ b/video/nginx.conf
--- a/video/srv/index.html
+++ b/video/srv/index.html
--- a/video/srv/shaka.js
+++ b/video/srv/shaka.js
--- a/video/time/fittext.js
+++ b/video/time/fittext.js
@ -0,0 +1,50 @@
+/*global jQuery */
+/*!
+ * FitText.js 1.2
+ *
+ * Copyright 2011, Dave Rupert http://daverupert.com
+ * Released under the WTFPL license
+ * http://sam.zoy.org/wtfpl/
+ * Modified by Niccolo Borgioli github.com/cupcakearmy
+ *
+ * Date: Thu May 05 14:23:00 2011 -0600
+ */
+
+((window) => {
+	window.fittext = (element, kompressor, options) => {
+
+		const compressor = kompressor || 1,
+			settings = Object.assign({
+				'minFontSize': Number.NEGATIVE_INFINITY,
+				'maxFontSize': Number.POSITIVE_INFINITY
+			}, options)
+
+		const resizer = () => element.style.fontSize = `${Math.max(Math.min(element.offsetWidth / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))}px`
+
+		resizer()
+		window.addEventListener('resize', resizer)
+
+	}
+
+	window.textfill = (element, options) => {
+		const ourText = element.querySelector('span');
+		const maxHeight = element.offsetHeight;
+		const maxWidth = element.offsetWidth;
+
+
+
+		let fontSize = Number.POSITIVE_INFINITY;
+		let textHeight;
+		let textWidth;
+
+		const resizer = () => {
+			do {
+				ourText.style.fontSize = `${fontSize}px`
+				textHeight = ourText.offsetHeight
+				textWidth = ourText.offsetWidth
+				fontSize = fontSize - 1
+			} while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3)
+		}
+		resizer()
+	}
+})(window)
--- a/video/time/time.html
+++ b/video/time/time.html
@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<style>
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: 0;
+		}
+
+		html,
+		body,
+		#clock {
+			height: 100%;
+			width: 100%
+		}
+	</style>
+</head>
+
+<body>
+	<div id="clock">
+		<span>
+			Test
+		</span>
+	</div>
+
+	<script src='fittext.js'></script>
+	<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script> -->
+	<script>
+		textfill(document.querySelector('#clock'))
+
+		// var urlParams;
+		// (function () {
+		// 	var match,
+		// 		pl = /\+/g, // Regex for replacing addition symbol with a space
+		// 		search = /([^&=]+)=?([^&]*)/g,
+		// 		decode = function (s) {
+		// 			return decodeURIComponent(s.replace(pl, " "));
+		// 		},
+		// 		query = window.location.search.substring(1);
+		// 	urlParams = {};
+		// 	while (match = search.exec(query))
+		// 		urlParams[decode(match[1])] = decode(match[2]);
+		// })();
+		// var output = document.getElementById("output");
+		// if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
+		// if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
+		// var c;
+		// setInterval(
+		// 	c = function () {
+		// 		output.innerText = moment().format(urlParams["format"] || '');
+		// 	}, 1000);
+		// c();
+	</script>
+</body>
+
+</html>