Dev into master

README.md

@@ -84,9 +84,9 @@ Head over to [test/README.md](https://github.com/Temasys/Google-WebRTC-Samples/b
 
 [Transmit text](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/basic/)
 
-<!-- [Transfer a file](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/filetransfer/) -->
+[Transfer a file](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/filetransfer/)
 
-<!-- [Transfer data](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/datatransfer/) -->
+[Transfer data](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/datatransfer/)
 
 [ArrayBuffer sending](https://github.com/Temasys/Google-WebRTC-Samples/src/content/datachannel/arraybuffer/)
 

index.html

@@ -135,9 +135,9 @@ <h3 id="datachannel">RTCDataChannel</h3>
 
       <p><a href="src/content/datachannel/basic/">Transmit text</a></p>
 
-      <p class="notPorted"><a href="src/content/datachannel/filetransfer/">Transfer a file</a></p>
+      <p><a href="src/content/datachannel/filetransfer/">Transfer a file</a></p>
 
-      <p class="notPorted"><a href="src/content/datachannel/datatransfer/">Transfer data</a></p>
+      <p><a href="src/content/datachannel/datatransfer/">Transfer data</a></p>
 
       <p><a href="src/content/datachannel/arraybuffer/">ArrayBuffer sending</a></p>
 

src/content/datachannel/datatransfer/index.html

@@ -51,7 +51,7 @@ <h1><a href="https://github.com/Temasys/Google-WebRTC-Samples/" title="WebRTC sa
         <button id="sendTheData" type="button">Generate and send data</button>
       </div>
       <div class="input">
-        <input type="number" id="megsToSend" min="1" name="megs" value="128"/>
+        <input type="number" id="megsToSend" min="1" name="megs" value="12"/>
         <label for="megsToSend">MB</label>
         <div id="errorMsg"></div>
       </div>

src/content/datachannel/datatransfer/js/main.js

@@ -6,8 +6,6 @@
  *  tree.
  */
 
-'use strict';
-
 var localConnection;
 var remoteConnection;
 var sendChannel;
@@ -22,6 +20,8 @@ var errorMessage = document.querySelector('div#errorMsg');
 
 var receivedSize = 0;
 var bytesToSend = 0;
+var nSent = 0; 
+var nReceived = 0;
 
 sendButton.onclick = createConnection;
 
@@ -50,10 +50,9 @@ function createConnection() {
       pcConstraint);
   trace('Created local peer connection object localConnection');
 
-  var dataChannelParams = {ordered: false};
-  if (orderedCheckbox.checked) {
-    dataChannelParams.ordered = true;
-  }
+  var dataChannelParams = {
+    ordered: orderedCheckbox.checked,
+  };
 
   sendChannel = localConnection.createDataChannel(
       'sendDataChannel', dataChannelParams);
@@ -94,6 +93,9 @@ function sendGeneratedData() {
   receiveProgress.max = sendProgress.max;
   sendProgress.value = 0;
   receiveProgress.value = 0;
+  receivedSize = 0;
+  nReceived = 0;
+  nSent = 0;
 
   var chunkSize = 16384;
   var stringToSendRepeatedly = randomAsciiString(chunkSize);
@@ -130,6 +132,7 @@ function sendGeneratedData() {
         return;
       }
       sendProgress.value += chunkSize;
+      nSent++;
       sendChannel.send(stringToSendRepeatedly);
     }
   };
@@ -195,14 +198,15 @@ function receiveChannelCallback(event) {
   receiveChannel.binaryType = 'arraybuffer';
   receiveChannel.onmessage = onReceiveMessageCallback;
 
-  receivedSize = 0;
+  tryStartSending();
 }
 
 function onReceiveMessageCallback(event) {
+  nReceived ++;
   receivedSize += event.data.length;
   receiveProgress.value = receivedSize;
 
-  if (receivedSize === bytesToSend) {
+  if (receivedSize >= bytesToSend) {
     closeDataChannels();
     sendButton.disabled = false;
     megsToSend.disabled = false;
@@ -212,7 +216,12 @@ function onReceiveMessageCallback(event) {
 function onSendChannelStateChange() {
   var readyState = sendChannel.readyState;
   trace('Send channel state is: ' + readyState);
-  if (readyState === 'open') {
+  tryStartSending();
+}
+
+function tryStartSending() {
+  if (sendChannel && sendChannel.readyState === 'open' &&
+    receiveChannel && receiveChannel.readyState === 'open') {
     sendGeneratedData();
   }
 }

src/content/datachannel/filetransfer/js/main.js

@@ -6,8 +6,6 @@
  *  tree.
  */
 
-'use strict';
-
 var localConnection;
 var remoteConnection;
 var sendChannel;
@@ -28,6 +26,7 @@ var timestampPrev = 0;
 var timestampStart;
 var statsInterval = null;
 var bitrateMax = 0;
+var fileType = '';
 
 fileInput.addEventListener('change', createConnection, false);
 
@@ -41,7 +40,7 @@ function createConnection() {
       pcConstraint);
   trace('Created local peer connection object localConnection');
 
-  sendChannel = localConnection.createDataChannel('sendDataChannel');
+  sendChannel = localConnection.createDataChannel('sendDataChannel', {ordered: true});
   sendChannel.binaryType = 'arraybuffer';
   trace('Created send data channel');
 
@@ -68,6 +67,7 @@ function onCreateSessionDescriptionError(error) {
 
 function sendData() {
   var file = fileInput.files[0];
+  receiveBuffer = [];
   trace('file is ' + [file.name, file.size, file.type,
       file.lastModifiedDate].join(' '));
 
@@ -82,12 +82,18 @@ function sendData() {
   }
   sendProgress.max = file.size;
   receiveProgress.max = file.size;
-  var chunkSize = 512;
+  fileType = file.type.length > 0 ? file.type : 'text/plain';
+  var chunkSize = 512 * 32;
+  var bufferFullThreshold = 5 * chunkSize;
   var sliceFile = function(offset) {
     var reader = new window.FileReader();
     reader.onload = (function() {
       return function(e) {
         var packet = new Int8Array(e.target.result, 0, e.target.result.byteLength);
+        if (sendChannel.bufferedAmount > bufferFullThreshold) {
+          setTimeout(sliceFile, 150, offset);
+          return;
+        }
         sendChannel.send(packet);
         if (file.size > offset + e.target.result.byteLength) {
           window.setTimeout(sliceFile, 0, offset + chunkSize);
@@ -164,7 +170,11 @@ function receiveChannelCallback(event) {
   receiveChannel = event.channel;
   receiveChannel.binaryType = 'arraybuffer';
   receiveChannel.onmessage = onReceiveMessageCallback;
-  receiveChannel.onopen = onReceiveChannelStateChange;
+  if (receiveChannel.readyState === 'open') {
+    onReceiveChannelStateChange();
+  } else {
+    receiveChannel.onopen = onReceiveChannelStateChange;
+  }
   receiveChannel.onclose = onReceiveChannelStateChange;
 
   receivedSize = 0;
@@ -175,48 +185,47 @@ function receiveChannelCallback(event) {
     URL.revokeObjectURL(downloadAnchor.href);
     downloadAnchor.removeAttribute('href');
   }
+  trySending();
 }
 
 function onReceiveMessageCallback(event) {
   // trace('Received Message ' + event.data.byteLength);
-  receiveBuffer.push(event.data);
-  receivedSize += event.data.byteLength;
+  var packet = new Int8Array(event.data);
+  receiveBuffer.push(packet);
+  receivedSize += packet.byteLength;
 
   receiveProgress.value = receivedSize;
 
   // we are assuming that our signaling protocol told
   // about the expected file size (and name, hash, etc).
   var file = fileInput.files[0];
-  if (receivedSize === file.size) {
-    var received = new window.Blob(receiveBuffer);
-    receiveBuffer = [];
+  if (receivedSize >= file.size) {
+    var received = new window.Blob(receiveBuffer, {type: fileType});
 
     downloadAnchor.href = URL.createObjectURL(received);
     downloadAnchor.download = file.name;
     downloadAnchor.textContent =
       'Click to download \'' + file.name + '\' (' + file.size + ' bytes)';
     downloadAnchor.style.display = 'block';
 
-    var bitrate = Math.round(receivedSize * 8 /
-        ((new Date()).getTime() - timestampStart));
-    bitrateDiv.innerHTML = '<strong>Average Bitrate:</strong> ' +
-        bitrate + ' kbits/sec (max: ' + bitrateMax + ' kbits/sec)';
-
     if (statsInterval) {
       window.clearInterval(statsInterval);
       statsInterval = null;
     }
 
     closeDataChannels();
+
+    var bitrate = Math.round(receivedSize * 8 /
+        ((new Date()).getTime() - timestampStart));
+    bitrateDiv.innerHTML = '<strong>Average Bitrate:</strong> ' +
+        bitrate + ' kbits/sec (max: ' + bitrateMax + ' kbits/sec)';
   }
 }
 
 function onSendChannelStateChange() {
   var readyState = sendChannel.readyState;
   trace('Send channel state is: ' + readyState);
-  if (readyState === 'open') {
-    sendData();
-  }
+  trySending();
 }
 
 function onReceiveChannelStateChange() {
@@ -226,59 +235,45 @@ function onReceiveChannelStateChange() {
     timestampStart = (new Date()).getTime();
     timestampPrev = timestampStart;
     statsInterval = window.setInterval(displayStats, 500);
-    window.setTimeout(displayStats, 100);
-    window.setTimeout(displayStats, 300);
   }
 }
 
+function trySending() {
+  if (sendChannel && sendChannel.readyState === 'open' &&
+    receiveChannel && receiveChannel.readyState === 'open') {
+    sendData();
+  }  
+}
+
 // display bitrate statistics.
 function displayStats() {
-  var display = function(bitrate) {
-    bitrateDiv.innerHTML = '<strong>Current Bitrate:</strong> ' +
-        bitrate + ' kbits/sec';
-  };
-
   if (remoteConnection &&
-      remoteConnection.iceConnectionState === 'connected') {
-    if (webrtcDetectedBrowser === 'chrome') {
-      // TODO: once https://code.google.com/p/webrtc/issues/detail?id=4321
-      // lands those stats should be preferrred over the connection stats.
-      remoteConnection.getStats(null, function(stats) {
-        for (var key in stats) {
-          var res = stats[key];
-          if (timestampPrev === res.timestamp) {
-            return;
-          }
-          if (res.type === 'googCandidatePair' &&
-              res.googActiveConnection === 'true') {
-            // calculate current bitrate
-            var bytesNow = res.bytesReceived;
-            var bitrate = Math.round((bytesNow - bytesPrev) * 8 /
-                (res.timestamp - timestampPrev));
-            display(bitrate);
-            timestampPrev = res.timestamp;
-            bytesPrev = bytesNow;
-            if (bitrate > bitrateMax) {
-              bitrateMax = bitrate;
-            }
+    remoteConnection.iceConnectionState === 'connected') {
+    // TODO: once https://code.google.com/p/webrtc/issues/detail?id=4321
+    // lands those stats should be preferrred over the connection stats.
+    remoteConnection.getStats(null, function(stats) {
+      if (statsInterval === null) {
+        // file was already completely sent
+        return;
+      }
+      for (var key in stats) {
+        var res = stats[key];
+        if (res.type === 'googCandidatePair' &&
+            res.googActiveConnection === 'true') {
+          // calculate current bitrate
+          var bytesNow = res.bytesReceived;
+          var bitrate = Math.round((bytesNow - bytesPrev) * 8 /
+              (res.timestamp - timestampPrev));
+          // display(bitrate);
+          bitrateDiv.innerHTML = '<strong>Current Bitrate:</strong> ' +
+              bitrate + ' kbits/sec';
+          timestampPrev = res.timestamp;
+          bytesPrev = bytesNow;
+          if (bitrate > bitrateMax) {
+            bitrateMax = bitrate;
           }
         }
-      });
-    } else {
-      // Firefox currently does not have data channel stats. See
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=1136832
-      // Instead, the bitrate is calculated based on the number of
-      // bytes received.
-      var bytesNow = receivedSize;
-      var now = (new Date()).getTime();
-      var bitrate = Math.round((bytesNow - bytesPrev) * 8 /
-          (now - timestampPrev));
-      display(bitrate);
-      timestampPrev = now;
-      bytesPrev = bytesNow;
-      if (bitrate > bitrateMax) {
-        bitrateMax = bitrate;
       }
-    }
+    }, function(e) {console.log('GetStats failure ', e);});
   }
 }