clone unmuted input stream for usage with hark

bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx

@@ -100,9 +100,15 @@ class AudioControls extends PureComponent {
 
     const MUTE_ALERT_CONFIG = Meteor.settings.public.app.mutedAlert;
     const { enabled: muteAlertEnabled } = MUTE_ALERT_CONFIG;
+
     return (
       <span className={styles.container}>
-        {muted && muteAlertEnabled ? <MutedAlert {...{ inputStream, isViewer, isPresenter }} /> : null}
+        {inputStream && muteAlertEnabled ? (
+          <MutedAlert {...{
+            muted, inputStream, isViewer, isPresenter,
+          }}
+          />
+        ) : null}
         {showMute && isVoiceUser ? toggleMuteBtn : null}
         <Button
           className={cx(inAudio || styles.btn)}

bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx

@@ -10,6 +10,9 @@ const MUTE_ALERT_CONFIG = Meteor.settings.public.app.mutedAlert;
 
 const propTypes = {
   inputStream: PropTypes.object.isRequired,
+  isPresenter: PropTypes.bool.isRequired,
+  isViewer: PropTypes.bool.isRequired,
+  muted: PropTypes.bool.isRequired,
 };
 
 class MutedAlert extends Component {
@@ -20,17 +23,20 @@ class MutedAlert extends Component {
       visible: false,
     };
 
+    this.inputStream = null;
     this.speechEvents = null;
     this.timer = null;
 
+    this.cloneMediaStream = this.cloneMediaStream.bind(this);
     this.resetTimer = this.resetTimer.bind(this);
   }
 
   componentDidMount() {
     this._isMounted = true;
-    const { inputStream } = this.props;
+    this.cloneMediaStream();
+    if (this.inputStream) {
       const { interval, threshold, duration } = MUTE_ALERT_CONFIG;
-    this.speechEvents = hark(inputStream, { interval, threshold });
+      this.speechEvents = hark(this.inputStream, { interval, threshold });
       this.speechEvents.on('speaking', () => {
         this.resetTimer();
         if (this._isMounted) this.setState({ visible: true });
@@ -43,6 +49,11 @@ class MutedAlert extends Component {
         }
       });
     }
+  }
+
+  componentDidUpdate() {
+    this.cloneMediaStream();
+  }
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -50,18 +61,23 @@ class MutedAlert extends Component {
     this.resetTimer();
   }
 
+  cloneMediaStream() {
+    const { inputStream, muted } = this.props;
+    if (inputStream && !muted) this.inputStream = inputStream.clone();
+  }
+
   resetTimer() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
   }
 
   render() {
-    const { isViewer, isPresenter } = this.props;
+    const { isViewer, isPresenter, muted } = this.props;
     const { visible } = this.state;
     const style = {};
     style[styles.alignForMod] = !isViewer || isPresenter;
 
-    return visible ? (
+    return visible && muted ? (
       <div className={cx(styles.muteWarning, style)}>
         <span>
           <FormattedMessage