Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #344 from havfo/feat-unsupportedbrowser 

Detect unsupported browsers, add a dialog
auto_join_3.3
Mészáros Mihály 2020-05-19 15:08:23 +02:00 committed by GitHub
parent 78bdf80cea ee1a691642
commit a691e82f3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 304 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
app/src/components/UnsupportedBrowser.js 100644
View File

@ -0,0 +1,154 @@
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import WebAssetIcon from '@material-ui/icons/WebAsset';
import ErrorIcon from '@material-ui/icons/Error';
import Hidden from '@material-ui/core/Hidden';
const styles = (theme) =>
({
dialogPaper :
{
width : '40vw',
[theme.breakpoints.down('lg')] :
{
width : '40vw'
},
[theme.breakpoints.down('md')] :
{
width : '50vw'
},
[theme.breakpoints.down('sm')] :
{
width : '70vw'
},
[theme.breakpoints.down('xs')] :
{
width : '90vw'
}
// display : 'flex',
// flexDirection : 'column'
},
list : {
backgroundColor : theme.palette.background.paper
},
errorAvatar : {
width : theme.spacing(20),
height : theme.spacing(20)
}
});
const open=true;
const dividers=true;
let dense=false;
const supportedBrowsers=[
{ name: 'Chrome/Chromium', version: '74', vendor: 'Google' },
{ name: 'Edge', version: '18', vendor: 'Microsoft' },
{ name: 'Firefox', version: '60', vendor: 'Mozilla' },
{ name: 'Safari', version: '12', vendor: 'Apple' },
{ name: 'Opera', version: '62', vendor: '' },
// { name: 'Brave', version: '1.5', vendor: '' },
// { name: 'Vivaldi', version: '3', vendor: '' },
{ name: 'Samsung Internet', version: '11.1.1.52', vendor: '' }
];
const UnsupportedBrowser = ({
platform,
webrtcUnavailable,
classes
}) =>
{
if (platform !== 'desktop')
{
dense=true;
}
return (
<Dialog
open={open}
scroll={'body'}
classes={{
paper : classes.dialogPaper
}}
>
<DialogTitle id='form-dialog-title'>
{!webrtcUnavailable &&
<FormattedMessage
id='unsupportedBrowser.titleUnsupportedBrowser'
defaultMessage='Detected unsupported browser!'
/>
}
{webrtcUnavailable &&
<FormattedMessage
id='unsupportedBrowser.titlewebrtcUnavailable'
defaultMessage='Required functionality not availble in your browser!'
/>
}
</DialogTitle>
<DialogContent dividers={dividers} >
<FormattedMessage
id='unsupportedBrowser.bodyText'
defaultMessage='This meeting service requires a
functionality that is not supported by your browser.
Please upgrade, or switch to a different browser, or
check your settings. Supported browsers:'
/>
<Grid container spacing={2} justify='center' alignItems='center'>
<Grid item xs={12} md={7}>
<div className={classes.list}>
<List dense={dense}>
{supportedBrowsers.map((browser, index) =>
{
const supportedBrowser = `${browser.vendor} ${browser.name}`;
const supportedVersion = `${browser.version}+`;
return (
<ListItem key={index}>
<ListItemAvatar>
<Avatar>
<WebAssetIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={supportedBrowser}
secondary={supportedVersion}
/>
</ListItem>
);
})}
</List>
</div>
</Grid>
<Grid item xs={12} md={5} align='center'>
<Hidden mdDown>
<ErrorIcon className={classes.errorAvatar} color='error'/>
</Hidden>
</Grid>
</Grid>
</DialogContent>
</Dialog>
);
};
UnsupportedBrowser.propTypes =
{
webrtcUnavailable : PropTypes.bool.isRequired,
platform : PropTypes.string.isRequired,
classes : PropTypes.object.isRequired
};
export default withStyles(styles)(UnsupportedBrowser);

49
app/src/index.js
View File

