fix http-flv player, ffplayout#349

This commit is contained in:
jb-alvarado 2023-07-13 07:36:27 +02:00
parent 98e72e91dd
commit 6d356e0cd7

View File

@ -2,14 +2,9 @@
<div> <div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row control-row"> <div class="row control-row">
<div class="col-3 player-col"> <div class="col-3 player-col d-flex flex-column">
<div> <div class="d-flex flex-grow-1 align-items-center">
<video <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" class="w-100" controls />
v-if="streamExtension === 'flv'"
ref="httpStreamFlv"
width="100%"
controls
/>
<VideoPlayer <VideoPlayer
class="live-player" class="live-player"
v-else-if="configStore.configGui[configStore.configID]" v-else-if="configStore.configGui[configStore.configID]"
@ -21,10 +16,12 @@
suppressNotSupportedError: true, suppressNotSupportedError: true,
autoplay: false, autoplay: false,
preload: 'auto', preload: 'auto',
sources: [{ sources: [
type: 'application/x-mpegURL', {
src: configStore.configGui[configStore.configID].preview_url type: 'application/x-mpegURL',
}] src: configStore.configGui[configStore.configID].preview_url,
},
],
}" }"
/> />
</div> </div>
@ -44,11 +41,7 @@
</div> </div>
</div> </div>
<div class="col current-clip"> <div class="col current-clip">
<div <div v-if="playlistStore.ingestRuns" class="current-clip-text" title="Live Ingest">
v-if="playlistStore.ingestRuns"
class="current-clip-text"
title="Live Ingest"
>
Live Ingest Live Ingest
</div> </div>
<div v-else class="current-clip-text" :title="filename(playlistStore.currentClip)"> <div v-else class="current-clip-text" :title="filename(playlistStore.currentClip)">
@ -170,11 +163,11 @@ const httpStreamFlv = ref(null)
const httpFlvSource = ref({ const httpFlvSource = ref({
type: 'flv', type: 'flv',
isLive: true, isLive: true,
url: configStore.configGui[configStore.configID].preview_url url: configStore.configGui[configStore.configID].preview_url,
}) })
const mpegtsOptions = ref({ const mpegtsOptions = ref({
lazyLoadMaxDuration: 3 * 60, lazyLoadMaxDuration: 3 * 60,
liveBufferLatencyChasing: true liveBufferLatencyChasing: true,
}) })
onMounted(() => { onMounted(() => {
@ -248,7 +241,7 @@ async function playoutStatus() {
await $fetch(`/api/control/${channel}/process/`, { await $fetch(`/api/control/${channel}/process/`, {
method: 'POST', method: 'POST',
headers: { ...contentType, ...authStore.authHeader }, headers: { ...contentType, ...authStore.authHeader },
body: JSON.stringify({ command: 'status' }) body: JSON.stringify({ command: 'status' }),
}) })
.then((response: any) => { .then((response: any) => {
if (response === 'active') { if (response === 'active') {
@ -272,7 +265,7 @@ async function controlProcess(state: string) {
await $fetch(`/api/control/${channel}/process/`, { await $fetch(`/api/control/${channel}/process/`, {
method: 'POST', method: 'POST',
headers: { ...contentType, ...authStore.authHeader }, headers: { ...contentType, ...authStore.authHeader },
body: JSON.stringify({ command: state }) body: JSON.stringify({ command: state }),
}) })
setTimeout(() => { setTimeout(() => {
@ -293,7 +286,7 @@ async function controlPlayout(state: string) {
await $fetch(`/api/control/${channel}/playout/`, { await $fetch(`/api/control/${channel}/playout/`, {
method: 'POST', method: 'POST',
headers: { ...contentType, ...authStore.authHeader }, headers: { ...contentType, ...authStore.authHeader },
body: JSON.stringify({ control: state }) body: JSON.stringify({ control: state }),
}) })
setTimeout(() => { setTimeout(() => {