Spaces:
Running
Running
Commit
•
826207d
1
Parent(s):
181da2e
switch to a new, better library
Browse files- README.md +4 -0
- public/index.html +40 -11
- public/mpegts.js +0 -0
README.md
CHANGED
@@ -10,6 +10,10 @@ app_port: 7860
|
|
10 |
|
11 |
A generative AI WebTV, powered by Zeroscope and Hugging Face.
|
12 |
|
|
|
|
|
|
|
|
|
13 |
# Installation
|
14 |
## Building and run without Docker
|
15 |
|
|
|
10 |
|
11 |
A generative AI WebTV, powered by Zeroscope and Hugging Face.
|
12 |
|
13 |
+
Note: this won't work on iOS due to an apparent ban on Media Source Extensions (available on iPadOS).
|
14 |
+
|
15 |
+
It should be possible however to use some other protocol or library.
|
16 |
+
|
17 |
# Installation
|
18 |
## Building and run without Docker
|
19 |
|
public/index.html
CHANGED
@@ -2,26 +2,55 @@
|
|
2 |
<head>
|
3 |
<title>AI Web TV 🤗</title>
|
4 |
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
|
5 |
-
|
6 |
-
|
7 |
-
<script src="
|
8 |
-
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
|
9 |
</head>
|
10 |
<body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
|
11 |
<div class="flex w-full">
|
12 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
13 |
</div>
|
|
|
|
|
|
|
|
|
|
|
14 |
<script>
|
15 |
(() => {
|
16 |
-
if (
|
17 |
var videoElement = document.getElementById('videoElement')
|
18 |
-
var
|
19 |
-
type: 'flv',
|
20 |
-
|
|
|
21 |
})
|
22 |
-
|
23 |
-
|
24 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
25 |
}
|
26 |
})()
|
27 |
</script>
|
|
|
2 |
<head>
|
3 |
<title>AI Web TV 🤗</title>
|
4 |
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
|
5 |
+
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
6 |
+
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
|
7 |
+
<script src="/mpegts.js"></script>
|
|
|
8 |
</head>
|
9 |
<body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
|
10 |
<div class="flex w-full">
|
11 |
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
|
12 |
</div>
|
13 |
+
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
|
14 |
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
15 |
+
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
|
16 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
|
17 |
+
<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
|
18 |
<script>
|
19 |
(() => {
|
20 |
+
if (mpegts.getFeatureList().mseLivePlayback) {
|
21 |
var videoElement = document.getElementById('videoElement')
|
22 |
+
var player = mpegts.createPlayer({
|
23 |
+
type: 'flv', // could also be mpegts, m2ts, flv
|
24 |
+
isLive: true,
|
25 |
+
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv'
|
26 |
})
|
27 |
+
player.attachMediaElement(videoElement)
|
28 |
+
|
29 |
+
player.on(mpegts.Events.ERROR, function (err) {
|
30 |
+
console.log('got an error:', err)
|
31 |
+
if (err.type === mpegts.ErrorTypes.NETWORK_ERROR) {
|
32 |
+
console.log('Network error, trying to recover immediately...')
|
33 |
+
setTimeout(() => {
|
34 |
+
// Unload the current stream
|
35 |
+
player.unload()
|
36 |
+
// Load the stream again
|
37 |
+
player.load()
|
38 |
+
}, 500)
|
39 |
+
}
|
40 |
+
});
|
41 |
+
player.load()
|
42 |
+
|
43 |
+
videoElement.addEventListener('ended', function() {
|
44 |
+
console.log('Stream ended, trying to reload...');
|
45 |
+
setTimeout(() => {
|
46 |
+
console.log('Reloading the page..')
|
47 |
+
//Unloading and loading the source again
|
48 |
+
player.unload()
|
49 |
+
player.load()
|
50 |
+
}, 500)
|
51 |
+
}, false);
|
52 |
+
|
53 |
+
player.play()
|
54 |
}
|
55 |
})()
|
56 |
</script>
|
public/mpegts.js
ADDED
The diff for this file is too large to render.
See raw diff
|
|