unserver-unify/src/components/content/speed.html

<div class='panel panel-info' ng-controller="HelpTestController as HtCtrl">
  <div class='panel-heading'>
    Video Conference Condition Test:
  </div>
  <progressbar ng-if="HtCtrl.showProgress" id="progressbarid" class="progress-striped active" value="dynamic" type="info" animate="true"></progressbar>

  <div class="panel-body">
  <div class="col-md-7">

    <div id="btngroup">
      Check if your pc is ready for video conference.<p/>
      <button ng-click="HtCtrl.fullTest()" class="btn btn-info">Start Test</button>

     <!-- <button ng-click="HtCtrl.start()" class="btn btn-info">Bandwidth</button>
      <button ng-click="HtCtrl.connection()" class="btn btn-warning">Connection</button>
      <button ng-click="HtCtrl.hardware()" class="btn btn-success">Hardware</button>-->
    </div>

    <h3 id="resultHint" style="color:green;display: inline;" >{{info}}&nbsp;&nbsp;</h3><button class="btn btn-warning" ng-if="HtCtrl.stopflag" ng-click="HtCtrl.stopTest()" style="display: inline;">Stop Test</button>
    <h2 id="resultError" style="color:red;">{{error}}</h2>
    <table class="table table-bordered">
      <tr>
        <th>
          Enviroment Test
        </th>
        <th>
          Result
        </th>
      </tr>
      <tr>
        <td>Browser </td>
        <td >{{HtCtrl.hwresult[2]}}</td>
      </tr>
      <tr>
        <td>Audio+Video </td>
        <td >{{HtCtrl.hwresult[0]}}</td>
      </tr>
      <tr>
        <td>Audio Only </td>
        <td >{{HtCtrl.hwresult[1]}}</td>
      </tr>
    </table>
  </div>
  <div class="col-md-5">
    <img id="hint" ng-src="{{picturename}}" height="240" width="320" style="display: none;">
    <video id="video" width="280" height="210" autoplay muted></video>
  </div>

  <div class="col-md-12">
  <table class="table table-bordered">
    <tr>
      <th>
        Network Speed Test
      </th>
      <th>
        Time Consumed
      </th>
      <th>
        Reference (ms)
      </th>
    </tr>

    <tr>
      <td>Static Conent Server</td>
      <td id="awss3">{{HtCtrl.speed[0]}}</td>
      <td>630</td>
    </tr>
    <tr>
      <td>API Server</td>
      <td id="awssg">{{HtCtrl.speed[1]}}</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>China Static content</td>
      <td >{{HtCtrl.speed[2]}}</td>
      <td>6095</td>
    </tr>
    <tr>
      <td>CDN</td>
      <td id="awssg">{{HtCtrl.speed[3]}}</td>
      <td>630</td>
    </tr>
    <!--<tr>
      <td>CDN content</td>
      <td >{{HtCtrl.speed[3]}}</td>
      <td>1200</td>
    </tr>-->

    <!--<tr>
      <td>Ali Server </td>
      <td >{{alitime}}</td>
      <td>630</td>
    </tr>-->
    <tr>
      <td>SG Control Server</td>
      <td id="chsg">{{HtCtrl.connection[0]}}</td>
      <td>1135</td>
    </tr>
    <tr>
      <td>US Control Server</td>
      <td >{{HtCtrl.connection[1]}}</td>
      <td>1513</td>
    </tr>
    <tr>
      <td>White Board Server</td>
      <td >{{HtCtrl.connection[2]}}</td>
      <td>1100</td>
    </tr>
  </table>
</div>

</div>

</div>

<script>
  //$("#progressbarid").hide();
  function hideBtnGroup() {
    $("#btngroup").hide();
  }
  var _socket;
  var _tstart,_tstop;
  function testSocketConnectionURL(path,callback) {
  //console.log(path);
    var _tstart=new Date();
    _socket = null;
    _socket=io.connect(path, {
      forceNew: true,
      transports: ['websocket']
    });
    _socket.on('connect', function() {
      _tstop=new Date();
      var result=_tstop-_tstart;
    //console.log("socket connected: "+(result));
      _socket.disconnect();
      callback(true,result);
    });
    _socket.on('error', function(error) {
      callback(false,error);
    });
  }
  function getVideoTest(videoObj,callback) {
    var video = document.getElementById("video");
    $("#hint").show();
    $("#video").hide();
    var errBack = function(error) {
			return callback (false, error);
		};

    if(navigator.getUserMedia) { // Standard
    //console.log("--chrome--");
      navigator.getUserMedia(videoObj, function(stream) {
        $("#hint").hide();
        $("#video").show();
        video.src = window.URL.createObjectURL(stream);
        video.play();
        return callback(true);
      }, errBack);
    } else if(navigator.mozGetUserMedia) { // Firefox-prefixed
    //console.log("--firefox--");
      navigator.mozGetUserMedia(videoObj, function(stream){
        $("#video").show();
        video.src = window.URL.createObjectURL(stream);
        video.play();
        return callback(true);
      }, errBack);
    } else{
    //console.log("--unknown--");
      return callback(false,"Not Supported Browser");
    }

  }

</script>