webrtc gui and default driver on

public/ohmlang-calc/index.vwf.yaml

@@ -131,4 +131,5 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
+      color: "#ECECEC"
+      side: "back"

public/webrtc/index.vwf.config.yaml

@@ -6,4 +6,4 @@ model:
 view:
   vwf/view/aframe:
   vwf/view/editor-new:
-  vwf/view/webrtc: { iceServers: [ { url: 'stun:stun.l.google.com:19302' }, { url: 'stun:stun1.l.google.com:19302' },  { url: 'stun:stun2.l.google.com:19302' }, { url: 'stun:stun3.l.google.com:19302' }] }
+  vwf/view/webrtc:

public/webrtc/index.vwf.yaml

@@ -29,6 +29,7 @@ children:
       color: "#ECECEC"
       src: "#sky"
       fog: false
+      side: "back"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:

support/client/lib/vwf.js

@@ -369,14 +369,14 @@
 
                 { library: "vwf/view/webrtc", 
              //       linkedLibraries: ["vwf/view/webrtc/adapter"],  
-                    active: false 
+                    active: true 
                 },
 
                 { library: "vwf/view/ohm", active: true },
                 { library: "vwf/view/osc", active: true },
 
                 
-                 { library: "vwf/view/aframe", active: false },
+                 { library: "vwf/view/aframe", active: true },
                 { library: "vwf/model/aframe/aframe-master", active: false },
                 { library: "vwf/model/aframe/extras/aframe-extras.loaders", active: false },
                 { library: "vwf/model/aframe/addon/aframe-interpolation", active: false },
@@ -410,7 +410,7 @@
                      { library: "vwf/model/ohm", active: true },
                      { library: "vwf/model/osc", active: true },
                   
-                     { library: "vwf/model/aframe", active: false },
+                     { library: "vwf/model/aframe", active: true },
                      { library: "vwf/model/aframeComponent", active: true },
 
                     { library: "vwf/model/object", active: true }
@@ -422,10 +422,10 @@
                      { library: "vwf/view/ohm", active: true },
                      { library: "vwf/view/osc", active: true },
                      
-                      { library: "vwf/view/aframe", active: false },
+                      { library: "vwf/view/aframe", active: true },
                       { library: "vwf/view/aframeComponent", active: true },
 
-                    { library: "vwf/view/webrtc", active: false}
+                    { library: "vwf/view/webrtc", active: true}
 
                   
                 ]

support/client/lib/vwf/model/aframe.js

@@ -1034,6 +1034,8 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/ascene.vwf")) {
             aframeObj = document.createElement('a-scene');
+            let assetsElement = document.createElement('a-assets');
+            aframeObj.appendChild(assetsElement);
 
             self.state.scenes[node.ID] = aframeObj;
 

support/client/lib/vwf/model/aframe/aframe-master.js

