Fixed Webpage-Recording demo for getUserMedia stream.

https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/webpage-rec
ording.html

.gitignore

@@ -3,3 +3,5 @@ node_modules
 
 # bower
 bower_components
+
+.DS_Store

Canvas-Recording/webpage-recording.html

@@ -182,15 +182,15 @@ <h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contentedi
  isRecordingStarted = true;
 
  playVideo(function() {
- recorder.startRecording(); 
+ recorder.startRecording();
  setTimeout(function() {
  document.getElementById('stop').disabled = false;
  }, 1000);
  });
 };
 document.getElementById('stop').onclick = function() {
  this.disabled = true;
- 
+
  isStoppedRecording = true;
 
  recorder.stopRecording(function() {
@@ -218,7 +218,7 @@ <h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contentedi
  videoElement.onloadedmetadata = function() {
  callback();
  };
- videoElement.srcObject = stream;
+ videoElement.src = URL.createObjectURL(stream);
  videoElement.play();
  }
 
@@ -232,4 +232,4 @@ <h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contentedi
  navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
 }
 </script>
-<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←WebRTC Experiments Homepage</a>
+<a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">Other Canvas-Recording Demos</a>

libs/screenshot-dev.js

@@ -1,10 +1,10 @@
-// Last time updated at July 28, 2016, 08:32:23
+// Last time updated at August 31, 2016, 08:32:23
 
 // Muaz Khan - https://github.com/muaz-khan
 // MIT License - https://www.webrtc-experiment.com/licence/
 // Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing
 
-// Note: All libraries listed in this file are "external libraries" 
+// Note: All libraries listed in this file are "external libraries"
 // ---- and has their own copyrights. Taken from "html2canvas" project.
 
 /*
@@ -2241,7 +2241,7 @@ NodeParser.prototype.paintElement = function(container) {
  }, this);
 
  this.renderer.clip(container.backgroundClip, function() {
-  switch (container.node.nodeName) {
+ switch (container.node.nodeName) {
  case "svg":
  case "IFRAME":
  var imgContainer = this.images.get(container.node);
@@ -2251,6 +2251,19 @@ NodeParser.prototype.paintElement = function(container) {
  log("Error loading <" + container.node.nodeName + ">", container.node);
  }
  break;
+ case "VIDEO":
+ // custom code written by Muaz Khan (www.muazkhan.com)
+ // to support <video> screenshots!
+ var imageContainer = {
+ image: container.node,
+ src: '',
+ tainted: false,
+ promise: function() {}
+ };
+
+ // renderImage(ctx, tempCanvas, tempCanvas, bounds, borders);
+ this.renderer.renderImage(container, bounds, container.borders, imageContainer);
+ break;
  case "IMG":
  var imageContainer = this.images.get(container.node.src);
  if (imageContainer) {
@@ -2267,17 +2280,6 @@ NodeParser.prototype.paintElement = function(container) {
  case "TEXTAREA":
  this.paintFormValue(container);
  break;
- case "VIDEO":
- // custom code written by Muaz Khan (www.muazkhan.com)
- // to support <video> screenshots!
- var tempCanvas = document.createElement('canvas');
- tempCanvas.width = element.videoWidth || element.clientWidth || 320;
- tempCanvas.height = element.videoHeight || element.clientHeight || 240;
- var tempContext = tempCanvas.getContext('2d');
- tempContext.drawImage(element, 0, 0, tempCanvas.width, tempCanvas.height);
-
- renderImage(ctx, tempCanvas, tempCanvas, bounds, borders);
- break;
  }
  }, this);
 };
@@ -3289,7 +3291,7 @@ CanvasRenderer.prototype.taints = function(imageContainer) {
 
 CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
  if (!this.taints(imageContainer) || this.options.allowTaint) {
-  this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
+ this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
  }
 };
 
@@ -6205,7 +6207,7 @@ fabric.Collection = {
 
  var slice = Array.prototype.slice;
 
- 
+
 
  /**
  * Invokes method on all items in a given array
@@ -6325,7 +6327,7 @@ fabric.Collection = {
 
 (function() {
 
- 
+
 
  /**
  * Camelizes a string