Made the users own webcam local instead of server-side

bigbluebutton-html5/imports/ui/components/video-dock/component.jsx

@@ -20,6 +20,9 @@ export default class VideoDock extends Component {
     this.ws = new ReconnectingWebSocket(Meteor.settings.public.kurento.wsUrl);
     this.wsQueue = [];
     this.webRtcPeers = {};
+    this.state = {
+      sharedWebcam : false,
+    }
 
     this.sendUserShareWebcam = props.sendUserShareWebcam.bind(this);
     this.sendUserUnshareWebcam = props.sendUserUnshareWebcam.bind(this);
@@ -31,8 +34,9 @@ export default class VideoDock extends Component {
   componentDidMount() {
     const ws = this.ws;
     const { users } = this.props;
+    const id = users[0].userId;
     for (let i = 0; i < users.length; i++) {
-      if (users[i].has_stream) {
+      if (users[i].has_stream && users[i].userId !== id) {
         this.start(users[i].userId, false, this.refs.videoInput);
       }
     }
@@ -260,6 +264,7 @@ export default class VideoDock extends Component {
     const { users } = this.props;
     const id = users[0].userId;
 
+    this.setState({sharedWebcam: true});
     this.start(id, true, this.refs.videoInput);
   }
 
@@ -267,6 +272,7 @@ export default class VideoDock extends Component {
     log('info', "Unsharing webcam");
     const { users } = this.props;
     const id = users[0].userId;
+    this.setState({sharedWebcam: false});
     this.sendUserUnshareWebcam(id);
   }
 
@@ -326,11 +332,20 @@ export default class VideoDock extends Component {
   }
 
   render() {
+    let cssClass;
+    if (this.state.sharedWebcam) {
+      cssClass = styles.sharedWebcamVideoLocal;
+    }
+    else {
+      cssClass = styles.sharedWebcamVideo;
+    }
+
     return (
 
       <div className={styles.videoDock}>
-        <div id="webcamArea" />
-        <video id="shareWebcamVideo" className={styles.sharedWebcamVideo} ref="videoInput" />
+        <div id="webcamArea">
+        <video autoPlay={true} playsInline={true} muted={true} id="shareWebcamVideo" className={cssClass} ref="videoInput" />
+          </div>
       </div>
     );
   }
@@ -338,6 +353,7 @@ export default class VideoDock extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     const { users } = this.props;
     const nextUsers = nextProps.users;
+    const id = users[0].userId;
 
     if (users) {
       let suc = false;
@@ -349,7 +365,9 @@ export default class VideoDock extends Component {
             console.log(`User ${nextUsers[i].has_stream ? '' : 'un'}shared webcam ${users[i].userId}`);
 
             if (nextUsers[i].has_stream) {
+              if (id !== users[i].userId) {
                 this.start(users[i].userId, false, this.refs.videoInput);
+              }
             } else {
               this.stop(users[i].userId);
             }

bigbluebutton-html5/imports/ui/components/video-dock/styles.scss

@@ -16,3 +16,7 @@
 .sharedWebcamVideo {
   display: none;
 }
+
+.sharedWebcamVideoLocal {
+  display: normal;
+}

bigbluebutton-html5/private/config/development/public/kurento.yaml

@@ -1,6 +1,6 @@
 kurento:
-  wsUrl: 'HOST'
-  chromeExtensionKey: 'KEY'
-  chromeExtensionLink: 'LINK'
-  enableScreensharing: false
-  enableVideo: false
+  wsUrl: 'wss://kurento-desktopsharing.mconf.com/bbb-webrtc-sfu'
+  chromeExtensionKey: 'mbfngdphjegmlbfobcblikeefpidfncbINK'
+  chromeExtensionLink: 'https://chrome.google.com/webstore/detail/kurento-screenshare-test/mbfngdphjegmlbfobcblikeefpidfncbINK'
+  enableScreensharing: true
+  enableVideo: true

labs/bbb-webrtc-sfu/lib/video/VideoManager.js

@@ -138,10 +138,7 @@ let stopSession = async function(sessionId, role, cameraId) {
     if (role === 'share') {
       var sharedVideo = sessions[sessionId][cameraId+'shared'];
       await sharedVideo.stop();
-      var viewerVideo = sessions[sessionId][cameraId];
-      await viewerVideo.stop();
       delete sessions[sessionId][cameraId+'shared'];
-      delete sessions[sessionId][cameraId];
       console.log('  [VideoManager] Stopping sharer [', sessionId, '][', cameraId,'] with IDs' , videoIds);
     }
     else if (role === 'viewer') {