Skip to content

Commit

Permalink
Cleaner & more detailed video server config page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingalls
ingalls committed Sep 16, 2024
1 parent b43ad23 commit ea2cad2
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 49 deletions.
4 changes: 2 additions & 2 deletions api/lib/control/video-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,8 +246,8 @@ export default class VideoServiceControl {
}

if (c.config && c.config.hls) {
// Format: http://localhost:8888/mystream
const url = new URL(`/${lease.path}`, c.url);
// Format: http://localhost:8888/mystream/index.m3u8
const url = new URL(`/${lease.path}/index.m3u8`, c.url);
url.port = c.config.hlsAddress.replace(':', '');

protocols.hls = {
Expand Down
148 changes: 102 additions & 46 deletions api/web/src/components/Admin/VideoConfig.vue
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,114 @@
<template>
<div class='col-12 py-2 g-2'>
<TablerLoading v-if='loading'/>
<div v-else class='row g-0'>
<TablerToggle
v-model='config.api'
:disabled='disabled'
label='Config API Enabled'
/>
<div v-else class='row g-0 px-2'>
<div class='col-12'>
<TablerToggle
v-model='config.api'
:disabled='disabled'
class='subheader'
label='Config API Enabled'
/>
<div v-if='config.api' id='api-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.apiAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.metrics'
:disabled='disabled'
label='Metrics Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.metrics'
:disabled='disabled'
class='subheader'
label='Metrics API Enabled'
/>
<div v-if='config.metrics' id='metrics-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.metricsAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.pprof'
:disabled='disabled'
label='Performance Metrics Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.pprof'
:disabled='disabled'
class='subheader'
label='Performance API Enabled'
/>
<div v-if='config.pprof' id='pprof-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.pprofAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.playback'
:disabled='disabled'
label='Playback API Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.playback'
:disabled='disabled'
class='subheader'
label='Playback API Enabled'
/>
<div v-if='playback' id='playback-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.playbackAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.rtsp'
:disabled='disabled'
label='RTSP Endpoint Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.rtsp'
:disabled='disabled'
class='subheader'
label='RTSP API Enabled'
/>
<div v-if='config.rtsp' id='rtsp-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.rtspAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.rtmp'
:disabled='disabled'
label='RTMP Endpoint Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.rtmp'
:disabled='disabled'
class='subheader'
label='RTMP API Enabled'
/>
<div v-if='config.rtmp' id='rtmp-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.rtmpAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.hls'
:disabled='disabled'
label='HLS Endpoint Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.hls'
:disabled='disabled'
class='subheader'
label='HLS API Enabled'
/>
<div v-if='config.hls' id='hls-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.hlsAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.webrtc'
:disabled='disabled'
label='WebRTC Endpoint Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.webrtc'
:disabled='disabled'
class='subheader'
label='WebRTC API Enabled'
/>
<div v-if='config.webrtc' id='webrtc-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.webrtcAddress' :disabled='true'/>
</div>
</div>

<TablerToggle
v-model='config.srt'
:disabled='disabled'
label='SRT Endpoint Enabled'
/>
<div class='col-12 pt-2'>
<TablerToggle
v-model='config.srt'
:disabled='disabled'
class='subheader'
label='SRT API Enabled'
/>
<div v-if='config.srt' id='srt-container' class='col-12 border rounded px-2 py-2'>
<TablerInput label='Port' v-model='config.srtAddress' :disabled='true'/>
</div>
</div>
</div>

<div v-if='!disabled' class='col-12 d-flex px-2 py-3'>
Expand Down Expand Up @@ -89,6 +143,7 @@
import { std } from '/src/std.ts';
import {
TablerNone,
TablerInput,
TablerLoading,
TablerToggle
} from '@tak-ps/vue-tabler';
Expand All @@ -97,6 +152,7 @@ export default {
name: 'VideoConfig',
components: {
TablerNone,
TablerInput,
TablerLoading,
TablerToggle
},
Expand Down
3 changes: 2 additions & 1 deletion api/web/src/components/CloudTAK/util/Video.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<TablerLoading v-if='loading'/>
<template v-else-if='!protocols.hls'>
<TablerNone label='HLS Streaming Protocol'/>
<TablerNone label='HLS Streaming Protocol' :create='false'/>
</template>
<template v-else>
<video
Expand All @@ -14,6 +14,7 @@
autoplay='true'
>
<source
type='application/x-mpegURL'
:src='protocols.hls.url'
>
</video>
Expand Down

0 comments on commit ea2cad2

Please sign in to comment.