1193 lines
31 KiB
JavaScript
1193 lines
31 KiB
JavaScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import SemverSatisfies from 'semver/functions/satisfies';
|
|
|
|
import { useLingui } from '@lingui/react';
|
|
import { Trans, t } from '@lingui/macro';
|
|
import makeStyles from '@mui/styles/makeStyles';
|
|
import urlparser from 'url-parse';
|
|
import Accordion from '@mui/material/Accordion';
|
|
import AccordionDetails from '@mui/material/AccordionDetails';
|
|
import AccordionSummary from '@mui/material/AccordionSummary';
|
|
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
|
import Button from '@mui/material/Button';
|
|
import Grid from '@mui/material/Grid';
|
|
import Icon from '@mui/icons-material/AccountTree';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
import WarningIcon from '@mui/icons-material/Warning';
|
|
|
|
import BoxTextarea from '../../../misc/BoxTextarea';
|
|
import BoxText from '../../../misc/BoxText';
|
|
import Checkbox from '../../../misc/Checkbox';
|
|
import FormInlineButton from '../../../misc/FormInlineButton';
|
|
import MultiSelect from '../../../misc/MultiSelect';
|
|
import MultiSelectOption from '../../../misc/MultiSelectOption';
|
|
import Password from '../../../misc/Password';
|
|
import Select from '../../../misc/Select';
|
|
import Textarea from '../../../misc/Textarea';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
gridContainer: {
|
|
marginTop: '0.5em',
|
|
},
|
|
}));
|
|
|
|
const initSettings = (initialSettings, config) => {
|
|
if (!initialSettings) {
|
|
initialSettings = {};
|
|
}
|
|
|
|
const settings = {
|
|
mode: 'pull',
|
|
address: '',
|
|
username: '',
|
|
password: '',
|
|
push: {},
|
|
rtsp: {},
|
|
http: {},
|
|
general: {},
|
|
...initialSettings,
|
|
};
|
|
|
|
settings.push = {
|
|
type: 'rtmp',
|
|
name: config.channelid,
|
|
...settings.push,
|
|
};
|
|
|
|
settings.rtsp = {
|
|
udp: false,
|
|
stimeout: 5000000,
|
|
...settings.rtsp,
|
|
};
|
|
|
|
settings.http = {
|
|
readNative: true,
|
|
forceFramerate: false,
|
|
framerate: 25,
|
|
userAgent: '',
|
|
referer: '',
|
|
http_proxy: '',
|
|
...settings.http,
|
|
};
|
|
|
|
settings.general = {
|
|
analyzeduration: 5000000,
|
|
analyzeduration_rtmp: 3000000,
|
|
analyzeduration_http: 20000000,
|
|
probesize: 5000000,
|
|
max_probe_packets: 2500,
|
|
fflags: ['genpts'],
|
|
thread_queue_size: 512,
|
|
copyts: false,
|
|
start_at_zero: false,
|
|
use_wallclock_as_timestamps: false,
|
|
avoid_negative_ts: 'auto',
|
|
...settings.general,
|
|
};
|
|
|
|
return settings;
|
|
};
|
|
|
|
const initConfig = (initialConfig) => {
|
|
if (!initialConfig) {
|
|
initialConfig = {};
|
|
}
|
|
|
|
const config = {
|
|
rtmp: {},
|
|
srt: {},
|
|
hls: {},
|
|
channelid: 'external',
|
|
...initialConfig,
|
|
};
|
|
|
|
config.rtmp = {
|
|
enabled: false,
|
|
secure: false,
|
|
host: 'localhost',
|
|
local: 'localhost',
|
|
app: '',
|
|
token: '',
|
|
...config.rtmp,
|
|
};
|
|
|
|
config.srt = {
|
|
enabled: false,
|
|
host: 'localhost',
|
|
local: 'localhost',
|
|
token: '',
|
|
passphrase: '',
|
|
...config.srt,
|
|
};
|
|
|
|
config.hls = {
|
|
secure: false,
|
|
host: 'localhost',
|
|
local: 'localhost',
|
|
credentials: '',
|
|
...config.hls,
|
|
};
|
|
|
|
return config;
|
|
};
|
|
|
|
const initSkills = (initialSkills) => {
|
|
if (!initialSkills) {
|
|
initialSkills = {};
|
|
}
|
|
|
|
const skills = {
|
|
ffmpeg: {},
|
|
formats: {},
|
|
protocols: {},
|
|
...initialSkills,
|
|
};
|
|
|
|
skills.ffmpeg = {
|
|
version: '0.0.0',
|
|
...skills.ffmpeg,
|
|
};
|
|
|
|
skills.formats = {
|
|
demuxers: [],
|
|
...skills.formats,
|
|
};
|
|
|
|
skills.protocols = {
|
|
input: [],
|
|
...skills.protocols,
|
|
};
|
|
|
|
if (skills.formats.demuxers.includes('rtsp')) {
|
|
if (!skills.protocols.input.includes('rtsp')) {
|
|
skills.protocols.input.push('rtsp');
|
|
}
|
|
|
|
if (skills.protocols.input.includes('tls')) {
|
|
if (!skills.protocols.input.includes('rtsps')) {
|
|
skills.protocols.input.push('rtsps');
|
|
}
|
|
}
|
|
}
|
|
|
|
return skills;
|
|
};
|
|
|
|
const createInputs = (settings, config, skills) => {
|
|
settings = initSettings(settings);
|
|
config = initConfig(config);
|
|
skills = initSkills(skills);
|
|
|
|
let ffmpeg_version = 4;
|
|
if (SemverSatisfies(skills.ffmpeg.version, '^5.0.0')) {
|
|
ffmpeg_version = 5;
|
|
}
|
|
|
|
const input = {
|
|
address: '',
|
|
options: [],
|
|
};
|
|
|
|
if (settings.mode === 'push') {
|
|
let name = settings.push.name;
|
|
if (settings.push.type === 'hls') {
|
|
if (name === 'none') {
|
|
name = config.channelid;
|
|
}
|
|
input.address = getLocalHLS(name);
|
|
} else if (settings.push.type === 'rtmp') {
|
|
if (name === config.channelid) {
|
|
name += '.stream';
|
|
}
|
|
input.address = getLocalRTMP(name);
|
|
} else if (settings.push.type === 'srt') {
|
|
if (name === config.channelid) {
|
|
name += '.stream';
|
|
}
|
|
input.address = getLocalSRT(name);
|
|
} else {
|
|
input.address = '';
|
|
}
|
|
} else {
|
|
input.address = settings.address;
|
|
}
|
|
|
|
// registrate protocol by address
|
|
const protocol = getProtocolClass(input.address);
|
|
|
|
// general settings (pull/push)
|
|
if (settings.general.fflags.length !== 0) {
|
|
input.options.push('-fflags', '+' + settings.general.fflags.join('+'));
|
|
}
|
|
input.options.push('-thread_queue_size', settings.general.thread_queue_size);
|
|
if (settings.general.probesize !== 5000000) {
|
|
input.options.push('-probesize', settings.general.probesize);
|
|
}
|
|
if (settings.general.max_probe_packets !== 2500) {
|
|
input.options.push('-max_probe_packets', settings.general.max_probe_packets);
|
|
}
|
|
if (settings.general.copyts) {
|
|
input.options.push('-copyts');
|
|
}
|
|
if (settings.general.start_at_zero) {
|
|
input.options.push('-start_at_zero');
|
|
}
|
|
if (settings.general.use_wallclock_as_timestamps) {
|
|
input.options.push('-use_wallclock_as_timestamps', '1');
|
|
}
|
|
if (ffmpeg_version === 5 && settings.general.avoid_negative_ts !== 'auto') {
|
|
input.options.push('-avoid_negative_ts', settings.general.avoid_negative_ts);
|
|
}
|
|
|
|
// general settings > analyzeduration by protocol
|
|
//
|
|
// old settings:
|
|
// analyzeduration: 20s for http and 3s for rtmp streams
|
|
if (settings.mode === 'push') {
|
|
if (settings.push.type === 'hls') {
|
|
if (settings.general.analyzeduration_http !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration_http);
|
|
}
|
|
} else if (settings.push.type === 'rtmp') {
|
|
if (settings.general.analyzeduration_rtmp !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration_rtmp);
|
|
}
|
|
} else if (settings.push.type === 'srt') {
|
|
if (settings.general.analyzeduration !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration);
|
|
}
|
|
}
|
|
} else {
|
|
if (protocol === 'http') {
|
|
if (settings.general.analyzeduration_http !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration_http);
|
|
}
|
|
} else if (protocol === 'rtmp') {
|
|
if (settings.general.analyzeduration_rtmp !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration_rtmp);
|
|
}
|
|
} else {
|
|
if (settings.general.analyzeduration !== 5000000) {
|
|
input.options.push('-analyzeduration', settings.general.analyzeduration);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (settings.mode === 'pull') {
|
|
input.address = addUsernamePassword(input.address, settings.username, settings.password);
|
|
|
|
if (protocol === 'rtsp') {
|
|
if (ffmpeg_version === 4) {
|
|
input.options.push('-stimeout', settings.rtsp.stimeout);
|
|
} else {
|
|
input.options.push('-timeout', settings.rtsp.stimeout);
|
|
}
|
|
|
|
if (settings.rtsp.udp === true) {
|
|
input.options.push('-rtsp_transport', 'udp');
|
|
} else {
|
|
input.options.push('-rtsp_transport', 'tcp');
|
|
}
|
|
} else if (protocol === 'http') {
|
|
if (settings.http.readNative === true) {
|
|
input.options.push('-re');
|
|
}
|
|
|
|
if (settings.http.forceFramerate === true) {
|
|
input.options.push('-r', settings.http.framerate);
|
|
}
|
|
|
|
if (settings.http.userAgent.length !== 0) {
|
|
input.options.push('-user_agent', settings.http.userAgent);
|
|
}
|
|
|
|
if (settings.http.referer.length !== 0) {
|
|
input.options.push('-referer', settings.http.referer);
|
|
}
|
|
|
|
if (settings.http.http_proxy.length !== 0) {
|
|
input.options.push('-http_proxy', settings.http.http_proxy);
|
|
}
|
|
}
|
|
}
|
|
/*
|
|
if (skills.protocols.input.includes('playout')) {
|
|
if (protocol === 'http' || protocol === 'rtmp' || protocol === 'rtsp') {
|
|
if (!input.address.startsWith('playout:')) {
|
|
input.address = 'playout:' + input.address;
|
|
}
|
|
|
|
input.options.push('-playout_audio', '1');
|
|
}
|
|
}
|
|
*/
|
|
return [input];
|
|
};
|
|
|
|
const addUsernamePassword = (address, username, password) => {
|
|
if (username.length === 0 && password.length === 0) {
|
|
return address;
|
|
}
|
|
|
|
if (isAuthProtocol(address) === false) {
|
|
return address;
|
|
}
|
|
|
|
const url = urlparser(address, {});
|
|
if (username.length !== 0) {
|
|
url.set('username', username);
|
|
}
|
|
if (password.length !== 0) {
|
|
url.set('password', password);
|
|
}
|
|
|
|
return url.toString();
|
|
};
|
|
|
|
const getProtocol = (url) => {
|
|
const re = new RegExp('^([a-z][a-z0-9.+-:]*)://', 'i');
|
|
const matches = url.match(re);
|
|
|
|
if (matches === null || matches.length === 0) {
|
|
return '';
|
|
}
|
|
|
|
return matches[1];
|
|
};
|
|
|
|
const getProtocolClass = (url) => {
|
|
if (typeof url !== 'string') {
|
|
url = '';
|
|
}
|
|
|
|
const protocol = getProtocol(url);
|
|
if (protocol.length === 0) {
|
|
return '';
|
|
}
|
|
|
|
if (/rtmp(e|s|t)?/.test(protocol) === true) {
|
|
return 'rtmp';
|
|
} else if (/https?/.test(protocol) === true) {
|
|
return 'http';
|
|
} else if (/mms(t|h)/.test(protocol) === true) {
|
|
return 'mms';
|
|
} else if (/rtsps?/.test(protocol) === true) {
|
|
return 'rtsp';
|
|
}
|
|
|
|
return protocol;
|
|
};
|
|
|
|
const isAuthProtocol = (url) => {
|
|
const protocolClass = getProtocolClass(url);
|
|
|
|
// eslint-disable-next-line default-case
|
|
switch (protocolClass) {
|
|
case 'amqp':
|
|
case 'ftp':
|
|
case 'http':
|
|
case 'icecast':
|
|
case 'mms':
|
|
case 'rtmp':
|
|
case 'sftp':
|
|
case 'rtsp':
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
const isSupportedProtocol = (url, supportedProtocols) => {
|
|
const protocol = getProtocol(url);
|
|
if (protocol.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
if (!supportedProtocols.includes(protocol)) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const getHLSAddress = (host, credentials, name, secure) => {
|
|
// Test for IPv6 addresses and put brackets around
|
|
let url = 'http' + (secure ? 's' : '') + '://' + (credentials.length !== 0 ? credentials + '@' : '') + host + '/memfs/' + name + '.m3u8';
|
|
|
|
return url;
|
|
};
|
|
|
|
const getRTMPAddress = (host, app, name, token, secure) => {
|
|
let url = 'rtmp' + (secure ? 's' : '') + '://' + host + app + '/' + name + '.stream';
|
|
|
|
if (token.length !== 0) {
|
|
url += '?token=' + encodeURIComponent(token);
|
|
}
|
|
|
|
return url;
|
|
};
|
|
|
|
const getSRTAddress = (host, name, token, passphrase, publish) => {
|
|
let url =
|
|
'srt' +
|
|
'://' +
|
|
host +
|
|
'?mode=caller&transtype=live&streamid=' +
|
|
name +
|
|
'.stream,mode:' +
|
|
(publish ? 'publish' : 'request') +
|
|
(token.length !== 0 ? ',token:' + encodeURIComponent(token) : '');
|
|
|
|
if (passphrase.length !== 0) {
|
|
url += '&passphrase=' + encodeURIComponent(passphrase);
|
|
}
|
|
|
|
return url;
|
|
};
|
|
|
|
const getHLS = (config, name) => {
|
|
const url = getHLSAddress(config.hls.host, config.hls.credentials, config.channelid, config.hls.secure);
|
|
|
|
return url;
|
|
};
|
|
|
|
const getRTMP = (config) => {
|
|
const url = getRTMPAddress(config.rtmp.host, config.rtmp.app, config.channelid, config.rtmp.token, config.rtmp.secure);
|
|
|
|
return url;
|
|
};
|
|
|
|
const getSRT = (config) => {
|
|
const url = getSRTAddress(config.srt.host, config.channelid, config.srt.token, config.srt.passphrase, true);
|
|
|
|
return url;
|
|
};
|
|
|
|
const getLocalHLS = (config, name) => {
|
|
let url = getHLSAddress(config.hls.local, '', config.channelid, false);
|
|
|
|
return url;
|
|
};
|
|
|
|
const getLocalRTMP = (name) => {
|
|
return '{rtmp,name=' + name + '}';
|
|
};
|
|
|
|
const getLocalSRT = (name) => {
|
|
return '{srt,name=' + name + ',mode=request}';
|
|
};
|
|
|
|
const isValidURL = (address) => {
|
|
const protocol = getProtocolClass(address);
|
|
if (protocol.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
function AdvancedSettings(props) {
|
|
const settings = props.settings;
|
|
const protocolClass = getProtocolClass(settings.address);
|
|
|
|
return (
|
|
<Grid item xs={12}>
|
|
<Accordion className="accordion">
|
|
<AccordionSummary elevation={0} expandIcon={<ArrowDropDownIcon />}>
|
|
<Typography>
|
|
<Trans>Advanced settings</Trans>
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Grid container spacing={2}>
|
|
{protocolClass === 'rtsp' && (
|
|
<React.Fragment>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h3">
|
|
<Trans>RTSP</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Checkbox label={<Trans>UDP transport</Trans>} checked={settings.rtsp.udp} onChange={props.onChange('rtsp', 'udp')} />
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
fullWidth
|
|
label={<Trans>Socket timeout (microseconds)</Trans>}
|
|
value={settings.rtsp.stimeout}
|
|
onChange={props.onChange('rtsp', 'stimeout')}
|
|
/>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
{protocolClass === 'http' && (
|
|
<React.Fragment>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h3">
|
|
<Trans>HTTP and HTTPS</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Checkbox
|
|
label={<Trans>Read input at native speed</Trans>}
|
|
checked={settings.http.readNative}
|
|
onChange={props.onChange('http', 'readNative')}
|
|
/>
|
|
<Checkbox
|
|
label={<Trans>Force input framerate</Trans>}
|
|
checked={settings.http.forceFramerate}
|
|
onChange={props.onChange('http', 'forceFramerate')}
|
|
/>
|
|
</Grid>
|
|
{settings.http.forceFramerate === true && (
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
fullWidth
|
|
label={<Trans>Framerate</Trans>}
|
|
value={settings.http.framerate}
|
|
onChange={props.onChange('http', 'framerate')}
|
|
/>
|
|
</Grid>
|
|
)}
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label="User-Agent"
|
|
value={settings.http.userAgent}
|
|
onChange={props.onChange('http', 'userAgent')}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label="Referrer"
|
|
value={settings.http.referer}
|
|
onChange={props.onChange('http', 'referer')}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label="HTTP proxy"
|
|
value={settings.http.http_proxy}
|
|
onChange={props.onChange('http', 'http_proxy')}
|
|
placeholder="https://123.123.123.123:443"
|
|
/>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
<Grid item xs={12}>
|
|
<Typography variant="h3">
|
|
<Trans>General</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="0"
|
|
step="1"
|
|
fullWidth
|
|
label="thread_queue_size"
|
|
value={settings.general.thread_queue_size}
|
|
onChange={props.onChange('general', 'thread_queue_size')}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="32"
|
|
step="1"
|
|
fullWidth
|
|
label="probesize (bytes)"
|
|
value={settings.general.probesize}
|
|
onChange={props.onChange('general', 'probesize')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>
|
|
Mininum {32}, default {5000000}
|
|
</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
fullWidth
|
|
label="max_probe_packets"
|
|
value={settings.general.max_probe_packets}
|
|
onChange={props.onChange('general', 'max_probe_packets')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>Default {2500}</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
type="number"
|
|
min="1"
|
|
step="1"
|
|
fullWidth
|
|
label="analyzeduration (microseconds)"
|
|
value={
|
|
settings.mode === 'push'
|
|
? settings.push.type === 'hls'
|
|
? settings.general.analyzeduration_http
|
|
: settings.push.type === 'rtmp'
|
|
? settings.general.analyzeduration_rtmp
|
|
: settings.general.analyzeduration
|
|
: protocolClass === 'http'
|
|
? settings.general.analyzeduration_http
|
|
: protocolClass === 'rtmp'
|
|
? settings.general.analyzeduration_rtmp
|
|
: settings.general.analyzeduration
|
|
}
|
|
onChange={props.onChange(
|
|
'general',
|
|
settings.mode === 'push'
|
|
? settings.push.type === 'hls'
|
|
? 'analyzeduration_http'
|
|
: settings.push.type === 'rtmp'
|
|
? 'analyzeduration_rtmp'
|
|
: 'analyzeduration'
|
|
: protocolClass === 'http'
|
|
? 'analyzeduration_http'
|
|
: protocolClass === 'rtmp'
|
|
? 'analyzeduration_rtmp'
|
|
: 'analyzeduration',
|
|
)}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>
|
|
Default {5000000} ({5} seconds)
|
|
</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<MultiSelect type="select" label="flags" value={settings.general.fflags} onChange={props.onChange('general', 'fflags')}>
|
|
<MultiSelectOption value="discardcorrupt" name="discardcorrupt" />
|
|
<MultiSelectOption value="fastseek" name="fastseek" />
|
|
<MultiSelectOption value="genpts" name="genpts" />
|
|
<MultiSelectOption value="igndts" name="igndts" />
|
|
<MultiSelectOption value="ignidx" name="ignidx" />
|
|
<MultiSelectOption value="nobuffer" name="nobuffer" />
|
|
<MultiSelectOption value="nofillin" name="nofillin" />
|
|
<MultiSelectOption value="noparse" name="noparse" />
|
|
<MultiSelectOption value="sortdts" name="sortdts" />
|
|
</MultiSelect>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Checkbox label={<Trans>copyts</Trans>} checked={settings.general.copyts} onChange={props.onChange('general', 'copyts')} />
|
|
<Checkbox
|
|
label={<Trans>start_at_zero</Trans>}
|
|
checked={settings.general.start_at_zero}
|
|
onChange={props.onChange('general', 'start_at_zero')}
|
|
/>
|
|
<Checkbox
|
|
label={<Trans>use_wallclock_as_timestamps</Trans>}
|
|
checked={settings.general.use_wallclock_as_timestamps}
|
|
onChange={props.onChange('general', 'use_wallclock_as_timestamps')}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Select
|
|
type="select"
|
|
label={<Trans>avoid_negative_ts</Trans>}
|
|
value={settings.general.avoid_negative_ts}
|
|
onChange={props.onChange('general', 'avoid_negative_ts')}
|
|
>
|
|
<MenuItem value="make_non_negative">make_non_negative</MenuItem>
|
|
<MenuItem value="make_zero">make_zero</MenuItem>
|
|
<MenuItem value="auto">auto (default)</MenuItem>
|
|
<MenuItem value="disabled">disabled</MenuItem>
|
|
</Select>
|
|
</Grid>
|
|
</Grid>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function Pull(props) {
|
|
const classes = useStyles();
|
|
const settings = props.settings;
|
|
const authProtocol = isAuthProtocol(settings.address);
|
|
const validURL = isValidURL(settings.address);
|
|
const supportedProtocol = isSupportedProtocol(settings.address, props.skills.protocols.input);
|
|
|
|
return (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>Enter the address of your network source:</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label={<Trans>Address</Trans>}
|
|
placeholder="rtsp://ip:port/path"
|
|
value={settings.address}
|
|
onChange={props.onChange('', 'address')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>Supports HTTP (HLS, DASH), RTP, RTSP, RTMP, SRT and more.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
{validURL === true && (
|
|
<React.Fragment>
|
|
{!supportedProtocol ? (
|
|
<Grid item xs={12} align="center">
|
|
<BoxText color="dark">
|
|
<WarningIcon fontSize="large" color="error" />
|
|
<Typography>
|
|
<Trans>This protocol is unknown or not supported by the available FFmpeg binary.</Trans>
|
|
</Typography>
|
|
</BoxText>
|
|
</Grid>
|
|
) : (
|
|
<React.Fragment>
|
|
{authProtocol && (
|
|
<React.Fragment>
|
|
<Grid item md={6} xs={12}>
|
|
<TextField
|
|
variant="outlined"
|
|
fullWidth
|
|
label={<Trans>Username</Trans>}
|
|
value={settings.username}
|
|
onChange={props.onChange('', 'username')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>Username for the device.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item md={6} xs={12}>
|
|
<Password
|
|
variant="outlined"
|
|
fullWidth
|
|
label={<Trans>Password</Trans>}
|
|
value={settings.password}
|
|
onChange={props.onChange('', 'password')}
|
|
/>
|
|
<Typography variant="caption">
|
|
<Trans>Password for the device.</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
<AdvancedSettings {...props}></AdvancedSettings>
|
|
</React.Fragment>
|
|
)}
|
|
</React.Fragment>
|
|
)}
|
|
<Grid item xs={12}>
|
|
<FormInlineButton disabled={!validURL || !supportedProtocol} onClick={props.onProbe}>
|
|
<Trans>Probe</Trans>
|
|
</FormInlineButton>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function Push(props) {
|
|
const classes = useStyles();
|
|
const settings = props.settings;
|
|
|
|
//const supportsHLS = isSupportedProtocol('http://', props.skills.protocols.input);
|
|
const supportsRTMP = isSupportedProtocol('rtmp://', props.skills.protocols.input);
|
|
const supportsSRT = isSupportedProtocol('srt://', props.skills.protocols.input);
|
|
|
|
if (!supportsRTMP && !supportsSRT) {
|
|
return (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12} align="center">
|
|
<BoxText color="dark">
|
|
<WarningIcon fontSize="large" color="error" />
|
|
<Typography>
|
|
<Trans>The available FFmpeg binary doesn't support any of the required protocols.</Trans>
|
|
</Typography>
|
|
</BoxText>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Select type="select" label={<Trans>Protocol</Trans>} value={settings.push.type} onChange={props.onChange('push', 'type')}>
|
|
<MenuItem value="rtmp" disabled={!supportsRTMP}>
|
|
RTMP
|
|
</MenuItem>
|
|
<MenuItem value="srt" disabled={!supportsSRT}>
|
|
SRT
|
|
</MenuItem>
|
|
</Select>
|
|
</Grid>
|
|
</Grid>
|
|
{settings.push.type === 'rtmp' && <PushRTMP {...props} />}
|
|
{settings.push.type === 'hls' && <PushHLS {...props} />}
|
|
{settings.push.type === 'srt' && <PushSRT {...props} />}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
Push.defaultProps = {
|
|
knownDevices: [],
|
|
settings: {},
|
|
config: {},
|
|
skills: null,
|
|
onChange: function (settings) {},
|
|
onProbe: function (settings, inputs) {},
|
|
onRefresh: function () {},
|
|
};
|
|
|
|
function PushHLS(props) {
|
|
const classes = useStyles();
|
|
const config = props.config;
|
|
|
|
const HLS = getHLS(config);
|
|
|
|
return (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>Send stream to this address:</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<BoxTextarea>
|
|
<Textarea rows={1} value={HLS} readOnly allowCopy />
|
|
</BoxTextarea>
|
|
</Grid>
|
|
<AdvancedSettings {...props} />
|
|
<Grid item xs={12}>
|
|
<FormInlineButton onClick={props.onProbe}>
|
|
<Trans>Probe</Trans>
|
|
</FormInlineButton>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function PushRTMP(props) {
|
|
const { i18n } = useLingui();
|
|
const classes = useStyles();
|
|
const navigate = useNavigate();
|
|
const config = props.config;
|
|
|
|
let form = null;
|
|
|
|
if (config.rtmp.enabled === false) {
|
|
form = (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>RTMP server is not enabled</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button variant="outlined" size="large" fullWidth color="primary" onClick={() => navigate('/settings/rtmp')}>
|
|
<Trans>Enable RTMP server ...</Trans>
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
} else {
|
|
const RTMP = getRTMP(config);
|
|
|
|
const filteredDevices = props.knownDevices.filter((device) => device.media === 'rtmp');
|
|
const options = filteredDevices.map((device) => {
|
|
return (
|
|
<MenuItem key={device.id} value={device.id}>
|
|
{device.name}
|
|
</MenuItem>
|
|
);
|
|
});
|
|
|
|
options.unshift(
|
|
<MenuItem key="none" value="none" disabled>
|
|
{i18n._(t`Choose an input stream ...`)}
|
|
</MenuItem>,
|
|
);
|
|
|
|
options.push(
|
|
<MenuItem key={config.channelid} value={config.channelid}>
|
|
{i18n._(t`Send stream to address ...`)}
|
|
</MenuItem>,
|
|
);
|
|
|
|
form = (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Select type="select" label={<Trans>Input stream</Trans>} value={props.settings.push.name} onChange={props.onChange('push', 'name')}>
|
|
{options}
|
|
</Select>
|
|
<Button size="small" startIcon={<RefreshIcon />} onClick={props.onRefresh} sx={{ float: 'right' }}>
|
|
<Trans>Refresh</Trans>
|
|
</Button>
|
|
</Grid>
|
|
{props.settings.push.name === config.channelid && (
|
|
<React.Fragment>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>Address:</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<BoxTextarea>
|
|
<Textarea rows={1} value={RTMP} readOnly allowCopy />
|
|
</BoxTextarea>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
<AdvancedSettings {...props} />
|
|
<Grid item xs={12}>
|
|
<FormInlineButton onClick={props.onProbe} disabled={props.settings.push.name === 'none'}>
|
|
<Trans>Probe</Trans>
|
|
</FormInlineButton>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
return form;
|
|
}
|
|
|
|
PushRTMP.defaultProps = {
|
|
knownDevices: [],
|
|
settings: {},
|
|
config: {},
|
|
skills: null,
|
|
onChange: function (settings) {},
|
|
onProbe: function (settings, inputs) {},
|
|
onRefresh: function () {},
|
|
};
|
|
|
|
function PushSRT(props) {
|
|
const { i18n } = useLingui();
|
|
const classes = useStyles();
|
|
const navigate = useNavigate();
|
|
const config = props.config;
|
|
|
|
let form = null;
|
|
|
|
if (config.srt.enabled === false) {
|
|
form = (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>SRT server is not enabled</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Button variant="outlined" size="large" fullWidth color="primary" onClick={() => navigate('/settings/srt')}>
|
|
<Trans>Enable SRT server ...</Trans>
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
} else {
|
|
const SRT = getSRT(config);
|
|
|
|
const filteredDevices = props.knownDevices.filter((device) => device.media === 'srt');
|
|
const options = filteredDevices.map((device) => {
|
|
return (
|
|
<MenuItem key={device.id} value={device.id}>
|
|
{device.name}
|
|
</MenuItem>
|
|
);
|
|
});
|
|
|
|
options.unshift(
|
|
<MenuItem key="none" value="none" disabled>
|
|
{i18n._(t`Choose an input stream ...`)}
|
|
</MenuItem>,
|
|
);
|
|
|
|
options.push(
|
|
<MenuItem key={config.channelid} value={config.channelid}>
|
|
{i18n._(t`Send stream to address ...`)}
|
|
</MenuItem>,
|
|
);
|
|
|
|
form = (
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Select type="select" label={<Trans>Input stream</Trans>} value={props.settings.push.name} onChange={props.onChange('push', 'name')}>
|
|
{options}
|
|
</Select>
|
|
<Button size="small" startIcon={<RefreshIcon />} onClick={props.onRefresh} sx={{ float: 'right' }}>
|
|
<Trans>Refresh</Trans>
|
|
</Button>
|
|
</Grid>
|
|
{props.settings.push.name === config.channelid && (
|
|
<React.Fragment>
|
|
<Grid item xs={12}>
|
|
<Typography>
|
|
<Trans>Address:</Trans>
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<BoxTextarea>
|
|
<Textarea rows={1} value={SRT} readOnly allowCopy />
|
|
</BoxTextarea>
|
|
</Grid>
|
|
</React.Fragment>
|
|
)}
|
|
<AdvancedSettings {...props} />
|
|
<Grid item xs={12}>
|
|
<FormInlineButton onClick={props.onProbe} disabled={props.settings.push.name === 'none'}>
|
|
<Trans>Probe</Trans>
|
|
</FormInlineButton>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
return form;
|
|
}
|
|
|
|
PushSRT.defaultProps = {
|
|
knownDevices: [],
|
|
settings: {},
|
|
config: {},
|
|
skills: null,
|
|
onChange: function (settings) {},
|
|
onProbe: function (settings, inputs) {},
|
|
onRefresh: function () {},
|
|
};
|
|
|
|
function Source(props) {
|
|
const classes = useStyles();
|
|
const { i18n } = useLingui();
|
|
const config = initConfig(props.config);
|
|
const settings = initSettings(props.settings, config);
|
|
const skills = initSkills(props.skills);
|
|
|
|
const handleChange = (section, what) => (event) => {
|
|
const value = event.target.value;
|
|
|
|
if (section === 'http') {
|
|
if (['readNative', 'forceFramerate'].includes(what)) {
|
|
settings.http[what] = !settings.http[what];
|
|
} else {
|
|
settings.http[what] = value;
|
|
}
|
|
} else if (section === 'rtsp') {
|
|
if (['udp'].includes(what)) {
|
|
settings.rtsp[what] = !settings.rtsp[what];
|
|
} else {
|
|
settings.rtsp[what] = value;
|
|
}
|
|
} else if (section === 'general') {
|
|
if (['copyts', 'start_at_zero', 'use_wallclock_as_timestamps'].includes(what)) {
|
|
settings.general[what] = !settings.general[what];
|
|
} else {
|
|
settings.general[what] = value;
|
|
}
|
|
} else if (section === 'push') {
|
|
settings.push[what] = value;
|
|
if (what === 'type') {
|
|
settings.push.name = config.channelid;
|
|
}
|
|
} else {
|
|
settings[what] = value;
|
|
}
|
|
|
|
props.onChange({
|
|
...settings,
|
|
});
|
|
};
|
|
|
|
const handleProbe = () => {
|
|
props.onProbe(settings, createInputs(settings, config, skills));
|
|
};
|
|
|
|
const handleRefresh = () => {
|
|
props.onRefresh();
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Grid container alignItems="flex-start" spacing={2} className={classes.gridContainer}>
|
|
<Grid item xs={12}>
|
|
<Select type="select" label={<Trans>Pull or recieve the data:</Trans>} value={settings.mode} onChange={handleChange('', 'mode')}>
|
|
<MenuItem value="pull">{i18n._(t`Pull Mode`)}</MenuItem>
|
|
<MenuItem value="push">{i18n._(t`Receive Mode`)}</MenuItem>
|
|
</Select>
|
|
</Grid>
|
|
</Grid>
|
|
{settings.mode === 'pull' ? (
|
|
<Pull settings={settings} config={config} skills={skills} onChange={handleChange} onProbe={handleProbe} />
|
|
) : (
|
|
<Push
|
|
settings={settings}
|
|
config={config}
|
|
skills={skills}
|
|
knownDevices={props.knownDevices}
|
|
onChange={handleChange}
|
|
onProbe={handleProbe}
|
|
onRefresh={handleRefresh}
|
|
/>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
Source.defaultProps = {
|
|
knownDevices: [],
|
|
settings: {},
|
|
config: {},
|
|
skills: null,
|
|
onChange: function (settings) {},
|
|
onProbe: function (settings, inputs) {},
|
|
};
|
|
|
|
function SourceIcon(props) {
|
|
return <Icon style={{ color: '#FFF' }} {...props} />;
|
|
}
|
|
|
|
const id = 'network';
|
|
const name = <Trans>Network source</Trans>;
|
|
const capabilities = ['audio', 'video'];
|
|
const ffversion = '^4.1.0 || ^5.0.0';
|
|
|
|
const func = {
|
|
initSettings,
|
|
initConfig,
|
|
initSkills,
|
|
createInputs,
|
|
getProtocolClass,
|
|
getHLS,
|
|
getRTMP,
|
|
getSRT,
|
|
isValidURL,
|
|
isAuthProtocol,
|
|
isSupportedProtocol,
|
|
};
|
|
|
|
export { id, name, capabilities, ffversion, SourceIcon as icon, Source as component, func };
|