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

Merge branch 'develop' of https://github.com/havfo/multiparty-meeting into develop

master
Stefan Otto 2018-04-24 11:10:30 +02:00
parent e36830bc75 aa1ed3e12d
commit 7dfaeb65b5
9 changed files with 180 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/lib/ScreenShare.js
View File

@ -189,6 +189,19 @@ class FirefoxScreenShare
} }
} }
class DefaultScreenShare
{
isScreenShareAvailable()
{
return false;
}
needExtension()
{
return false;
}
}
export default class ScreenShare export default class ScreenShare
{ {
static create() static create()
@ -205,7 +218,7 @@ export default class ScreenShare
} }
default: default:
{ {
return null; return new DefaultScreenShare();
} }
} }
} }

36
app/lib/components/Peer.jsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import * as appPropTypes from './appPropTypes'; import * as appPropTypes from './appPropTypes';
import PeerView from './PeerView'; import PeerView from './PeerView';
import PeerScreenView from './PeerScreenView';
const Peer = (props) => const Peer = (props) =>
{ {
@ -79,19 +78,30 @@ const Peer = (props) =>
</div> </div>
:null :null
} }
<PeerView
peer={peer}
audioTrack={micConsumer ? micConsumer.track : null}
videoTrack={webcamConsumer ? webcamConsumer.track : null}
videoVisible={videoVisible}
videoProfile={videoProfile}
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
/>
</div> </div>
);
} {videoVisible && !webcamConsumer.supported ?
<div className='incompatible-video'>
<p>incompatible video</p>
</div>
:null
}
<PeerView
peer={peer}
audioTrack={micConsumer ? micConsumer.track : null}
videoTrack={webcamConsumer ? webcamConsumer.track : null}
screenTrack={screenConsumer ? screenConsumer.track : null}
videoVisible={videoVisible}
videoProfile={videoProfile}
screenVisible={screenVisible}
screenProfile={screenProfile}
audioCodec={micConsumer ? micConsumer.codec : null}
videoCodec={webcamConsumer ? webcamConsumer.codec : null}
screenCodec={screenConsumer ? screenConsumer.codec : null}
/>
</div>
);
}; };
Peer.propTypes = Peer.propTypes =

160
app/lib/components/PeerScreenView.jsx
View File

@ -1,160 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Spinner from 'react-spinner';
export default class PeerScreenView extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
videoWidth : null,
videoHeight : null
};
// Latest received video track.
// @type {MediaStreamTrack}
this._videoTrack = null;
// Periodic timer for showing video resolution.
this._videoResolutionTimer = null;
}
render()
{
const {
isMe,
videoVisible,
videoProfile,
videoCodec
} = this.props;
const {
videoWidth,
videoHeight
} = this.state;
return (
<div data-component='PeerScreenView'>
<div className='info'>
<div className={classnames('media', { 'is-me': isMe })}>
<div className='box'>
{videoCodec ?
<p className='codec'>{videoCodec} {videoProfile}</p>
:null
}
{(videoVisible && videoWidth !== null) ?
<p className='resolution'>{videoWidth}x{videoHeight}</p>
:null
}
</div>
</div>
</div>
<video
ref='video'
className={classnames({
hidden : !videoVisible,
'is-me' : isMe,
loading : videoProfile === 'none'
})}
autoPlay
muted={isMe}
/>
{videoProfile === 'none' ?
<div className='spinner-container'>
<Spinner />
</div>
:null
}
</div>
);
}
componentDidMount()
{
const { videoTrack } = this.props;
this._setTracks(videoTrack);
}
componentWillUnmount()
{
clearInterval(this._videoResolutionTimer);
}
componentWillReceiveProps(nextProps)
{
const { videoTrack } = nextProps;
this._setTracks(videoTrack);
}
_setTracks(videoTrack)
{
if (this._videoTrack === videoTrack)
return;
this._videoTrack = videoTrack;
clearInterval(this._videoResolutionTimer);
this._hideVideoResolution();
const { video } = this.refs;
if (videoTrack)
{
const stream = new MediaStream;
if (videoTrack)
stream.addTrack(videoTrack);
video.srcObject = stream;
if (videoTrack)
this._showVideoResolution();
}
else
{
video.srcObject = null;
}
}
_showVideoResolution()
{
this._videoResolutionTimer = setInterval(() =>
{
const { videoWidth, videoHeight } = this.state;
const { video } = this.refs;
// Don't re-render if nothing changed.
if (video.videoWidth === videoWidth && video.videoHeight === videoHeight)
return;
this.setState(
{
videoWidth : video.videoWidth,
videoHeight : video.videoHeight
});
}, 1000);
}
_hideVideoResolution()
{
this.setState({ videoWidth: null, videoHeight: null });
}
}
PeerScreenView.propTypes =
{
isMe : PropTypes.bool,
videoTrack : PropTypes.any,
videoVisible : PropTypes.bool.isRequired,
videoProfile : PropTypes.string,
videoCodec : PropTypes.string
};

124
app/lib/components/PeerView.jsx
View File

@ -14,9 +14,11 @@ export default class PeerView extends React.Component
this.state = this.state =
{ {
volume : 0, // Integer from 0 to 10., volume : 0, // Integer from 0 to 10.,
videoWidth : null, videoWidth : null,
videoHeight : null videoHeight : null,
screenWidth : null,
screenHeight : null
}; };
// Latest received video track. // Latest received video track.
@ -27,6 +29,10 @@ export default class PeerView extends React.Component
// @type {MediaStreamTrack} // @type {MediaStreamTrack}
this._videoTrack = null; this._videoTrack = null;
// Latest received screen track.
// @type {MediaStreamTrack}
this._screenTrack = null;
// Hark instance. // Hark instance.
// @type {Object} // @type {Object}
this._hark = null; this._hark = null;
@ -42,37 +48,60 @@ export default class PeerView extends React.Component
peer, peer,
videoVisible, videoVisible,
videoProfile, videoProfile,
screenVisible,
screenProfile,
audioCodec, audioCodec,
videoCodec, videoCodec,
screenCodec,
onChangeDisplayName onChangeDisplayName
} = this.props; } = this.props;
const { const {
volume, volume,
videoWidth, videoWidth,
videoHeight videoHeight,
screenWidth,
screenHeight
} = this.state; } = this.state;
return ( return (
<div data-component='PeerView'> <div data-component='PeerView'>
<div className='info'> <div className='info'>
<div className={classnames('media', { 'is-me': isMe })}> <div className={classnames('media', { 'is-me': isMe })}>
<div className='box'> {screenVisible ?
{audioCodec ? <div className='box'>
<p className='codec'>{audioCodec}</p> {audioCodec ?
:null <p className='codec'>{audioCodec}</p>
} :null
}
{videoCodec ? {screenCodec ?
<p className='codec'>{videoCodec} {videoProfile}</p> <p className='codec'>{screenCodec} {screenProfile}</p>
:null :null
} }
{(videoVisible && videoWidth !== null) ? {(screenVisible && screenWidth !== null) ?
<p className='resolution'>{videoWidth}x{videoHeight}</p> <p className='resolution'>{screenWidth}x{screenHeight}</p>
:null :null
} }
</div> </div>
:<div className='box'>
{audioCodec ?
<p className='codec'>{audioCodec}</p>
:null
}
{videoCodec ?
<p className='codec'>{videoCodec} {videoProfile}</p>
:null
}
{(videoVisible && videoWidth !== null) ?
<p className='resolution'>{videoWidth}x{videoHeight}</p>
:null
}
</div>
}
</div> </div>
<div className={classnames('peer', { 'is-me': isMe })}> <div className={classnames('peer', { 'is-me': isMe })}>
@ -111,19 +140,35 @@ export default class PeerView extends React.Component
<video <video
ref='video' ref='video'
className={classnames({ className={classnames({
hidden : !videoVisible, hidden : !videoVisible && !screenVisible,
'is-me' : isMe, 'is-me' : isMe,
loading : videoProfile === 'none' loading : videoProfile === 'none' && screenProfile === 'none'
})} })}
autoPlay autoPlay
muted={isMe} muted={isMe}
/> />
{screenVisible ?
<div className='minivideo'>
<video
ref='minivideo'
className={classnames({
hidden : !videoVisible,
'is-me' : isMe,
loading : videoProfile === 'none'
})}
autoPlay
muted={isMe}
/>
</div>
:null
}
<div className='volume-container'> <div className='volume-container'>
<div className={classnames('bar', `level${volume}`)} /> <div className={classnames('bar', `level${volume}`)} />
</div> </div>
{videoProfile === 'none' ? {videoProfile === 'none' && screenProfile === 'none' ?
<div className='spinner-container'> <div className='spinner-container'>
<Spinner /> <Spinner />
</div> </div>
@ -135,9 +180,9 @@ export default class PeerView extends React.Component
componentDidMount() componentDidMount()
{ {
const { audioTrack, videoTrack } = this.props; const { audioTrack, videoTrack, screenTrack } = this.props;
this._setTracks(audioTrack, videoTrack); this._setTracks(audioTrack, videoTrack, screenTrack);
} }
componentWillUnmount() componentWillUnmount()
@ -150,18 +195,21 @@ export default class PeerView extends React.Component
componentWillReceiveProps(nextProps) componentWillReceiveProps(nextProps)
{ {
const { audioTrack, videoTrack } = nextProps; const { audioTrack, videoTrack, screenTrack } = nextProps;
this._setTracks(audioTrack, videoTrack); this._setTracks(audioTrack, videoTrack, screenTrack);
} }
_setTracks(audioTrack, videoTrack) _setTracks(audioTrack, videoTrack, screenTrack)
{ {
if (this._audioTrack === audioTrack && this._videoTrack === videoTrack) if (this._audioTrack === audioTrack &&
this._videoTrack === videoTrack &&
this._screenTrack === screenTrack)
return; return;
this._audioTrack = audioTrack; this._audioTrack = audioTrack;
this._videoTrack = videoTrack; this._videoTrack = videoTrack;
this._screenTrack = screenTrack;
if (this._hark) if (this._hark)
this._hark.stop(); this._hark.stop();
@ -169,9 +217,9 @@ export default class PeerView extends React.Component
clearInterval(this._videoResolutionTimer); clearInterval(this._videoResolutionTimer);
this._hideVideoResolution(); this._hideVideoResolution();
const { video } = this.refs; const { video, minivideo } = this.refs;
if (audioTrack || videoTrack) if (audioTrack || videoTrack || screenTrack)
{ {
const stream = new MediaStream; const stream = new MediaStream;
@ -181,7 +229,19 @@ export default class PeerView extends React.Component
if (videoTrack) if (videoTrack)
stream.addTrack(videoTrack); stream.addTrack(videoTrack);
video.srcObject = stream; if (screenTrack)
{
const screenStream = new MediaStream;
screenStream.addTrack(screenTrack);
video.srcObject = screenStream;
minivideo.srcObject = stream;
}
else
{
video.srcObject = stream;
}
if (audioTrack) if (audioTrack)
this._runHark(stream); this._runHark(stream);
@ -252,9 +312,13 @@ PeerView.propTypes =
[ appPropTypes.Me, appPropTypes.Peer ]).isRequired, [ appPropTypes.Me, appPropTypes.Peer ]).isRequired,
audioTrack : PropTypes.any, audioTrack : PropTypes.any,
videoTrack : PropTypes.any, videoTrack : PropTypes.any,
screenTrack : PropTypes.any,
videoVisible : PropTypes.bool.isRequired, videoVisible : PropTypes.bool.isRequired,
videoProfile : PropTypes.string, videoProfile : PropTypes.string,
screenVisible : PropTypes.bool.isRequired,
screenProfile : PropTypes.string,
audioCodec : PropTypes.string, audioCodec : PropTypes.string,
videoCodec : PropTypes.string, videoCodec : PropTypes.string,
screenCodec : PropTypes.string,
onChangeDisplayName : PropTypes.func onChangeDisplayName : PropTypes.func
}; };

17
app/lib/index.jsx
View File

@ -5,7 +5,8 @@ import { render } from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { import {
applyMiddleware as applyReduxMiddleware, applyMiddleware as applyReduxMiddleware,
createStore as createReduxStore createStore as createReduxStore,
compose as composeRedux
} from 'redux'; } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import { createLogger as createReduxLogger } from 'redux-logger'; import { createLogger as createReduxLogger } from 'redux-logger';
@ -40,10 +41,22 @@ if (process.env.NODE_ENV === 'development')
reduxMiddlewares.push(reduxLogger); reduxMiddlewares.push(reduxLogger);
} }
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : composeRedux;
const enhancer = composeEnhancers(
applyReduxMiddleware(...reduxMiddlewares)
// other store enhancers if any
);
const store = createReduxStore( const store = createReduxStore(
reducers, reducers,
undefined, undefined,
applyReduxMiddleware(...reduxMiddlewares) enhancer
); );
domready(() => domready(() =>

146
app/stylus/components/PeerScreenView.styl
View File

@ -1,146 +0,0 @@
[data-component='PeerScreenView'] {
position: relative;
flex: 100 100 auto;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: rgba(#2a4b58, 0.9);
background-image: url('/resources/images/buddy.svg');
background-position: bottom;
background-size: auto 85%;
background-repeat: no-repeat;
> .info {
$backgroundTint = #000;
position: absolute;
z-index: 5
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(to bottom,
rgba($backgroundTint, 0) 0%,
rgba($backgroundTint, 0) 60%,
rgba($backgroundTint, 0.1) 70%,
rgba($backgroundTint, 0.8) 100%);
> .media {
flex: 0 0 auto;
display: flex;
flex-direction: row;
> .box {
margin: 4px;
padding: 2px 4px;
border-radius: 2px;
background-color: rgba(#000, 0.25);
> p {
user-select: none;
pointer-events: none;
margin-bottom: 2px;
color: rgba(#fff, 0.7);
font-size: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
}
> .peer {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
+desktop() {
&.is-me {
padding: 10px;
align-items: flex-start;
}
&:not(.is-me) {
padding: 20px;
align-items: flex-start;
}
}
+mobile() {
&.is-me {
padding: 10px;
align-items: flex-start;
}
&:not(.is-me) {
padding: 10px;
align-items: flex-end;
}
}
}
}
> video {
flex: 100 100 auto;
height: 100%;
width: 100%;
object-fit: cover;
user-select: none;
transition-property: opacity;
transition-duration: .15s;
background-color: rgba(#000, 0.75);
&.is-me {
transform: scaleX(-1);
}
&.hidden {
opacity: 0;
transition-duration: 0s;
}
&.loading {
filter: blur(5px);
}
}
> .spinner-container {
position: absolute;
top: 0
bottom: 0;
left: 0;
right: 0;
background-color: rgba(#000, 0.75);
.react-spinner {
position: relative;
width: 48px;
height: 48px;
top: 50%;
left: 50%;
.react-spinner_bar {
position: absolute;
width: 20%;
height: 7.8%;
top: -3.9%;
left: -10%;
animation: PeerView-spinner 1.2s linear infinite;
border-radius: 5px;
background-color: rgba(#fff, 0.5);
}
}
}
}
@keyframes PeerScreenView-spinner {
0% { opacity: 1; }
100% { opacity: 0.15; }
}

38
app/stylus/components/PeerView.styl
View File

@ -24,11 +24,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
background: linear-gradient(to bottom,
rgba($backgroundTint, 0) 0%,
rgba($backgroundTint, 0) 60%,
rgba($backgroundTint, 0.1) 70%,
rgba($backgroundTint, 0.8) 100%);
> .media { > .media {
flex: 0 0 auto; flex: 0 0 auto;
@ -195,6 +190,39 @@
} }
} }
> .minivideo {
height: 15%;
width: 15%;
bottom: 1%;
right: 1%;
position: absolute;
overflow: hidden;
> video {
flex: 100 100 auto;
height: 100%;
width: 100%;
object-fit: cover;
user-select: none;
transition-property: opacity;
transition-duration: .15s;
background-color: rgba(#000, 0.75);
&.is-me {
transform: scaleX(-1);
}
&.hidden {
opacity: 0;
transition-duration: 0s;
}
&.loading {
filter: blur(5px);
}
}
}
> .volume-container { > .volume-container {
position: absolute; position: absolute;
top: 0 top: 0

1
app/stylus/index.styl
View File

@ -40,7 +40,6 @@ body {
@import './components/Peers'; @import './components/Peers';
@import './components/Peer'; @import './components/Peer';
@import './components/PeerView'; @import './components/PeerView';
@import './components/PeerScreenView';
@import './components/Notifications'; @import './components/Notifications';
@import './components/Chat'; @import './components/Chat';
} }

2
server/lib/Room.js
View File

@ -254,7 +254,7 @@ class Room extends EventEmitter
protooPeer.send( protooPeer.send(
'chat-history-receive', 'chat-history-receive',
{ chatHistory : this._chatHistory } { chatHistory: this._chatHistory }
); );
break; break;