neoris/restreamer-ui-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add linkedIn and Azure Media Services to publication services

Browse Source
This commit is contained in:
Jan Stabenow 2022-07-14 22:57:52 +02:00
parent bc7697ad57
commit df0fe680a9
No known key found for this signature in database
GPG Key ID: 9C22DD65A9AAF133
4 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/views/Publication/Services/Azure.js Normal file
View File

@ -0,0 +1,106 @@
import React from 'react';
import { Trans } from '@lingui/macro';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import MenuItem from '@mui/material/MenuItem';
import Select from '../../../misc/Select';
import TextField from '@mui/material/TextField';
import Logo from './logos/azure.svg';
const id = 'azure';
const name = 'Azure Media Services';
const version = '1.0';
const stream_key_link = '';
const description = (
<Trans>
Transmit to a Azure Media Services. More details can be found{' '}
<Link color="secondary" target="_blank" href="https://azure.microsoft.com/de-de/blog/getting-started-with-live-streaming-using-the-azure-management-portal/">
here
</Link>
.
</Trans>
);
const image_copyright = <Trans>Please contact 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: ['rtmp', 'rtmps'],
formats: ['flv'],
codecs: {
audio: ['aac', 'mp3'],
video: ['h264'],
},
};
function ServiceIcon(props) {
return <img src={Logo} alt="azure media service Logo" {...props} />;
}
function init(settings) {
const initSettings = {
protocol: 'rtmp://',
address: '',
...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.address,
options: ['-f', 'flv'],
};
return output;
};
return (
<Grid container spacing={2}>
<Grid item xs={12} md={3}>
<Select type="select" label={<Trans>Protocol</Trans>} value={settings.protocol} onChange={handleChange('protocol')}>
<MenuItem value="rtmp://">rtmp://</MenuItem>
<MenuItem value="rtmps://">rtmps://</MenuItem>
</Select>
</Grid>
<Grid item xs={12} md={9}>
<TextField variant="outlined" fullWidth label={<Trans>Address</Trans>} value={settings.address} onChange={handleChange('address')} placeholder="myAccount.channel.mediaservices.windows.net:1935/live/123456789..."
/>
</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 };

105
src/views/Publication/Services/Linkedin.js Normal file
View File

@ -0,0 +1,105 @@
import React from 'react';
import { Trans } from '@lingui/macro';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import MenuItem from '@mui/material/MenuItem';
import Select from '../../../misc/Select';
import TextField from '@mui/material/TextField';
const id = 'linkedin';
const name = 'linkedIn';
const version = '1.0';
const stream_key_link = '';
const description = (
<Trans>
Transmit to linkedIn. More details can be found{' '}
<Link color="secondary" target="_blank" href="https://www.linkedin.com/help/linkedin/answer/128901/go-live-using-a-custom-stream-rtmp-">
here
</Link>
.
</Trans>
);
const image_copyright = <Trans>Please contact 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: ['rtmp', 'rtmps'],
formats: ['flv'],
codecs: {
audio: ['aac', 'mp3'],
video: ['h264'],
},
};
function ServiceIcon(props) {
return <LinkedInIcon alt="linkedin Logo" {...props} />;
}
function init(settings) {
const initSettings = {
protocol: 'rtmp://',
address: '',
...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.address,
options: ['-f', 'flv'],
};
return output;
};
return (
<Grid container spacing={2}>
<Grid item xs={12} md={3}>
<Select type="select" label={<Trans>Protocol</Trans>} value={settings.protocol} onChange={handleChange('protocol')}>
<MenuItem value="rtmp://">rtmp://</MenuItem>
<MenuItem value="rtmps://">rtmps://</MenuItem>
</Select>
</Grid>
<Grid item xs={12} md={9}>
<TextField variant="outlined" fullWidth label={<Trans>Address</Trans>} value={settings.address} onChange={handleChange('address')} placeholder="{custom_id}.channel.media.azure.net:2935/live/{custom_id}"
/>
</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 };

4
src/views/Publication/Services/index.js
View File

@ -1,4 +1,5 @@
import * as Akamai from './Akamai';
import * as Azure from './Azure';
import * as Brightcove from './Brightcove';
import * as CDN77 from './CDN77';
import * as Core from './Core';
@ -10,6 +11,7 @@ import * as HLS from './HLS';
import * as Icecast from './Icecast';
import * as Image2 from './Image2';
import * as Instagram from './Instagram';
import * as Linkedin from './Linkedin';
import * as Livespotting from './Livespotting';
import * as MPEGTS from './MPEGTS';
import * as Owncast from './Owncast';
@ -65,7 +67,9 @@ registry.Register(Instagram);
registry.Register(Vimeo);
registry.Register(Restream);
registry.Register(Telegram);
registry.Register(Linkedin);
registry.Register(Livespotting);
registry.Register(Azure);
registry.Register(Brightcove);
registry.Register(Akamai);
registry.Register(DaCast);

23
src/views/Publication/Services/logos/azure.svg Normal file
View File

@ -0,0 +1,23 @@
<svg aria-hidden="true" data-slug-id="azure" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a" x1="-960.606" y1="283.397" x2="-1032.511" y2="70.972" gradientTransform="matrix(1 0 0 -1 1075 318)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#114a8b"/>
<stop offset="1" stop-color="#0669bc"/>
</linearGradient>
<linearGradient id="b" x1="-938.144" y1="184.402" x2="-954.778" y2="178.778" gradientTransform="matrix(1 0 0 -1 1075 318)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-opacity=".3"/>
<stop offset=".071" stop-opacity=".2"/>
<stop offset=".321" stop-opacity=".1"/>
<stop offset=".623" stop-opacity=".05"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<linearGradient id="c" x1="-947.292" y1="289.594" x2="-868.363" y2="79.308" gradientTransform="matrix(1 0 0 -1 1075 318)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3ccbf4"/>
<stop offset="1" stop-color="#2892df"/>
</linearGradient>
</defs>
<path d="M89.158 18.266h69.238L86.523 231.224a11.041 11.041 0 01-10.461 7.51H22.179a11.023 11.023 0 01-10.445-14.548l66.963-198.41a11.04 11.04 0 0110.461-7.51z" fill="url(#a)"/>
<path d="M189.77 161.104H79.976a5.083 5.083 0 00-3.468 8.8l70.552 65.847a11.091 11.091 0 007.567 2.983h62.167z" fill="#0078d4"/>
<path d="M89.158 18.266a10.95 10.95 0 00-10.483 7.654L11.817 224.006a11.01 11.01 0 0010.393 14.728h55.274a11.814 11.814 0 009.069-7.714l13.33-39.29 47.625 44.418a11.267 11.267 0 007.089 2.586h61.937l-27.166-77.63-79.19.018 48.47-142.856z" fill="url(#b)"/>
<path d="M177.592 25.764a11.023 11.023 0 00-10.444-7.498H89.984a11.024 11.024 0 0110.445 7.498l66.967 198.421a11.024 11.024 0 01-10.445 14.549h77.164a11.024 11.024 0 0010.444-14.549z" fill="url(#c)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB