Add Telegram and Owncast to publication services - datarhei/restreamer#369

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Restreamer-UI
 
+#### v1.1.0 > v1.3.1
+
+-   Add Owncast to publication services
+-   Add Telegram to publication services
+-   Fix VAAPI encoder
+
 #### v1.0.0 > v1.1.0
 
 -   Add compatibility list for encoders

src/views/Publication/Services/Owncast.js

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import TextField from '@mui/material/TextField';
+
+import Logo from './logos/owncast.svg';
+
+const id = 'owncast';
+const name = 'Owncast';
+const version = '1.0';
+const stream_key_link = '';
+const description = (
+	<Trans>
+		Transmit your Livestream to an Owncast server.{' '}
+		<Link color="secondary" target="_blank" href="https://owncast.online/quickstart/startstreaming/">
+			Here {' '}
+		</Link>
+		you can find more details about the settings.
+	</Trans>
+);
+const image_copyright = <Trans>Please get in touch with the operator of the service and check what happens.</Trans>;
+const author = {
+	creator: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+	maintainer: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+};
+const category = 'software';
+const requires = {
+	protocols: ['rtmps'],
+	formats: ['flv'],
+	codecs: {
+		audio: ['aac', 'mp3'],
+		video: ['h264'],
+	},
+};
+
+function ServiceIcon(props) {
+	return <img src={Logo} alt="Telegram Logo" {...props} />;
+}
+
+function init(settings) {
+	const initSettings = {
+		protocol: 'rtmp://',
+		server_url: '',
+		stream_key: '',
+		...settings,
+	};
+
+	return initSettings;
+}
+
+function Service(props) {
+	const settings = init(props.settings);
+
+	const handleChange = (what) => (event) => {
+		const value = event.target.value;
+
+		settings[what] = value;
+
+		const output = createOutput(settings);
+
+		props.onChange([output], settings);
+	};
+
+	const createOutput = (settings) => {
+		const output = {
+			address: settings.protocol + settings.server_url + '/' + settings.stream_key,
+			options: ['-f', 'flv'],
+		};
+
+		return output;
+	};
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12} md={3}>
+				<TextField
+					variant="outlined"
+					fullWidth
+					type="url"
+					label={<Trans>Protocol</Trans>}
+					value={settings.protocol}
+					onChange={handleChange('protocol')}
+					readOnly
+					disabled
+				/>
+			</Grid>
+			<Grid item xs={12} md={9}>
+				<TextField variant="outlined" fullWidth placeholder="yourserver/live" label={<Trans>Server URL</Trans>} value={settings.server_url} onChange={handleChange('server_url')} />
+			</Grid>
+			<Grid item xs={12}>
+				<TextField variant="outlined" fullWidth placeholder="abc123" label={<Trans>Stream Key</Trans>} value={settings.stream_key} onChange={handleChange('stream_key')} />
+			</Grid>
+		</Grid>
+	);
+}
+
+Service.defaultProps = {
+	settings: {},
+	skills: {},
+	metadata: {},
+	streams: [],
+	onChange: function (output, settings) {},
+};
+
+export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };

src/views/Publication/Services/Telegram.js

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+
+import Logo from './logos/telegram.svg';
+
+const id = 'telegram';
+const name = 'Telegram';
+const version = '1.0';
+const stream_key_link = '';
+const description = (
+	<Trans>
+		Transmit a Livestream to a Telegram Channel.
+	</Trans>
+);
+const image_copyright = <Trans>Please get in touch with the operator of the service and check what happens.</Trans>;
+const author = {
+	creator: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+	maintainer: {
+		name: 'datarhei',
+		link: 'https://github.com/datarhei',
+	},
+};
+const category = 'platform';
+const requires = {
+	protocols: ['rtmps'],
+	formats: ['flv'],
+	codecs: {
+		audio: ['aac', 'mp3'],
+		video: ['h264'],
+	},
+};
+
+function ServiceIcon(props) {
+	return <img src={Logo} alt="Telegram Logo" {...props} />;
+}
+
+function init(settings) {
+	const initSettings = {
+		protocol: 'rtmps://',
+		stream_url: '',
+		stream_key: '',
+		...settings,
+	};
+
+	return initSettings;
+}
+
+function Service(props) {
+	const settings = init(props.settings);
+
+	const handleChange = (what) => (event) => {
+		const value = event.target.value;
+
+		settings[what] = value;
+
+		const output = createOutput(settings);
+
+		props.onChange([output], settings);
+	};
+
+	const createOutput = (settings) => {
+		const output = {
+			address: settings.protocol + settings.stream_url + settings.stream_key,
+			options: ['-f', 'flv'],
+		};
+
+		return output;
+	};
+
+	return (
+		<Grid container spacing={2}>
+			<Grid item xs={12} md={3}>
+				<TextField
+					variant="outlined"
+					fullWidth
+					type="url"
+					label={<Trans>Protocol</Trans>}
+					value={settings.protocol}
+					onChange={handleChange('protocol')}
+					readOnly
+					disabled
+				/>
+			</Grid>
+			<Grid item xs={12} md={9}>
+				<TextField variant="outlined" fullWidth placeholder="dc4-1.rtmp.t.me/s/" label={<Trans>Server URL</Trans>} value={settings.stream_url} onChange={handleChange('stream_url')} />
+			</Grid>
+			<Grid item xs={12}>
+				<TextField variant="outlined" fullWidth placeholder="123456:ABCDEF" label={<Trans>Stream Key</Trans>} value={settings.stream_key} onChange={handleChange('stream_key')} />
+			</Grid>
+		</Grid>
+	);
+}
+
+Service.defaultProps = {
+	settings: {},
+	skills: {},
+	metadata: {},
+	streams: [],
+	onChange: function (output, settings) {},
+};
+
+export { id, name, version, stream_key_link, description, image_copyright, author, category, requires, ServiceIcon as icon, Service as component };

src/views/Publication/Services/index.js

@@ -12,11 +12,13 @@ import * as Image2 from './Image2';
 import * as Instagram from './Instagram';
 import * as Livespotting from './Livespotting';
 import * as MPEGTS from './MPEGTS';
+import * as Owncast from './Owncast';
 import * as Red5 from './Red5';
 import * as Restream from './Restream';
 import * as RTMP from './RTMP';
 import * as RTSP from './RTSP';
 import * as SRT from './SRT';
+import * as Telegram from './Telegram';
 import * as Twitch from './Twitch';
 import * as Twitter from './Twitter';
 import * as UDP from './UDP';
@@ -62,12 +64,14 @@ registry.Register(Twitch);
 registry.Register(Instagram);
 registry.Register(Vimeo);
 registry.Register(Restream);
+registry.Register(Telegram);
 registry.Register(Livespotting);
 registry.Register(Brightcove);
 registry.Register(Akamai);
 registry.Register(DaCast);
 registry.Register(CDN77);
 registry.Register(Core);
+registry.Register(Owncast);
 registry.Register(WOWZA);
 registry.Register(Red5);
 registry.Register(Icecast);

src/views/Publication/Services/logos/telegram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="297.333 73.333 533.332 533.332"><g transform="scale(3.4682)"><linearGradient id="a" x1="89.1175" x2="71.8173" y1="233.5573" y2="193.1927" gradientTransform="matrix(7.7071 0 0 -7.7071 -501.6811 1845.5039)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#37aee2"/><stop offset="1" stop-color="#1e96c8"/></linearGradient><circle cx="162.62" cy="98.033" r="76.889" fill="url(#a)"/><path fill="#FFF" d="m117.731 97.367 51.778-21.333c5.111-2.222 22.444-9.333 22.444-9.333s8-3.111 7.333 4.444c-.222 3.111-2 14-3.778 25.778l-5.556 34.889s-.444 5.111-4.222 6c-3.778.889-10-3.111-11.111-4-.889-.667-16.667-10.667-22.444-15.556-1.555-1.333-3.333-4 .222-7.111 8-7.333 17.556-16.444 23.333-22.222 2.667-2.667 5.333-8.889-5.778-1.333L138.62 108.7s-3.555 2.222-10.222.222-14.445-4.667-14.445-4.667-5.333-3.333 3.778-6.888z"/></g></svg>