Added [email protected]

README.md

@@ -59,6 +59,8 @@ Please check [dev](https://github.com/muaz-khan/RecordRTC/tree/master/dev) direc
 14. [Record entire DIV including video, image, textarea, input, drag/move/resize, everything](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/)
 15. [Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.html)
 16. [Record Canvas2D Animation](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording.html)
+17. [WebGL animation recording](https://www.webrtc-experiment.com/RecordRTC/webgl/)
+18. [Plotly - WebGL animation recording](https://www.webrtc-experiment.com/RecordRTC/webgl/plotly.html)
 
 You can also try a chrome extension for screen recording:
 
@@ -139,8 +141,8 @@ bower install recordrtc
 You can even link specific [releases](https://github.com/muaz-khan/RecordRTC/releases):
 
 ```html
-<!-- use 5.3.8 or any other version -->
-<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.3.8/RecordRTC.js"></script>
+<!-- use 5.4.0 or any other version -->
+<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.4.0/RecordRTC.js"></script>
 ```
 
 ## How to capture stream?

RecordRTC.js

@@ -1,6 +1,6 @@
 'use strict';
 
-// Last time updated: 2016-06-24 10:56:24 PM UTC
+// Last time updated: 2016-08-11 4:09:01 PM UTC
 
 // Open-Sourced: https://github.com/muaz-khan/RecordRTC
 
@@ -1796,7 +1796,7 @@ function MediaStreamRecorder(mediaStream, config) {
 
         if (mediaRecorder.state === 'recording') {
             // "stop" method auto invokes "requestData"!
-            mediaRecorder.requestData();
+            // mediaRecorder.requestData();
             mediaRecorder.stop();
         }
     };

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "recordrtc",
-  "version": "5.3.8",
+  "version": "5.4.0",
   "authors": [
         {
             "name": "Muaz Khan",

dev/MediaStreamRecorder.js

@@ -221,7 +221,7 @@ function MediaStreamRecorder(mediaStream, config) {
 
         if (mediaRecorder.state === 'recording') {
             // "stop" method auto invokes "requestData"!
-            mediaRecorder.requestData();
+            // mediaRecorder.requestData();
             mediaRecorder.stop();
         }
     };

index.html

@@ -787,6 +787,18 @@ <h2 class="header">
                     <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>
                 </tr>
 
+                <tr style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: rgb(248, 248, 248);">
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">WebGL Animation Recording</td>
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/webgl/" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Demo</a></td>
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/webgl" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>
+                </tr>
+
+                <tr style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: rgb(248, 248, 248);">
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">plotly - WebGL Recording</td>
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/plotly.html" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Demo</a></td>
+                    <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/webgl/plotly.html" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>
+                </tr>
+
                 <tr style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: rgb(248, 248, 248);">
                     <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);" colspan=2>Record Audio+Videos in Old Chrome and Merge/Mux on PHP server using Ffmpeg</td>
                     <td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "recordrtc",
   "preferGlobal": false,
-  "version": "5.3.8",
+  "version": "5.4.0",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",

webgl/README.md

@@ -0,0 +1,18 @@
+Ducks Game
+==========
+
+Made with [GLGE](http://www.glge.org/). Uses [jQuery](http://jquery.com/).
+
+Uses [Paul Irisih's requestAnimationFrame snippet](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) for the animation loop.
+
+Water material from the [GLGE waterdemo](https://github.com/supereggbert/GLGE/tree/master/examples/waterdemo).
+
+Duck model, duck icon and plane model are from the [COLLADA Basic Samples collection](https://collada.org/owl/browse.php?sess=0&parent=120&expand=1&order=name&curview=0&sortname=ASC).
+
+Target model is a modified version of ["Target" on the Google 3D Warehouse](http://sketchup.google.com/3dwarehouse/details?mid=9b449f001b59e44bf68f483d72a2d14).
+
+`DST-Canopy` is the song "Canopy" by [NoSoapRadio](http://www.nosoapradio.us/).
+
+Pickup sound generated using [Bfxr](http://www.bfxr.net/).
+
+Parts not written by me (Ian Langworth) are released under the terms of [the MIT license](http://www.opensource.org/licenses/MIT).

webgl/assets/scene.xml

@@ -0,0 +1,84 @@
+<?xml version="1.0"?>
+<glge>
+
+  <!-- A plane. -->
+  <mesh id="groundmesh">
+    <positions>1,1,0,-1,1,0,-1,-1,0,1,1,0,-1,-1,0,1,-1,0</positions>
+    <normals>-0,0,1,-0,0,1,-0,0,1,0,-0,1,0,-0,1,0,-0,1</normals>;
+    <uv1>0,0,1,0,1,1,0,0,1,1,0,1</uv1>
+    <faces>0,1,2,3,4,5,</faces>
+  </mesh>
+
+  <!-- A magical, reflective water material. From the GLGE example. Scale has been tweaked.-->
+  <material id="water" specular="0.2" shininess="50" color="#aaf" emit="0.001">
+
+    <texture id="waterheight" src="waterheight.jpg" />
+    <material_layer texture="#waterheight" mapinput="UV1" frame_rate="25" height="0.07"
+      animation="#flow" mapto="M_HEIGHT" scale_x="2" scale_y="1" />
+
+    <texture id="waternormal" src="waternormal.jpg" />
+    <material_layer texture="#waternormal" mapinput="UV1" mapto="M_NOR"
+      scale_x="2" scale_y="1" />
+
+    <texture_camera camera="#maincamera" id="watercolor1" clip_axis="POS_ZAXIS"  />
+    <material_layer texture="#watercolor1" mapinput="MAP_VIEW" scale_x="2" d_rot_y="1.57"
+      mapto="M_COLOR" alpha="0.95" />
+
+    <texture_camera camera="#maincamera" id="watercolor2" clip_axis="NEG_ZAXIS"
+      mirror_axis="ZAXIS" />
+    <material_layer texture="#watercolor2" mapinput="MAP_VIEW"
+      mapto="M_COLOR" alpha="0.3" />
+
+  </material>
+
+  <!-- Water animation that moves the water bump map. -->
+  <animation_vector id="flow" frames="1000">
+    <animation_curve channel="OffsetY">
+      <linear_point x="0.0" y="-1" />
+      <linear_point x="1000.0" y="1.0" />
+    </animation_curve>
+  </animation_vector>
+
+  <!-- Animation which makes an object rock back and forth in the water. -->
+  <animation_vector id="bob" frames="120">
+    <animation_curve channel="DRotX">
+      <linear_point x="1" y="0" />
+      <linear_point x="30" y=".4" />
+      <linear_point x="60" y="0" />
+      <linear_point x="90" y=".4" />
+      <linear_point x="120" y="0" />
+    </animation_curve>
+    <animation_curve channel="LocZ">
+      <linear_point x="1" y="-.3" />
+      <linear_point x="30" y="0" />
+      <linear_point x="60" y="-.3" />
+      <linear_point x="90" y="0" />
+      <linear_point x="120" y="-.3" />
+    </animation_curve>
+  </animation_vector>
+
+  <!-- Animation used when ducks are collected. -->
+  <animation_vector id="disappear" frames="10">
+    <animation_curve channel="Scale">
+      <!-- Argh! These have to match up with the duck scale until I figure out why. -->
+      <linear_point x="0" y="0.01" />
+      <linear_point x="3" y="0.013" />
+      <linear_point x="10" y="0" />
+    </animation_curve>
+  </animation_vector>
+
+  <!-- A camera that's almost top-down but gives some perspective. -->
+  <camera id="maincamera"
+    fov_y="40"
+    rot_x="0.4"
+    loc_z="30" loc_x="0" loc_y="-12"
+    />
+
+  <!-- The initial scene with water. Can be creatd here or in JavaScript. -->
+  <scene id="mainscene" camera="#maincamera" ambient_color="#fff" background_color="#22738a">
+    <light id="mainlight" loc_y="5" type="L_POINT" />
+    <object id="ground" mesh="#groundmesh" material="#water"
+      scaleX="60" scaleY="30" loc_z=".2" />
+  </scene>
+
+</glge>