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/[email protected]/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/[email protected]/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/[email protected]/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
|
|
|