+5 -36

package-lock.json

··· 19 "@tsparticles/updater-opacity": "3.9.1", 20 "@tsparticles/updater-size": "3.9.1", 21 "base64url": "3.0.1", 22 - "hls.js": "1.6.15", 23 - "normalize.scss": "0.1.0", 24 - "ovenplayer": "0.10.45" 25 }, 26 "devDependencies": { 27 "@parcel/compressor-brotli": "2.16.1", ··· 1163 "integrity": "sha512-tza8oKYaPopGBwroGJKv7BrTg1lxTycS7SANIizxMB9FxDsAkq4vPny5/KHpFBcW3UTCGBvvNAG1oaVzeWF5Pg==", 1164 "dev": true, 1165 "license": "MIT", 0 1166 "dependencies": { 1167 "@mischnic/json-sourcemap": "^0.1.1", 1168 "@parcel/cache": "2.16.1", ··· 3139 "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", 3140 "dev": true, 3141 "license": "MIT", 0 3142 "bin": { 3143 "acorn": "bin/acorn" 3144 }, ··· 3396 } 3397 ], 3398 "license": "MIT", 0 3399 "dependencies": { 3400 "caniuse-lite": "^1.0.30001716", 3401 "electron-to-chromium": "^1.5.149", ··· 3809 "@babel/types": "^7.6.1" 3810 } 3811 }, 3812 - "node_modules/core-js": { 3813 - "version": "3.38.0", 3814 - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.0.tgz", 3815 - "integrity": "sha512-XPpwqEodRljce9KswjZShh95qJ1URisBeKCjUdq27YdenkslVe7OO0ZJhlYXAChW7OhXaRLl8AAba7IBfoIHug==", 3816 - "hasInstallScript": true, 3817 - "license": "MIT", 3818 - "funding": { 3819 - "type": "opencollective", 3820 - "url": "https://opencollective.com/core-js" 3821 - } 3822 - }, 3823 "node_modules/cross-spawn": { 3824 "version": "7.0.6", 3825 "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", ··· 4137 "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", 4138 "dev": true, 4139 "license": "MIT", 0 4140 "dependencies": { 4141 "@eslint-community/eslint-utils": "^4.8.0", 4142 "@eslint-community/regexpp": "^4.12.1", ··· 4810 "node": ">= 0.4" 4811 } 4812 }, 4813 - "node_modules/hls.js": { 4814 - "version": "1.6.15", 4815 - "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz", 4816 - "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==", 4817 - "license": "Apache-2.0" 4818 - }, 4819 "node_modules/http-cache-semantics": { 4820 "version": "4.1.1", 4821 "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", ··· 6145 "integrity": "sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==", 6146 "dev": true, 6147 "license": "MIT" 6148 - }, 6149 - "node_modules/ovenplayer": { 6150 - "version": "0.10.45", 6151 - "resolved": "https://registry.npmjs.org/ovenplayer/-/ovenplayer-0.10.45.tgz", 6152 - "integrity": "sha512-2zG/KpgGHtYD53vxAR33Zsh13Yvtfc/bh0/LBR4C/K0cF898XUCAIab7aeSa/AR2hHP0ZdkcLhRT4Y1w00LcbA==", 6153 - "license": "MIT", 6154 - "dependencies": { 6155 - "core-js": "^3.16.3", 6156 - "whatwg-fetch": "^3.6.2" 6157 - } 6158 }, 6159 "node_modules/p-limit": { 6160 "version": "3.1.0", ··· 7516 "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz", 7517 "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==", 7518 "dev": true, 7519 - "license": "MIT" 7520 - }, 7521 - "node_modules/whatwg-fetch": { 7522 - "version": "3.6.20", 7523 - "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", 7524 - "integrity": "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==", 7525 "license": "MIT" 7526 }, 7527 "node_modules/which": {

··· 19 "@tsparticles/updater-opacity": "3.9.1", 20 "@tsparticles/updater-size": "3.9.1", 21 "base64url": "3.0.1", 22 + "normalize.scss": "0.1.0" 0 0 23 }, 24 "devDependencies": { 25 "@parcel/compressor-brotli": "2.16.1", ··· 1161 "integrity": "sha512-tza8oKYaPopGBwroGJKv7BrTg1lxTycS7SANIizxMB9FxDsAkq4vPny5/KHpFBcW3UTCGBvvNAG1oaVzeWF5Pg==", 1162 "dev": true, 1163 "license": "MIT", 1164 + "peer": true, 1165 "dependencies": { 1166 "@mischnic/json-sourcemap": "^0.1.1", 1167 "@parcel/cache": "2.16.1", ··· 3138 "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", 3139 "dev": true, 3140 "license": "MIT", 3141 + "peer": true, 3142 "bin": { 3143 "acorn": "bin/acorn" 3144 }, ··· 3396 } 3397 ], 3398 "license": "MIT", 3399 + "peer": true, 3400 "dependencies": { 3401 "caniuse-lite": "^1.0.30001716", 3402 "electron-to-chromium": "^1.5.149", ··· 3810 "@babel/types": "^7.6.1" 3811 } 3812 }, 0 0 0 0 0 0 0 0 0 0 0 3813 "node_modules/cross-spawn": { 3814 "version": "7.0.6", 3815 "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", ··· 4127 "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", 4128 "dev": true, 4129 "license": "MIT", 4130 + "peer": true, 4131 "dependencies": { 4132 "@eslint-community/eslint-utils": "^4.8.0", 4133 "@eslint-community/regexpp": "^4.12.1", ··· 4801 "node": ">= 0.4" 4802 } 4803 }, 0 0 0 0 0 0 4804 "node_modules/http-cache-semantics": { 4805 "version": "4.1.1", 4806 "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", ··· 6130 "integrity": "sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==", 6131 "dev": true, 6132 "license": "MIT" 0 0 0 0 0 0 0 0 0 0 6133 }, 6134 "node_modules/p-limit": { 6135 "version": "3.1.0", ··· 7491 "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz", 7492 "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==", 7493 "dev": true, 0 0 0 0 0 0 7494 "license": "MIT" 7495 }, 7496 "node_modules/which": {

+2 -5

package.json

··· 3 "version": "1.0.0", 4 "description": "Personal website of Sefa Eyeoglu", 5 "source": [ 6 - "./src/index.pug", 7 - "./src/stream.pug" 8 ], 9 "browserslist": [ 10 "> 0.5%", ··· 29 "@tsparticles/updater-opacity": "3.9.1", 30 "@tsparticles/updater-size": "3.9.1", 31 "base64url": "3.0.1", 32 - "hls.js": "1.6.15", 33 - "normalize.scss": "0.1.0", 34 - "ovenplayer": "0.10.45" 35 }, 36 "devDependencies": { 37 "@parcel/compressor-brotli": "2.16.1",

··· 3 "version": "1.0.0", 4 "description": "Personal website of Sefa Eyeoglu", 5 "source": [ 6 + "./src/index.pug" 0 7 ], 8 "browserslist": [ 9 "> 0.5%", ··· 28 "@tsparticles/updater-opacity": "3.9.1", 29 "@tsparticles/updater-size": "3.9.1", 30 "base64url": "3.0.1", 31 + "normalize.scss": "0.1.0" 0 0 32 }, 33 "devDependencies": { 34 "@parcel/compressor-brotli": "2.16.1",

-103

src/js/stream.js

··· 1 - /*! 2 - * Personal website of Sefa Eyeoglu 3 - * Copyright (C) 2022 Sefa Eyeoglu <contact@scrumplex.net> 4 - * 5 - * This program is free software: you can redistribute it and/or modify 6 - * it under the terms of the GNU Affero General Public License as published by 7 - * the Free Software Foundation, either version 3 of the License, or 8 - * (at your option) any later version. 9 - * 10 - * This program is distributed in the hope that it will be useful, 11 - * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 - * GNU Affero General Public License for more details. 14 - * 15 - * You should have received a copy of the GNU Affero General Public License 16 - * along with this program. If not, see <https://www.gnu.org/licenses/>. 17 - */ 18 - 19 - import Hls from "hls.js"; 20 - 21 - window.Hls = Hls; 22 - 23 - import OvenPlayer from "ovenplayer"; 24 - import ready from "./_utils"; 25 - import base64url from "base64url"; 26 - 27 - const streamUrlElem = document.getElementById("stream-url"); 28 - const maximizeButtonElem = document.getElementById("maximizeButton"); 29 - 30 - let refreshTimeout; 31 - let player; 32 - 33 - function isWebSocketURL(string) { 34 - let url; 35 - try { 36 - url = new URL(string); 37 - } catch { 38 - return false; 39 - } 40 - 41 - return url.protocol === "ws:" || url.protocol === "wss:"; 42 - } 43 - 44 - function playStream(streamId) { 45 - const webrtcUrl = new URL(streamId, "wss://live.scrumplex.net"); 46 - webrtcUrl.protocol = "wss"; 47 - 48 - const hlsUrl = new URL( 49 - streamId + "/llhls.m3u8", 50 - "https://live.scrumplex.net", 51 - ); 52 - hlsUrl.protocol = "https"; 53 - 54 - const thumbUrl = new URL( 55 - streamId + "/thumb.png", 56 - "https://live.scrumplex.net", 57 - ); 58 - thumbUrl.protocol = "https"; 59 - 60 - location.replace(`#${base64url.encode(streamId)}`); 61 - streamUrlElem.value = streamId; 62 - let options = { 63 - image: thumbUrl, 64 - autoFallback: false, 65 - sources: [ 66 - { 67 - label: "Low Latency WebRTC", 68 - type: "webrtc", 69 - file: webrtcUrl, 70 - }, 71 - { 72 - label: '"Low Latency" HLS', 73 - type: "hls", 74 - file: hlsUrl, 75 - }, 76 - ], 77 - }; 78 - 79 - if (!player) { 80 - player = OvenPlayer.create("ovenplayer", options); 81 - } else { 82 - player.load(options); 83 - } 84 - } 85 - 86 - streamUrlElem.addEventListener("keyup", () => { 87 - clearTimeout(refreshTimeout); 88 - refreshTimeout = setTimeout(() => { 89 - playStream(streamUrlElem.value); 90 - }, 1000); 91 - }); 92 - 93 - maximizeButtonElem.addEventListener("click", () => { 94 - document.body.classList.toggle("theater"); 95 - }); 96 - 97 - ready().then(() => { 98 - OvenPlayer.debug(true); 99 - const hash = document.location.hash.substring(1); 100 - const decoded = base64url.decode(hash); 101 - if (isWebSocketURL(decoded)) streamUrlElem.value = decoded; 102 - playStream(decoded); 103 - });

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

-31

src/stream.pug

··· 1 - include include/link 2 - doctype html 3 - html(lang="en") 4 - head 5 - meta(charset="utf-8") 6 - title Scrumplex &middot; Livestream 7 - link(rel="stylesheet", href="scss/application.scss") 8 - include include/head 9 - meta(name="page-topic" content="Scrumplex") 10 - meta(name="robots" content="noindex") 11 - body.scroll 12 - include include/noscript 13 - 14 - div.container.wrapper#wrapper 15 - div.sheet.sheet-splash.wavy#main 16 - div.row: div.col 17 - h1 WebRTC Live Stream Player 18 - p. 19 - Paste a WebSocket URL below, to watch a livestream. 20 - If you want to setup your own live stream, then take a look at #[+link(true, false)(href="https://airensoft.gitbook.io/ovenmediaengine/") OvenMediaEngine]. 21 - #[br] 22 - If you want to share your stream with others, then just share the URL of this page. 23 - 24 - div.row: div.col.flex.flex-align-center 25 - label(for="stream-url") Stream URL 26 - input.flex-grow(type="url", id="stream-url", name="stream-url") 27 - div.row: div.col 28 - div#ovenplayer 29 - button.btn.btn-primary#maximizeButton Toggle Theater Mode 30 - 31 - script(type="module", src="js/stream.js")

··· 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0