Spaces:
Running
Running
File size: 2,741 Bytes
e4eeb10 181da2e e4eeb10 826207d e4eeb10 181da2e b5e7079 e4eeb10 b5e7079 826207d 181da2e b5e7079 826207d 181da2e 826207d 181da2e 826207d 4a5a7e0 826207d b5e7079 826207d b5e7079 826207d b5e7079 826207d b5e7079 4a5a7e0 d96076f 4a5a7e0 b5e7079 826207d 181da2e e4eeb10 181da2e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<html>
<head>
<title>AI Web TV 🤗</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" />
<!--<link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />-->
<script src="/mpegts.js"></script>
</head>
<body class="fixed inset-0 bg-[rgb(0,0,0)] flex flex-col w-full items-center justify-center">
<div class="flex w-full">
<video id="videoElement" muted autoplay class="aspect-video w-full"></video>
<!--
We probably want to display a nice logo or decoration somewhere
<img src="/hf-logo.png" class="absolute mt-2 w-[16%]" />
-->
</div>
<script>
// disable analytics (we don't use VideoJS yet anyway)
window.HELP_IMPROVE_VIDEOJS = false
</script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
<!--<script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>-->
<script>
(() => {
// some devices such as the iPhone don't support MSE Live Playback
if (mpegts.getFeatureList().mseLivePlayback) {
var videoElement = document.getElementById('videoElement')
var player = mpegts.createPlayer({
type: 'flv', // could also be mpegts, m2ts, flv
isLive: true,
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv'
})
player.attachMediaElement(videoElement)
player.on(mpegts.Events.ERROR, function (err) {
console.log('got an error:', err)
if (err.type === mpegts.ErrorTypes.NETWORK_ERROR) {
console.log('Network error')
}
});
player.load()
// due to an issue with our stream when the FFMPEG playlist ends,
// the stream gets interrupted for ~1sec, which causes the frontend to hangs up
// the following code tries to restart the page when that happens, but in the long term
// we should fix the issue on the server side (fix our FFMPEG bash script)
videoElement.addEventListener('ended', function() {
console.log('Stream ended, trying to reload...')
setTimeout(() => {
console.log('Reloading the page..')
// Unloading and loading the source again isn't enough it seems
// player.unload()
// player.load()
window.location.reload()
}, 1200)
}, false)
player.play()
}
})()
</script>
</body>
</html> |