add realtime processing endpoint

This commit is contained in:
Cedric Verstraeten
2024-06-11 22:47:01 +02:00
parent 413ed12fe2
commit ecadf7a4db
10 changed files with 250 additions and 82 deletions

View File

@@ -1,7 +1,6 @@
{
"name": "agent-ui",
"version": "0.1.0",
"private": false,
"dependencies": {
"@giantmachines/redux-websocket": "^1.5.1",
"@kerberos-io/ui": "^1.76.0",

View File

@@ -160,7 +160,12 @@
"description2_mqtt": "to the Kerberos Agent, to achieve for example livestreaming or ONVIF (PTZ) capabilities.",
"mqtt_brokeruri": "Broker Uri",
"mqtt_username": "Username",
"mqtt_password": "Password"
"mqtt_password": "Password",
"realtimeprocessing": "Realtime Processing",
"description_realtimeprocessing": "By enabling realtime processing, you will receive realtime video keyframes through the MQTT connection specified above.",
"realtimeprocessing_topic": "Topic to publish",
"realtimeprocessing_enabled": "Enable realtime processing",
"description_realtimeprocessing_enabled": "Send realtime video keyframes through MQTT."
},
"conditions": {
"timeofinterest": "Time Of Interest",

View File

@@ -1123,6 +1123,87 @@ class Settings extends React.Component {
</Block>
)}
{/* STUN/TURN block */}
{showStreamingSection && config.offline !== 'true' && (
<Block>
<BlockHeader>
<h4>{t('settings.streaming.stun_turn_forward')}</h4>
</BlockHeader>
<BlockBody>
<p>{t('settings.streaming.stun_turn_description_forward')}</p>
<div className="toggle-wrapper">
<Toggle
on={config.capture.forwardwebrtc === 'true'}
disabled={false}
onClick={(event) =>
this.onUpdateToggle(
'capture',
'forwardwebrtc',
event,
config.capture
)
}
/>
<div>
<span>{t('settings.streaming.stun_turn_webrtc')}</span>
<p>
{t('settings.streaming.stun_turn_description_webrtc')}
</p>
</div>
</div>
<div className="toggle-wrapper">
<Toggle
on={config.capture.transcodingwebrtc === 'true'}
disabled={false}
onClick={(event) =>
this.onUpdateToggle(
'capture',
'transcodingwebrtc',
event,
config.capture
)
}
/>
<div>
<span>{t('settings.streaming.stun_turn_transcode')}</span>
<p>
{t(
'settings.streaming.stun_turn_description_transcode'
)}
</p>
</div>
</div>
{config.capture.transcodingwebrtc === 'true' && (
<Input
noPadding
label={t('settings.streaming.stun_turn_downscale')}
value={config.capture.transcodingresolution}
placeholder="The % of the original resolution."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'transcodingresolution',
value,
config.capture
)
}
/>
)}
</BlockBody>
<BlockFooter>
<Button
label={t('buttons.save')}
onClick={this.saveConfig}
type="default"
icon="pencil"
/>
</BlockFooter>
</Block>
)}
{showPersistenceSection && config.offline !== 'true' && (
<Block>
<BlockHeader>
@@ -1488,75 +1569,55 @@ class Settings extends React.Component {
</Block>
)}
{/* STUN/TURN block */}
{showStreamingSection && config.offline !== 'true' && (
<Block>
<BlockHeader>
<h4>{t('settings.streaming.stun_turn_forward')}</h4>
<h4>{t('settings.streaming.realtimeprocessing')}</h4>
</BlockHeader>
<BlockBody>
<p>{t('settings.streaming.stun_turn_description_forward')}</p>
<p>
{t('settings.streaming.description_realtimeprocessing')}
</p>
<div className="toggle-wrapper">
<Toggle
on={config.capture.forwardwebrtc === 'true'}
on={config.realtimeprocessing === 'true'}
disabled={false}
onClick={(event) =>
this.onUpdateToggle(
'capture',
'forwardwebrtc',
'',
'realtimeprocessing',
event,
config.capture
config
)
}
/>
<div>
<span>{t('settings.streaming.stun_turn_webrtc')}</span>
<p>
{t('settings.streaming.stun_turn_description_webrtc')}
</p>
</div>
</div>
<div className="toggle-wrapper">
<Toggle
on={config.capture.transcodingwebrtc === 'true'}
disabled={false}
onClick={(event) =>
this.onUpdateToggle(
'capture',
'transcodingwebrtc',
event,
config.capture
)
}
/>
<div>
<span>{t('settings.streaming.stun_turn_transcode')}</span>
<span>
{t('settings.streaming.realtimeprocessing_enabled')}
</span>
<p>
{t(
'settings.streaming.stun_turn_description_transcode'
'settings.streaming.description_realtimeprocessing_enabled'
)}
</p>
</div>
</div>
{config.capture.transcodingwebrtc === 'true' && (
<Input
noPadding
label={t('settings.streaming.stun_turn_downscale')}
value={config.capture.transcodingresolution}
placeholder="The % of the original resolution."
onChange={(value) =>
this.onUpdateNumberField(
'capture',
'transcodingresolution',
value,
config.capture
)
}
/>
)}
<Input
noPadding
label={t('settings.streaming.realtimeprocessing_topic')}
value={config.realtimeprocessing_topic}
placeholder="kerberos/keyframes/key"
onChange={(value) =>
this.onUpdateField(
'',
'realtimeprocessing_topic',
value,
config
)
}
/>
</BlockBody>
<BlockFooter>
<Button