Spaces:
Running
Running
File size: 5,189 Bytes
e4eeb10 181da2e e4eeb10 826207d e4eeb10 1d46006 d65c38a 9423799 d65c38a f083839 9423799 f006383 9423799 181da2e b5e7079 e4eeb10 b5e7079 826207d 181da2e 1d46006 d65c38a 1d46006 9423799 1d46006 9423799 1d46006 d65c38a 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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<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
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 x-show="!enabled">this space has been disabled by its owner</div>
<div
x-show="enabled"
class="fixed w-full z-20 top-4 px-6 font-mono text-white flex items-center justify-between space-x-1"
style="text-shadow: 0px 0px 3px #000000">
<div class="text-md">🤗 AI WebTV 👉 Pick a stream:
<template x-for="chan in channels">
<span
class="text-lg mr-2"
:class="chan.id === channel.id
? 'font-bold'
: 'hover:underline opacity-60 hover:opacity-80 cursor-pointer'"
x-on:click="window.location = `${window.location.origin}/?channel=${chan.id}&beta=true`"
x-text="chan.label"></span>
</template>
</div>
<div class="text-xs">(<a
class=""
:href="channel.modelUrl"
x-text="channel.model"
target="_blank"></a>, <span x-text="channel.resolution"></span>)</div>
</div>
<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>
function app() {
return {
enabled: false,
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',
},
'2': {
id: '2',
label: '#HDTV',
url: 'https://jbilcke-hf-media-server.hf.space/live/webtv2.flv',
resolution: '1024x576',
model: 'cerspense/zeroscope_v2_XL',
modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
},
},
defaultChannelId: '2',
channel: {
},
init() {
console.log('initializing WebTV..')
const urlParams = new URLSearchParams(window.location.search)
const requestedChannelId = `${urlParams.get('channel') || ''}`
this.enabled = `${urlParams.get('beta') || 'false'}` === 'true'
if (!this.enabled) {
return
}
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> |