@ -12,6 +12,7 @@ import RoomClient from './RoomClient';
import RoomContext from './RoomContext';
import deviceInfo from './deviceInfo';
import * as meActions from './actions/meActions';
import UnsupportedBrowser from './components/UnsupportedBrowser';
import ChooseRoom from './components/ChooseRoom';
import LoadingView from './components/LoadingView';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
@ -20,7 +21,7 @@ import { persistor, store } from './store';
import { SnackbarProvider } from 'notistack';
import * as serviceWorker from './serviceWorker';
import { ReactLazyPreload } from './components/ReactLazyPreload';
import { detectDevice } from 'mediasoup-client';
// import messagesEnglish from './translations/en';
import messagesNorwegian from './translations/nb';
import messagesGerman from './translations/de';
@ -138,6 +139,52 @@ function run()
// Get current device.
const device = deviceInfo();
let unsupportedBrowser=false;
let webrtcUnavailable=false;
if (detectDevice() === undefined)
{
logger.error('Unsupported browser detected by mediasoup client detectDevice! deviceInfo: %o', device);
unsupportedBrowser=true;
}
else
if (
navigator.mediaDevices === undefined ||
navigator.mediaDevices.getUserMedia === undefined ||
window.RTCPeerConnection === undefined
)
{
logger.error('WebRTC is unavialable in your browser! deviceInfo: %o', device);
webrtcUnavailable=true;
}
else
if (device.name === 'safari' && !isNaN(device.version) && parseFloat(device.version) < 12)
{
unsupportedBrowser=true;
}
else
{
logger.debug('Supported Browser! deviceInfo: %o', device);
}
if (unsupportedBrowser || webrtcUnavailable)
{
render(
<MuiThemeProvider theme={theme}>
<RawIntlProvider value={intl}>
<UnsupportedBrowser
webrtcUnavailable={webrtcUnavailable}
platform={device.platform}
/>
</RawIntlProvider>
</MuiThemeProvider>,
document.getElementById('multiparty-meeting')
);
return;
}
store.dispatch(
meActions.setMe({
peerId,

6
app/src/translations/cn.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/cs.json
View File

@ -190,5 +190,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/de.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "Moderator hat dich stummgeschaltet",
"moderator.muteVideo": "Moderator hat dein Video gestoppt",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/dk.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/el.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/en.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "Moderator muted your audio",
"moderator.muteVideo": "Moderator muted your video",
"moderator.muteScreenSharing": "Moderator muted your screen sharing",
"moderator.stopScreenSharing": "Moderator stopped your screen sharing"
"moderator.stopScreenSharing": "Moderator stopped your screen sharing",
"unsupportedBrowser.titleUsnsupportedBrowser": "Detected unsupported browser!",
"unsupportedBrowser.titlewebrtcUnavailable": "Required functionality not available in your browser!",
"unsupportedBrowser.bodyText": "This meeting service requires a functionality that is not supported by your browser. Please upgrade, or switch to a different browser, or check your settings. Supported browsers:"
}

6
app/src/translations/es.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/fr.json
View File

@ -190,5 +190,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/hr.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "Moderator je utišao tvoj zvuk",
"moderator.muteVideo": "Moderator je zaustavio tvoj video",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/hu.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "A moderátor elnémította a hangod",
"moderator.muteVideo": "A moderátor elnémította a videód",
"moderator.muteScreenSharing": "A moderátor szünetelteti képernyőmegosztásod",
"moderator.stopScreenSharing": "A moderátor leállította a képernyőmegosztásod"
"moderator.stopScreenSharing": "A moderátor leállította a képernyőmegosztásod",
"unsupportedBrowser.titleUnsupportedBrowser": "A bőngésző verziód sajnos nem támogatott! :-(",
"unsupportedBrowser.titlewebrtcUnavailable": "A böngésződ egy szükséges funkciója nem elérhető!",
"unsupportedBrowser.bodyText": "Kérlek frissítsd a böngésződ, válts másik böngészőre, vagy ellenőrizd a böngésződ beállításait! Támogatott böngészők:"
}

8
app/src/translations/it.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "Il moderatore ha mutato il tuo audio",
"moderator.muteVideo": "Il moderatore ha fermato il tuo video",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
}
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/lv.json
View File

@ -185,5 +185,9 @@
"moderator.muteAudio": "Moderators noklusināja jūsu mikrofonu",
"moderator.muteVideo": "Moderators atslēdza jūsu kameru",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

8
app/src/translations/nb.json
View File

@ -190,6 +190,10 @@
"moderator.clearFiles": "Moderator fjernet filer",
"moderator.muteAudio": "Moderator mutet lyden din",
"moderator.muteVideo": "Moderator mutet videoen din",
"moderator.muteScreenSharing": null ,
"moderator.stopScreenSharing": null
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/pl.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": "Moderator wyciszył audio",
"moderator.muteVideo": "Moderator wyciszył twoje video",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/pt.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/ro.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

11
app/src/translations/tr.json
View File

@ -182,6 +182,15 @@
"devices.cameraDisconnected": "Kamera bağlı değil",
"devices.cameraError": "Kameranıza erişilirken bir hata oluştu",
"moderator.clearChat": null,
"moderator.clearFiles": null,
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/tw.json
View File

@ -190,5 +190,9 @@
"moderator.muteAudio": "您已被管理員靜音",
"moderator.muteVideo": "您的視訊已被管理員關閉",
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}

6
app/src/translations/uk.json
View File

@ -191,5 +191,9 @@
"moderator.muteAudio": null,
"moderator.muteVideo": null,
"moderator.muteScreenSharing": null,
"moderator.stopScreenSharing": null
"moderator.stopScreenSharing": null,
"unsupportedBrowser.titleUnsupportedBrowser": null,
"unsupportedBrowser.titlewebrtcUnavailable": null,
"unsupportedBrowser.bodyText": null
}