@@ -66002,6 +66002,7 @@ module.exports.Component = registerComponent('camera', {
     far: {default: 10000},
     fov: {default: 80, min: 0},
     near: {default: 0.005, min: 0},
+    spectator: {default: false},
     zoom: {default: 1, min: 0}
   },
 
@@ -66022,10 +66023,8 @@ module.exports.Component = registerComponent('camera', {
    * Update three.js camera.
    */
   update: function (oldData) {
-    var el = this.el;
     var data = this.data;
     var camera = this.camera;
-    var system = this.system;
 
     // Update properties.
     camera.aspect = data.aspect || (window.innerWidth / window.innerHeight);
@@ -66035,8 +66034,16 @@ module.exports.Component = registerComponent('camera', {
     camera.zoom = data.zoom;
     camera.updateProjectionMatrix();
 
+    this.updateActiveCamera(oldData);
+    this.updateSpectatorCamera(oldData);
+  },
+
+  updateActiveCamera: function (oldData) {
+    var data = this.data;
+    var el = this.el;
+    var system = this.system;
     // Active property did not change.
-    if (oldData && oldData.active === data.active) { return; }
+    if (oldData && oldData.active === data.active || data.spectator) { return; }
 
     // If `active` property changes, or first update, handle active camera with system.
     if (data.active && system.activeCameraEl !== el) {
@@ -66048,6 +66055,23 @@ module.exports.Component = registerComponent('camera', {
     }
   },
 
+  updateSpectatorCamera: function (oldData) {
+    var data = this.data;
+    var el = this.el;
+    var system = this.system;
+    // spectator property did not change.
+    if (oldData && oldData.spectator === data.spectator) { return; }
+
+    // If `spectator` property changes, or first update, handle spectator camera with system.
+    if (data.spectator && system.spectatorCameraEl !== el) {
+      // Camera enabled. Set camera to this camera.
+      system.setSpectatorCamera(el);
+    } else if (!data.spectator && system.spectatorCameraEl === el) {
+      // Camera disabled. Set camera to another camera.
+      system.disableSpectatorCamera();
+    }
+  },
+
   /**
    * Remove camera on remove (callback).
    */
@@ -66349,9 +66373,7 @@ module.exports.Component = registerComponent('cursor', {
    * Handle intersection.
    */
   onIntersection: function (evt) {
-    var self = this;
     var cursorEl = this.el;
-    var data = this.data;
     var index;
     var intersectedEl;
     var intersection;
@@ -66373,6 +66395,24 @@ module.exports.Component = registerComponent('cursor', {
     // Unset current intersection.
     if (this.intersectedEl) { this.clearCurrentIntersection(); }
 
+    this.setIntersection(intersectedEl, intersection);
+  },
+
+  /**
+   * Handle intersection cleared.
+   */
+  onIntersectionCleared: function (evt) {
+    var clearedEls = evt.detail.clearedEls;
+
+    // Check if the current intersection has ended
+    if (clearedEls.indexOf(this.intersectedEl) === -1) { return; }
+    this.clearCurrentIntersection();
+  },
+
+  setIntersection: function (intersectedEl, intersection) {
+    var cursorEl = this.el;
+    var data = this.data;
+    var self = this;
     // Set new intersection.
     this.intersection = intersection;
     this.intersectedEl = intersectedEl;
@@ -66380,7 +66420,7 @@ module.exports.Component = registerComponent('cursor', {
     // Hovering.
     cursorEl.addState(STATES.HOVERING);
     intersectedEl.addState(STATES.HOVERED);
-    self.twoWayEmit(EVENTS.MOUSEENTER);
+    this.twoWayEmit(EVENTS.MOUSEENTER);
 
     // Begin fuse if necessary.
     if (data.fuseTimeout === 0 || !data.fuse) { return; }
@@ -66392,20 +66432,11 @@ module.exports.Component = registerComponent('cursor', {
     }, data.fuseTimeout);
   },
 
-  /**
-   * Handle intersection cleared.
-   */
-  onIntersectionCleared: function (evt) {
-    var clearedEls = evt.detail.clearedEls;
-
-    // Check if the current intersection has ended
-    if (clearedEls.indexOf(this.intersectedEl) !== -1) {
-      this.clearCurrentIntersection();
-    }
-  },
-
   clearCurrentIntersection: function () {
     var cursorEl = this.el;
+    var index;
+    var intersection;
+    var intersections;
 
     // No longer hovering (or fusing).
     this.intersectedEl.removeState(STATES.HOVERED);
@@ -66419,6 +66450,15 @@ module.exports.Component = registerComponent('cursor', {
 
     // Clear fuseTimeout.
     clearTimeout(this.fuseTimeout);
+
+    // Set intersection to another raycasted element if any.
+    intersections = this.el.components.raycaster.intersections;
+    if (intersections.length === 0) { return; }
+    // exclude the cursor.
+    index = intersections[0].object.el === cursorEl ? 1 : 0;
+    intersection = intersections[index];
+    if (!intersection) { return; }
+    this.setIntersection(intersection.object.el, intersection);
   },
 
   /**
@@ -69275,11 +69315,13 @@ module.exports.Component = registerComponent('raycaster', {
    */
   refreshObjects: function () {
     var data = this.data;
+    var els;
+
     // If objects not defined, intersect with everything.
-    var els = data.objects
+    els = data.objects
       ? this.el.sceneEl.querySelectorAll(data.objects)
       : this.el.sceneEl.children;
-    this.objects = flattenChildrenShallow(els);
+    this.objects = this.flattenChildrenShallow(els);
     this.dirty = false;
   },
 
@@ -69466,40 +69508,44 @@ module.exports.Component = registerComponent('raycaster', {
     this.lineData.start = data.origin;
     this.lineData.end = endVec3.copy(this.unitLineEndVec3).multiplyScalar(length);
     el.setAttribute('line', this.lineData);
-  }
-});
+  },
 
-/**
- * Returns children of each element's object3D group. Children are flattened
- * by one level, removing the THREE.Group wrapper, so that non-recursive
- * raycasting remains useful.
- *
- * @param  {Array<Element>} els
- * @return {Array<THREE.Object3D>}
- */
-function flattenChildrenShallow (els) {
-  var groups = [];
-  var objects = [];
-  var children;
-  var i;
+  /**
+   * Return children of each element's object3D group. Children are flattened
+   * by one level, removing the THREE.Group wrapper, so that non-recursive
+   * raycasting remains useful.
+   *
+   * @param  {Array<Element>} els
+   * @return {Array<THREE.Object3D>}
+   */
+  flattenChildrenShallow: (function () {
+    var groups = [];
 
-  // Push meshes onto list of objects to intersect.
-  for (i = 0; i < els.length; i++) {
-    if (els[i].object3D) {
-      groups.push(els[i].object3D);
-    }
-  }
+    return function (els) {
+      var children;
+      var i;
+      var objects = this.objects;
 
-  // Each entity's root is a THREE.Group. Return the group's chilrden.
-  for (i = 0; i < groups.length; i++) {
-    children = groups[i].children;
-    if (children && children.length) {
-      objects.push.apply(objects, children);
-    }
-  }
+      // Push meshes onto list of objects to intersect.
+      groups.length = 0;
+      for (i = 0; i < els.length; i++) {
+        if (els[i].object3D) {
+          groups.push(els[i].object3D);
+        }
+      }
 
-  return objects;
-}
+      // Each entity's root is a THREE.Group. Return the group's chilrden.
+      objects.length = 0;
+      for (i = 0; i < groups.length; i++) {
+        children = groups[i].children;
+        if (children && children.length) {
+          objects.push.apply(objects, children);
+        }
+      }
+      return objects;
+    };
+  })()
+});
 
 /**
  * Copy contents of one array to another without allocating new array.
@@ -78218,7 +78264,7 @@ _dereq_('./core/a-mixin');
 _dereq_('./extras/components/');
 _dereq_('./extras/primitives/');
 
-console.log('A-Frame Version: 0.7.0 (Date 2017-12-22, Commit #1ca6130)');
+console.log('A-Frame Version: 0.7.0 (Date 2017-12-27, Commit #ee1e41e)');
 console.log('three Version:', pkg.dependencies['three']);
 console.log('WebVR Polyfill Version:', pkg.dependencies['webvr-polyfill']);
 
@@ -78838,8 +78884,8 @@ module.exports.System = registerSystem('camera', {
     var sceneEl = this.sceneEl;
     var defaultCameraEl;
 
-    // Camera already defined.
-    if (sceneEl.camera) {
+    // Camera already defined or the one defined it is an spectator one.
+    if (sceneEl.camera && !sceneEl.camera.el.getAttribute('camera').spectator) {
       sceneEl.emit('camera-ready', {cameraEl: sceneEl.camera.el});
       return;
     }
@@ -78911,11 +78957,58 @@ module.exports.System = registerSystem('camera', {
     cameraEls = sceneEl.querySelectorAll('[camera]');
     for (i = 0; i < cameraEls.length; i++) {
       cameraEl = cameraEls[i];
-      if (!cameraEl.isEntity || newCameraEl === cameraEl) { continue; }
+      if (!cameraEl.isEntity ||
+          newCameraEl === cameraEl ||
+          cameraEl.getAttribute('camera').spectator) { continue; }
       cameraEl.setAttribute('camera', 'active', false);
       cameraEl.pause();
     }
     sceneEl.emit('camera-set-active', {cameraEl: newCameraEl});
+  },
+
+  /**
+   * Set spectator camera to render the scene on a 2D display.
+   *
+   * @param {Element} newCameraEl - Entity with camera component.
+   */
+  setSpectatorCamera: function (newCameraEl) {
+    var newCamera;
+    var previousCamera = this.spectatorCameraEl;
+    var sceneEl = this.sceneEl;
+    var spectatorCameraEl;
+
+    // Same camera.
+    newCamera = newCameraEl.getObject3D('camera');
+    if (!newCamera || newCameraEl === this.spectatorCameraEl) { return; }
+
+    // Disable current camera
+    if (previousCamera) {
+      previousCamera.setAttribute('camera', 'spectator', false);
+    }
+
+    spectatorCameraEl = this.spectatorCameraEl = newCameraEl;
+    spectatorCameraEl.setAttribute('camera', 'active', false);
+    spectatorCameraEl.play();
+
+    sceneEl.emit('camera-set-spectator', {cameraEl: newCameraEl});
+  },
+
+  /**
+   * Disables current spectator camera.
+   */
+  disableSpectatorCamera: function () {
+    this.spectatorCameraEl = undefined;
+  },
+
+  tock: function () {
+    var spectatorCamera;
+    var sceneEl = this.sceneEl;
+    var isVREnabled = sceneEl.renderer.vr.enabled;
+    if (!this.spectatorCameraEl || sceneEl.isMobile) { return; }
+    spectatorCamera = this.spectatorCameraEl.components.camera.camera;
+    sceneEl.renderer.vr.enabled = false;
+    sceneEl.renderer.render(sceneEl.object3D, spectatorCamera);
+    sceneEl.renderer.vr.enabled = isVREnabled;
   }
 });
 

support/client/lib/vwf/view/aframe.js

@@ -67,6 +67,8 @@ define(["module", "vwf/view"], function (module, view) {
 
             if (this.state.scenes[childID]) {
                 let scene = this.state.scenes[childID];
+              
+
                 document.body.appendChild(scene); //append is not working in Edge browser
                 createAvatarControl(scene);
                 createAvatar.call(this, childID);

support/client/lib/vwf/view/editor-new.js

@@ -1052,133 +1052,144 @@ define([
                         $components: [
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                 $components: [
                                     {
+                                    $type: "span",
+                                    $text: "Chat"
+                                }
 
-                                        $cell: true,
-                                        $type: "span",
-                                        $text: "ON",
-
-                                    }
                                 ]
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                 $components: [
-                                    widgets.switch({
+                                    widgets.icontoggle({
                                         'id': "webrtcswitch",
+                                        'label': 'visibility',
+                                        'on': JSON.stringify({"content": "visibility", "label": "Turn On Mic"}),
+                                        'off': JSON.stringify({"content": "visibility_off", "label": "Turn Off Mic"}),
+                                        'state': false,
                                         'init': function(){
+                                            this._driver = vwf.views["vwf/view/webrtc"];
+                                            if (!this._driver) {
+                                                this.classList.add('mdc-icon-toggle--disabled');
 
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                            if (!driver) this.setAttribute('disabled', '');
+                                            }
 
-                                        },
-                                        "onchange": function(e){
+                                            this.addEventListener('MDCIconToggle:change', (e) => {
+                                                
+                                                let driver = e.target._driver;
+                                                let chkAttr = e.detail.isOn;
+                                                let avatarID = 'avatar-' + self.kernel.moniker();
 
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                            let avatarID = 'avatar-' + self.kernel.moniker();
+                                                let micToggle = document.querySelector('#webrtcaudio');
+                                                let camToggle = document.querySelector('#webrtcvideo');
 
-                                            let chkAttr = this.checked;
+                                                if (chkAttr) {
+                                                    driver.startWebRTC(avatarID);
 
-                                         if (chkAttr) {
-                                             driver.startWebRTC(avatarID);
-                                             console.log("on")
-     
-                                         } else {
-                                            driver.stopWebRTC(avatarID);
-                                             console.log("off")
-                                         }
+                                                    micToggle.classList.remove('mdc-icon-toggle--disabled');
+                                                    camToggle.classList.remove('mdc-icon-toggle--disabled');
 
-                                        }
-                                    })
-                                ]
-                            },
-                            {
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                $components: [
-                                    {
+                                                    console.log("on")
+            
+                                                } else {
+                                                    driver.stopWebRTC(avatarID);
 
-                                        $cell: true,
-                                        $type: "span",
-                                        $text: "Mic: ",
+                                                    micToggle.classList.add('mdc-icon-toggle--disabled');
+                                                    camToggle.classList.add('mdc-icon-toggle--disabled');
+                                                    console.log("off")
+                                                }
 
-                                    }
+                                               //console.log(e, detail)
+                                                //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
+                                              });
+                                            
+                                        }
+                                    })
                                 ]
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                 $components: [
-                                    widgets.switch({
+                                    widgets.icontoggle({
                                         'id': "webrtcaudio",
+                                        'label': 'mic',
+                                        'on': JSON.stringify({"content": "mic", "label": "Turn On Mic"}),
+                                        'off': JSON.stringify({"content": "mic_off", "label": "Turn Off Mic"}),
+                                        'state': false,
                                         'init': function(){
+                                            this._driver = vwf.views["vwf/view/webrtc"];
+                                            let webrtcswitch = document.querySelector('#webrtcswitch');
 
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                            if (!driver) this.setAttribute('disabled', '');
-                                        },
-                                        "onchange": function(e){
-
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                           
-                                               let chkAttr = this.checked;
-                                            if (chkAttr) {
-                                                driver.muteAudio([chkAttr]);
-                                                console.log("on")
-        
-                                            } else {
-                                                driver.muteAudio([chkAttr]);
-                                                console.log("off")
+                                            if (!this._driver) {
+                                                this.classList.add('mdc-icon-toggle--disabled');
                                             }
-                                      
+                                            this.classList.add('mdc-icon-toggle--disabled');
+                                            this.addEventListener('MDCIconToggle:change', (e) => {
+                                                
+                                                let driver = e.target._driver;
+                                                let chkAttr = e.detail.isOn;
+                                                if (chkAttr) {
+                                                    driver.muteAudio(chkAttr);
+                                                    console.log("on")
+            
+                                                } else {
+                                                    driver.muteAudio(chkAttr);
+                                                    console.log("off")
+                                                }
 
+                                               //console.log(e, detail)
+                                                //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
+                                              });
+                                            
                                         }
                                     })
                                 ]
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                $components: [
-                                    {
-
-                                        $cell: true,
-                                        $type: "span",
-                                        $text: "Cam: ",
-
-                                    }
-                                ]
-                            },
-                            {
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                 $components: [
-                                    widgets.switch({
+                                    widgets.icontoggle({
                                         'id': "webrtcvideo",
+                                        'label': 'videocam',
+                                        'on': JSON.stringify({"content": "videocam", "label": "Turn On Video"}),
+                                        'off': JSON.stringify({"content": "videocam_off", "label": "Turn Off Video"}),
+                                        'state': false,
                                         'init': function(){
+                                            this._driver = vwf.views["vwf/view/webrtc"];
 
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                            if (!driver) this.setAttribute('disabled', '');
+                                            if (!this._driver) {
+                                                this.classList.add('mdc-icon-toggle--disabled');
+                                            }
 
-                                        },
-                                        "onchange": function(e){
+                                            this.classList.add('mdc-icon-toggle--disabled');
+                                            this.addEventListener('MDCIconToggle:change', (e) => {
+                                                
+                                                let driver = e.target._driver;
+                                                let chkAttr = e.detail.isOn;
+                                                if (chkAttr) {
+                                                    driver.muteVideo(chkAttr);
+                                                    console.log("on")
+            
+                                                } else {
+                                                    driver.muteVideo(chkAttr);
+                                                    console.log("off")
+                                                }
+
+                                               //console.log(e, detail)
+                                                //status.textContent = `Icon Toggle is ${detail.isOn ? 'on' : 'off'}`;
+                                              });
                                             
-                                            let driver = vwf.views["vwf/view/webrtc"];
-                                            let chkAttr = this.checked;
-                                            if (chkAttr) {
-                                                driver.muteVideo([chkAttr]);
-                                                console.log("on")
-        
-                                            } else {
-                                                driver.muteVideo([chkAttr]);
-                                                console.log("off")
-                                            }
                                         }
                                     })
                                 ]
                             }
+                           
                         ]
                     }
 
@@ -2604,11 +2615,12 @@ define([
                                 ]
                             },
                             widgets.divider,
-                            widgets.headerH3("h3", "Users online", "userList mdc-list-group__subheader"),
-                            clientListCell,
+                            webrtcGUI,
                             widgets.divider,
-                            widgets.headerH3("h3", "WebRTC", "userList mdc-list-group__subheader"),
-                            webrtcGUI
+                            widgets.headerH3("h3", "Users online", "userList mdc-list-group__subheader"),
+                            clientListCell
+                            //widgets.headerH3("h3", "WebRTC", "userList mdc-list-group__subheader"),
+                            
                         ]
                     }
 
@@ -2689,6 +2701,13 @@ define([
             // let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-temporary-drawer'));
             // document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
 
+        var toggleNodes = document.querySelectorAll('.mdc-icon-toggle');
+        toggleNodes.forEach( el => {
+            mdc.iconToggle.MDCIconToggle.attachTo(el);
+        });
+
+
+
             var drawerEl = document.querySelector('.mdc-temporary-drawer');
             var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
             var drawer = new MDCTemporaryDrawer(drawerEl);

support/client/lib/vwf/view/webrtc.js

@@ -170,11 +170,15 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
                   });
                   this.local.stream = undefined;
 
+
+
                 let vidui = document.querySelector('#webrtcvideo');
-                if (vidui) vidui.removeAttribute('checked');
+                const viduicomp = new mdc.iconToggle.MDCIconToggle(vidui); //new mdc.select.MDCIconToggle
+                if (vidui) viduicomp.on = false;
 
                 let micui = document.querySelector('#webrtcaudio');
-                if (micui) micui.removeAttribute('checked');
+                const micuicomp = new mdc.iconToggle.MDCIconToggle(micui);
+                if (micui) micuicomp.on = false;
 
                 this.deleteConnection(nodeID);
 
@@ -367,13 +371,13 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
 
                 case "webrtcMuteAudio":
                     if ( this.kernel.moniker() == this.kernel.client() ) {
-                        methodValue = muteAudio.call( this, methodParameters );
+                        methodValue = muteAudio.call( this, methodParameters[0] );
                     }
                     break;  
 
                 case "webrtcMuteVideo":
                     if ( this.kernel.moniker() == this.kernel.client() ) {
-                        methodValue = this.muteVideo.call( this, methodParameters );
+                        methodValue = this.muteVideo.call( this, methodParameters[0] );
                     }
                     break; 
 
@@ -390,7 +394,7 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
                 var tracks = str.getVideoTracks();
     
                 tracks.forEach(function(track) {
-                    track.enabled = mute[0];
+                    track.enabled = mute;
                   });
             }
         },
@@ -402,7 +406,7 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
                 var tracks = str.getAudioTracks();
     
                 tracks.forEach(function(track) {
-                    track.enabled = mute[0];
+                    track.enabled = mute;
                   });
             }
         }
@@ -527,28 +531,34 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
                 //     videoTracks[0].enabled = true;
                 // }
 
+                self.local.url = "url" //URL.createObjectURL( stream );
+                self.local.stream = stream;
+                self.kernel.setProperty( self.local.ID, "localUrl", self.local.url );
+                var localNode = self.state.clients[ self.local.ID ];
+
+
+                self.muteAudio(false);
+                self.muteVideo(false);
+
                 let webRTCGUI = document.querySelector('#webrtcswitch');
-                if (webRTCGUI) webRTCGUI.setAttribute("checked", true);
+                if (webRTCGUI) webRTCGUI.setAttribute("aria-pressed", true);
 
                 let videoTracks = stream.getVideoTracks();
                 let vstatus =  videoTracks[0].enabled;
 
                 let vidui = document.querySelector('#webrtcvideo');
-            if (vidui) vidui.setAttribute("checked", vstatus);
+                const viduicomp = new mdc.iconToggle.MDCIconToggle(vidui); //new mdc.select.MDCIconToggle
+                if (vidui) viduicomp.on = vstatus;
 
                 let audioTracks = stream.getAudioTracks();
                 let astatus =  audioTracks[0].enabled;
 
                 let micui = document.querySelector('#webrtcaudio');
-                if (micui) micui.setAttribute("checked", astatus);
+                const micuicomp = new mdc.iconToggle.MDCIconToggle(micui);
+                if (micui) micuicomp.on = astatus;
 
 
-               self.local.url = "url" //URL.createObjectURL( stream );
-                self.local.stream = stream;
-
-                self.kernel.setProperty( self.local.ID, "localUrl", self.local.url );
-
-                var localNode = self.state.clients[ self.local.ID ];
+               
                 displayLocal.call( self, stream, localNode.displayName);
                 sendOffers.call( self );
               } 
@@ -618,7 +628,7 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
             var audioTracks = str.getAudioTracks();
 
             audioTracks.forEach(function(track) {
-                track.enabled = mute[0];
+                track.enabled = mute;
               });
 
         }
@@ -737,7 +747,11 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
         this.state = "created";
 
         // webrtc peerConnection parameters
-        this.pc_config = { "iceServers": this.view.iceServers };
+        this.pc_config =  {'iceServers': [
+            {'url': 'stun:stun.l.google.com:19302'},
+            {'url': 'stun:stun1.l.google.com:19302'}
+        ]};//{ "iceServers": this.view.iceServers };
+
         this.pc_constraints = { "optional": [ { "DtlsSrtpKeyAgreement": true } ] };
         // Set up audio and video regardless of what devices are present.
         this.sdpConstraints = {
@@ -772,7 +786,7 @@ define( [ "module", "vwf/view", "vwf/utility", "vwf/utility/color", "jquery" ],
                 // }
 
                 try {
-                    this.pc = new RTCPeerConnection( this.pc_config);
+                    this.pc = new RTCPeerConnection( this.pc_config, this.pc_constraints);
                     this.pc.onicecandidate = iceCallback;
 
                     if ( self.view.debug ) console.log("Created RTCPeerConnnection with config \"" + JSON.stringify( this.pc_config ) + "\".");

support/client/lib/vwf/view/widgets.js

@@ -30,6 +30,22 @@ define(function () {
 
         }
 
+        icontoggle(obj) {
+            return {
+                $cell: true,
+                $type: "i",
+                class: "mdc-icon-toggle material-icons",
+                role: "button",
+                $text: obj.label,
+                id: obj.id,
+                'data-toggle-on': obj.on,
+                'data-toggle-off': obj.off,
+                'aria-pressed': obj.state,
+                //'aria-hidden': true,
+                $init: obj.init
+            }
+        }
+
         switch(obj) {
 
             return   {