Spaces:
Running
Running
File size: 3,812 Bytes
e4eeb10 181da2e e4eeb10 826207d e4eeb10 1d46006 181da2e b5e7079 e4eeb10 b5e7079 826207d 181da2e 1d46006 ee60fb1 1d46006 b5e7079 826207d 181da2e 826207d 1d46006 181da2e 826207d 4a5a7e0 826207d b5e7079 826207d b5e7079 826207d b5e7079 826207d b5e7079 4a5a7e0 d96076f 4a5a7e0 b5e7079 826207d cd0c4c8 7c95c79 cd0c4c8 7c95c79 cd0c4c8 826207d 181da2e 1d46006 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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<html>
<head>
<title>AI Web TV 🤗</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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
x-data="app()" x-init="init()"
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/[email protected]/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>
function app() {
return {
channels: {
'1': {
id: '1',
label: '#legacy',
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv.flv',
resolution: '576x320',
model: 'cerspense/zeroscope_v2_576w',
modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_576w',
},
},
defaultChannelId: '1',
channel: {
},
init() {
console.log('initializing WebTV..')
const urlParams = new URLSearchParams(window.location.search)
const requestedChannelId = `${urlParams.get('channel') || ''}`
const defaultChannel = this.channels[this.defaultChannelId]
this.channel = this.channels[requestedChannelId] || defaultChannel
console.log(`Selected channel: ${this.channel.label}`)
console.log(`Stream URL: ${this.channel.url}`)
// 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: this.channel.url,
})
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)
// Handle autoplay restrictions.
let promise = videoElement.play()
if (promise !== undefined) {
videoElement.addEventListener('click', function() {
videoElement.play()
})
}
player.play()
}
}
}
}
</script>
</body>
</html> |