jbilcke-hf HF staff commited on
Commit
826207d
1 Parent(s): 181da2e

switch to a new, better library

Browse files
Files changed (3) hide show
  1. README.md +4 -0
  2. public/index.html +40 -11
  3. 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
- <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
6
- <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
7
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
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 (flvjs.isSupported()) {
17
  var videoElement = document.getElementById('videoElement')
18
- var flvPlayer = flvjs.createPlayer({
19
- type: 'flv',
20
- url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv'
 
21
  })
22
- flvPlayer.attachMediaElement(videoElement)
23
- flvPlayer.load()
24
- flvPlayer.play()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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