Spaces:
Running
Running
Commit
•
1d46006
1
Parent(s):
e24665a
ready for push
Browse files- public/index.html +57 -9
public/index.html
CHANGED
|
@@ -5,19 +5,29 @@
|
|
| 5 |
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
| 6 |
<script src="/mpegts.js"></script>
|
| 7 |
</head>
|
| 8 |
-
<body
|
|
|
|
|
|
|
| 9 |
<div
|
| 10 |
class="fixed w-full top-4 px-6 font-mono text-white flex items-center justify-between space-x-1"
|
| 11 |
style="text-shadow: 0px 0px 3px #000000">
|
| 12 |
|
| 13 |
-
<div class="text-md">🤗
|
| 14 |
-
<
|
| 15 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
</div>
|
| 17 |
<div class="text-xs">(<a
|
| 18 |
class=""
|
| 19 |
-
href="
|
| 20 |
-
|
|
|
|
| 21 |
</div>
|
| 22 |
<div class="flex w-full">
|
| 23 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
|
@@ -35,14 +45,50 @@
|
|
| 35 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
|
| 36 |
<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
|
| 37 |
<script>
|
| 38 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 39 |
// some devices such as the iPhone don't support MSE Live Playback
|
| 40 |
if (mpegts.getFeatureList().mseLivePlayback) {
|
| 41 |
var videoElement = document.getElementById('videoElement')
|
| 42 |
var player = mpegts.createPlayer({
|
| 43 |
type: 'flv', // could also be mpegts, m2ts, flv
|
| 44 |
isLive: true,
|
| 45 |
-
url:
|
| 46 |
})
|
| 47 |
player.attachMediaElement(videoElement)
|
| 48 |
|
|
@@ -80,7 +126,9 @@
|
|
| 80 |
|
| 81 |
player.play()
|
| 82 |
}
|
| 83 |
-
}
|
|
|
|
|
|
|
| 84 |
</script>
|
| 85 |
</body>
|
| 86 |
</html>
|
|
|
|
| 5 |
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
| 6 |
<script src="/mpegts.js"></script>
|
| 7 |
</head>
|
| 8 |
+
<body
|
| 9 |
+
x-data="app()" x-init="init()"
|
| 10 |
+
class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
|
| 11 |
<div
|
| 12 |
class="fixed w-full top-4 px-6 font-mono text-white flex items-center justify-between space-x-1"
|
| 13 |
style="text-shadow: 0px 0px 3px #000000">
|
| 14 |
|
| 15 |
+
<div class="text-md">🤗 AI WebTV 👉 Pick a stream:
|
| 16 |
+
<template x-for="chan in channels">
|
| 17 |
+
<span
|
| 18 |
+
class="text-lg mr-2"
|
| 19 |
+
:class="chan.id === channel.id
|
| 20 |
+
? 'font-bold'
|
| 21 |
+
: 'hover:underline opacity-60 hover:opacity-80 cursor-pointer'"
|
| 22 |
+
x-on:click="window.location = `${window.location.origin}/?channel=${chan.id}`"
|
| 23 |
+
x-text="chan.label"></span>
|
| 24 |
+
</template>
|
| 25 |
</div>
|
| 26 |
<div class="text-xs">(<a
|
| 27 |
class=""
|
| 28 |
+
:href="channel.modelUrl"
|
| 29 |
+
x-text="channel.model"
|
| 30 |
+
target="_blank"></a>, <span x-text="channel.resolution"></span>)</div>
|
| 31 |
</div>
|
| 32 |
<div class="flex w-full">
|
| 33 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
|
|
|
| 45 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
|
| 46 |
<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
|
| 47 |
<script>
|
| 48 |
+
function app() {
|
| 49 |
+
return {
|
| 50 |
+
channels: {
|
| 51 |
+
'1': {
|
| 52 |
+
id: '1',
|
| 53 |
+
label: '#legacy',
|
| 54 |
+
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv',
|
| 55 |
+
resolution: '576x320',
|
| 56 |
+
model: 'cerspense/zeroscope_v2_576w',
|
| 57 |
+
modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_576w',
|
| 58 |
+
},
|
| 59 |
+
'2': {
|
| 60 |
+
id: '2',
|
| 61 |
+
label: '#HDTV',
|
| 62 |
+
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv2.flv',
|
| 63 |
+
resolution: '1024x576',
|
| 64 |
+
model: 'cerspense/zeroscope_v2_XL',
|
| 65 |
+
modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
|
| 66 |
+
},
|
| 67 |
+
},
|
| 68 |
+
defaultChannelId: '2',
|
| 69 |
+
channel: {
|
| 70 |
+
},
|
| 71 |
+
init() {
|
| 72 |
+
console.log('initializing WebTV..')
|
| 73 |
+
|
| 74 |
+
const urlParams = new URLSearchParams(window.location.search)
|
| 75 |
+
|
| 76 |
+
const requestedChannelId = `${urlParams.get('channel') || ''}`
|
| 77 |
+
|
| 78 |
+
const defaultChannel = this.channels[this.defaultChannelId]
|
| 79 |
+
|
| 80 |
+
this.channel = this.channels[requestedChannelId] || defaultChannel
|
| 81 |
+
|
| 82 |
+
console.log(`Selected channel: ${this.channel.label}`)
|
| 83 |
+
console.log(`Stream URL: ${this.channel.url}`)
|
| 84 |
+
|
| 85 |
// some devices such as the iPhone don't support MSE Live Playback
|
| 86 |
if (mpegts.getFeatureList().mseLivePlayback) {
|
| 87 |
var videoElement = document.getElementById('videoElement')
|
| 88 |
var player = mpegts.createPlayer({
|
| 89 |
type: 'flv', // could also be mpegts, m2ts, flv
|
| 90 |
isLive: true,
|
| 91 |
+
url: this.channel.url,
|
| 92 |
})
|
| 93 |
player.attachMediaElement(videoElement)
|
| 94 |
|
|
|
|
| 126 |
|
| 127 |
player.play()
|
| 128 |
}
|
| 129 |
+
}
|
| 130 |
+
}
|
| 131 |
+
}
|
| 132 |
</script>
|
| 133 |
</body>
|
| 134 |
</html>
|