Permalink
Browse files

RecordRTC, DetectRTC, RTCMultiConnection, Canvas-Designer, single-pag…

…e demos, docs, MediaStreamRecorder, RecordRTC-to-Nodejs, etc. updated.
  • Loading branch information...
muaz-khan committed Jun 10, 2017
1 parent 7869874 commit 922503e288adcf6f771810721da803c5dd9ac65d
Showing with 11,108 additions and 4,844 deletions.
  1. +1 −0 Canvas-Designer/Gruntfile.js
  2. +20 −0 Canvas-Designer/LICENSE
  3. +17 −0 Canvas-Designer/README.md
  4. +24 −0 Canvas-Designer/canvas-designer-widget.js
  5. +27 −27 Canvas-Designer/dev/common.js
  6. +20 −9 Canvas-Designer/dev/events-handler.js
  7. +13 −0 Canvas-Designer/dev/share-drawings.js
  8. +60 −0 Canvas-Designer/dev/webrtc-handler.js
  9. +4 −10 Canvas-Designer/dev/zoom-handler.js
  10. +38 −3 Canvas-Designer/index.html
  11. +1 −1 Canvas-Designer/widget.html
  12. +126 −47 Canvas-Designer/widget.js
  13. +4 −4 Canvas-Designer/widget.min.js
  14. +20 −0 Chrome-Extensions/LICENSE
  15. +22 −12 Chrome-Extensions/README.md
  16. +64 −32 Chrome-Extensions/Screen-Capturing.js/README.md
  17. +64 −20 Chrome-Extensions/desktopCapture/README.md
  18. +2 −1 DetectRTC/.travis.yml
  19. +36 −33 DetectRTC/DetectRTC.js
  20. +14 −2 DetectRTC/DetectRTC.min.js
  21. +15 −1 DetectRTC/Gruntfile.js
  22. +20 −0 DetectRTC/LICENSE
  23. +110 −60 DetectRTC/README.md
  24. +2 −5 DetectRTC/dev/CheckDeviceSupport.js
  25. +4 −0 DetectRTC/dev/DetectLocalIPAddress.js
  26. +14 −4 DetectRTC/dev/DetectRTC.js
  27. +1 −10 DetectRTC/dev/common.js
  28. +4 −0 DetectRTC/dev/detectCaptureStream.js
  29. +4 −7 DetectRTC/dev/detectDesktopOS.js
  30. +1 −1 DetectRTC/dev/getBrowserInfo.js
  31. +0 −14 DetectRTC/dev/head.js
  32. +11 −6 DetectRTC/index.html
  33. +10 −1 DetectRTC/npm-test.js
  34. +3 −2 DetectRTC/package.json
  35. +32 −0 DetectRTC/test/CheckDeviceSupport.js
  36. +56 −0 DetectRTC/test/DetectRTC.js
  37. +39 −0 DetectRTC/test/browserstack.config.js
  38. +36 −0 DetectRTC/test/detectOSName.js
  39. +110 −0 DetectRTC/test/getBrowserInfo.js
  40. +16 −8 LICENSE
  41. +20 −20 MediaStreamRecorder/AudioStreamRecorder/FlashAudioRecorder.js
  42. +16 −6 MediaStreamRecorder/AudioStreamRecorder/MediaRecorderWrapper.js
  43. +2 −0 MediaStreamRecorder/AudioStreamRecorder/StereoAudioRecorder.js
  44. +3 −0 MediaStreamRecorder/AudioStreamRecorder/StereoAudioRecorderHelper.js
  45. +14 −2 MediaStreamRecorder/Gruntfile.js
  46. +1 −1 MediaStreamRecorder/LICENSE
  47. +273 −102 MediaStreamRecorder/MediaStreamRecorder.js
  48. +15 −3 MediaStreamRecorder/MediaStreamRecorder.min.js
  49. +113 −42 MediaStreamRecorder/README.md
  50. +3 −0 MediaStreamRecorder/VideoStreamRecorder/GifRecorder.js
  51. +3 −0 MediaStreamRecorder/VideoStreamRecorder/WhammyRecorder.js
  52. +3 −0 MediaStreamRecorder/VideoStreamRecorder/WhammyRecorderHelper.js
  53. +234 −77 MediaStreamRecorder/common/MultiStreamRecorder.js
  54. +5 −5 MediaStreamRecorder/common/OpentTokStreamRecorder.js
  55. +0 −21 MediaStreamRecorder/common/head.js
  56. +28 −45 MediaStreamRecorder/demos/MultiStreamRecorder.html
  57. +1 −1 MediaStreamRecorder/demos/index.html
  58. +6 −2 MediaStreamRecorder/demos/video-recorder.html
  59. +1 −1 MediaStreamRecorder/npm-test.js
  60. +1 −1 MediaStreamRecorder/server.js
  61. +2 −2 README.md
  62. +1 −1 RTCMultiConnection/Gruntfile.js
  63. +1 −1 RTCMultiConnection/README.md
  64. +1 −1 RTCMultiConnection/demos/Firebase-Demo.html
  65. +1 −1 RTCMultiConnection/demos/Video-Conferencing.html
  66. +2 −3 RTCMultiConnection/dev/DetectRTC.js
  67. +1 −1 RTCMultiConnection/dev/FirebaseConnection.js
  68. +3 −0 RTCMultiConnection/dev/PubNubConnection.js
  69. +27 −5 RTCMultiConnection/dev/RTCPeerConnection.js
  70. +3,368 −0 RTCMultiConnection/dev/adapter.js
  71. +13 −0 RTCMultiConnection/dev/getUserMedia.js
  72. +43 −9 RTCMultiConnection/dist/RTCMultiConnection.js
  73. +5 −5 RTCMultiConnection/dist/RTCMultiConnection.min.js
  74. +3 −3 RTCMultiConnection/server.js
  75. +1 −1 RTCMultiConnection/v2.2.2/RTCMultiConnection.js
  76. +1 −1 RTCMultiConnection/v2.2.2/RTCMultiConnection.min.js
  77. +1 −1 RTCMultiConnection/v2.2.2/dev/setDefaults.js
  78. +2 −0 RecordRTC/.gitignore
  79. +1 −0 RecordRTC/.travis.yml
  80. +2,540 −1,713 RecordRTC/Canvas-Recording/canvas-designer.js
  81. +12 −0 RecordRTC/Canvas-Recording/index.html
  82. +886 −612 RecordRTC/Canvas-Recording/record-canvas-drawings.html
  83. +20 −0 RecordRTC/LICENSE
  84. +176 −5 RecordRTC/README.md
  85. +19 −23 RecordRTC/RecordRTC-over-Socketio/README.md
  86. +1 −1 RecordRTC/RecordRTC-over-Socketio/ffmpeg-output/README.md
  87. +18 −14 RecordRTC/RecordRTC-over-Socketio/index.html
  88. +6 −5 RecordRTC/RecordRTC-over-Socketio/package.json
  89. +8 −8 RecordRTC/RecordRTC-over-Socketio/server.js
  90. +0 −120 RecordRTC/RecordRTC-over-Socketio/uploads/README.md
  91. +1 −0 RecordRTC/RecordRTC-to-Nodejs/.gitignore
  92. +20 −559 RecordRTC/RecordRTC-to-Nodejs/README.md
  93. BIN RecordRTC/RecordRTC-to-Nodejs/{static → }/ajax-loader.gif
  94. +0 −14 RecordRTC/RecordRTC-to-Nodejs/config.js
  95. +0 −176 RecordRTC/RecordRTC-to-Nodejs/handlers.js
  96. +30 −136 RecordRTC/RecordRTC-to-Nodejs/{static → }/index.html
  97. +0 −15 RecordRTC/RecordRTC-to-Nodejs/index.js
  98. +0 −2 RecordRTC/RecordRTC-to-Nodejs/merger.bat
  99. +0 −1 RecordRTC/RecordRTC-to-Nodejs/merger.sh
  100. +11 −6 RecordRTC/RecordRTC-to-Nodejs/package.json
  101. +0 −33 RecordRTC/RecordRTC-to-Nodejs/router.js
  102. +127 −18 RecordRTC/RecordRTC-to-Nodejs/server.js
  103. +0 −3 RecordRTC/RecordRTC-to-Nodejs/static/README.md
  104. +208 −96 RecordRTC/RecordRTC.js
  105. +3 −3 RecordRTC/RecordRTC.min.js
  106. +4 −4 RecordRTC/dev/CanvasRecorder.js
  107. +31 −31 RecordRTC/dev/Cross-Browser-Declarations.js
  108. +1 −1 RecordRTC/dev/GetRecorderType.js
  109. +4 −1 RecordRTC/dev/MRecordRTC.js
  110. +112 −41 RecordRTC/dev/MediaStreamRecorder.js
  111. +9 −2 RecordRTC/dev/MultiStreamRecorder.js
  112. +18 −10 RecordRTC/dev/RecordRTC.js
  113. +26 −3 RecordRTC/dev/StereoAudioRecorder.js
  114. +2 −2 RecordRTC/dev/amd.js
  115. +253 −75 RecordRTC/index.html
  116. +1 −1 RecordRTC/package.json
  117. +65 −0 RecordRTC/simple-demos/bitsPerSecond.html
  118. +317 −0 RecordRTC/simple-demos/raw-pcm.html
  119. +83 −0 RecordRTC/simple-demos/show-logo-on-recorded-video.html
  120. +15 −0 RecordRTC/test/README.md
  121. +89 −0 RecordRTC/test/audio-recording-using-StereoAudioRecorder.js
  122. +89 −0 RecordRTC/test/audio-recording.js
  123. +47 −0 RecordRTC/test/browserstack.config.js
  124. +89 −0 RecordRTC/test/canvas-recording.js
  125. +89 −0 RecordRTC/test/video-recording-using-WhammyRecorder.js
  126. +89 −0 RecordRTC/test/video-recording.js
  127. +6 −3 demos/MediaStreamTrack.getSources.html
  128. +5 −1 demos/audio-only-streaming.html
  129. +85 −170 demos/client-side-datachannel.html
  130. +4 −0 demos/client-side-socket-io.html
  131. +4 −0 demos/client-side-websocket.html
  132. +9 −5 demos/client-side.html
  133. +5 −0 demos/remote-stream-recording.html
  134. +5 −1 demos/screen-and-video-from-single-peer.html
  135. +4 −0 demos/switch-streams.html
  136. +7 −3 docs/RTP-usage.html
  137. +12 −8 docs/STUN-or-TURN.html
  138. +11 −3 docs/WebRTC-PeerConnection.html
  139. +12 −8 docs/WebRTC-Signaling-Concepts.html
  140. +11 −7 docs/echo-cancellation.html
  141. +11 −7 docs/how-file-broadcast-works.html
  142. +5 −1 docs/how-to-WebRTC-video-conferencing.html
  143. +40 −158 docs/how-to-share-audio-only-streams.html
  144. +11 −7 docs/how-to-use-rtcdatachannel-and-rtcpeerconnectionjs.html
  145. +12 −12 docs/how-to-use-rtcdatachannel.html
  146. +12 −9 docs/how-to-use-rtcpeerconnection-js-v1.1.html
  147. +11 −7 docs/rtc-datachannel-for-beginners.html
  148. +12 −9 docs/webrtc-for-beginners.html
  149. +11 −7 docs/webrtc-for-newbies.html
@@ -44,6 +44,7 @@ module.exports = function(grunt) {
'dev/events-handler.js',
'dev/share-drawings.js',
'dev/webrtc-handler.js',
'dev/canvas-designer-widget.js',
'dev/tail.js'
View
@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2017 [Muaz Khan](https://github.com/muaz-khan)
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
@@ -336,6 +336,23 @@ webrtcDataChannel.onopen = function() {
};
```
## `captureStream`
Get `MediaStream` object and share in realtime using `RTCPeerConnection.addStream` API.
```html
<script src="dev/webrtc-handler.js"></script>
<script>
designer.captureStream(function(stream) {
var url = URL.createObjectURL(stream);
videoPreview.src = url;
rtcPeerConnection.addStream(stream);
rtcPeerConnection.createOffer(success, failure, params);
});
</script>
```
## `pointsLength`
Each shape is considered as a `point`. This value allows you check number of shapes that are already drawn on the canvas-designer.
@@ -40,17 +40,32 @@ function CanvasDesigner() {
var syncDataListener = function(data) {};
var dataURLListener = function(dataURL) {};
var captureStreamCallback = function() {};
function onMessage(event) {
if (!event.data || event.data.uid !== designer.uid) return;
if(!!event.data.sdp) {
webrtcHandler.createAnswer(event.data, function(response) {
if(response.sdp) {
designer.postMessage(response);
return;
}
captureStreamCallback(response.stream);
});
return;
}
if (!!event.data.canvasDesignerSyncData) {
designer.pointsLength = event.data.canvasDesignerSyncData.points.length;
syncDataListener(event.data.canvasDesignerSyncData);
return;
}
if (!!event.data.dataURL) {
dataURLListener(event.data.dataURL);
return;
}
}
@@ -141,6 +156,15 @@ function CanvasDesigner() {
designer.iframe.contentWindow.postMessage(message, '*');
};
designer.captureStream = function(callback) {
if (!designer.iframe) return;
captureStreamCallback = callback;
designer.postMessage({
captureStream: true
});
};
designer.widgetHtmlURL = 'widget.html';
designer.widgetJsURL = 'widget.min.js';
}
@@ -24,7 +24,7 @@ var is = {
function addEvent(element, eventType, callback) {
if (eventType.split(' ').length > 1) {
var events = eventType.split(' ');
for (var i = 0; i < events; i++) {
for (var i = 0; i < events.length; i++) {
addEvent(element, events[i], callback);
}
return;
@@ -314,36 +314,36 @@ var common = {
if (p[0] === 'arc') {
output += 'context.beginPath();\n' + 'context.arc(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ', ' + point[2] + ', ' + point[3] + ', 0, ' + point[4] + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'pencil') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'marker') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'eraser') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'line') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.lineTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'arrow') {
@@ -361,15 +361,15 @@ var common = {
if (p[0] === 'quadratic') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.quadraticCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (p[0] === 'bezier') {
output += 'context.beginPath();\n' + 'context.moveTo(' + getPoint(point[0], x, 'x') + ', ' + getPoint(point[1], y, 'y') + ');\n' + 'context.bezierCurveTo(' + getPoint(point[2], x, 'x') + ', ' + getPoint(point[3], y, 'y') + ', ' + getPoint(point[4], x, 'x') + ', ' + getPoint(point[5], y, 'y') + ', ' + getPoint(point[6], x, 'x') + ', ' + getPoint(point[7], y, 'y') + ');\n'
+
this.strokeOrFill(p[2]);
+
this.strokeOrFill(p[2]);
}
if (i !== length - 1) output += '\n\n';
@@ -380,68 +380,68 @@ var common = {
},
forLoop: 'for(i; i < length; i++) {\n' + ' p = points[i];\n' + ' point = p[1];\n' + ' context.beginPath();\n\n'
// globals
// globals
+
' if(p[2]) { \n' + '\tcontext.lineWidth = p[2][0];\n' + '\tcontext.strokeStyle = p[2][1];\n' + '\tcontext.fillStyle = p[2][2];\n'
+
'\tcontext.globalAlpha = p[2][3];\n' + '\tcontext.globalCompositeOperation = p[2][4];\n' + '\tcontext.lineCap = p[2][5];\n' + '\tcontext.lineJoin = p[2][6];\n' + '\tcontext.font = p[2][7];\n' + ' }\n\n'
// line
// line
+
' if(p[0] === "line") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// arrow
// arrow
+
' if(p[0] === "arrow") { \n' + '\tdrawArrow(point[0], point[1], point[2], point[3], p[2]);\n' + ' }\n\n'
// pencil
// pencil
+
' if(p[0] === "pencil") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// marker
// marker
+
' if(p[0] === "marker") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// text
// text
+
' if(p[0] === "text") { \n' + '\tcontext.fillText(point[0], point[1], point[2]);\n' + ' }\n\n'
// eraser
// eraser
+
' if(p[0] === "eraser") { \n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.lineTo(point[2], point[3]);\n' + ' }\n\n'
// arc
// arc
+
' if(p[0] === "arc") context.arc(point[0], point[1], point[2], point[3], 0, point[4]); \n\n'
// rect
// rect
+
' if(p[0] === "rect") {\n' + '\tcontext.strokeRect(point[0], point[1], point[2], point[3]);\n' + '\tcontext.fillRect(point[0], point[1], point[2], point[3]);\n'
+
' }\n\n'
// quadratic
// quadratic
+
' if(p[0] === "quadratic") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.quadraticCurveTo(point[2], point[3], point[4], point[5]);\n' + ' }\n\n'
// bezier
// bezier
+
' if(p[0] === "bezier") {\n' + '\tcontext.moveTo(point[0], point[1]);\n' + '\tcontext.bezierCurveTo(point[2], point[3], point[4], point[5], point[6], point[7]);\n' + ' }\n\n'
// end-fill
// end-fill
+
' context.stroke();\n' + ' context.fill();\n'
@@ -1,7 +1,7 @@
var canvas = tempContext.canvas,
isTouch = 'createTouch' in document;
addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) {
addEvent(canvas, isTouch ? 'touchstart mousedown' : 'mousedown', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
pageX: 0,
pageY: 0
@@ -24,11 +24,24 @@ addEvent(canvas, isTouch ? 'touchstart' : 'mousedown', function(e) {
drawHelper.redraw();
e.preventDefault();
e.stopPropagation();
preventStopEvent(e);
});
addEvent(canvas, isTouch ? 'touchend touchcancel' : 'mouseup', function(e) {
function preventStopEvent(e) {
if (!e) {
return;
}
if (typeof e.preventDefault === 'function') {
e.preventDefault();
}
if (typeof e.stopPropagation === 'function') {
e.stopPropagation();
}
}
addEvent(canvas, isTouch ? 'touchend touchcancel mouseup' : 'mouseup', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
pageX: 0,
pageY: 0
@@ -53,11 +66,10 @@ addEvent(canvas, isTouch ? 'touchend touchcancel' : 'mouseup', function(e) {
syncPoints(is.isDragAllPaths || is.isDragLastPath ? true : false);
e.preventDefault();
e.stopPropagation();
preventStopEvent(e);
});
addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) {
addEvent(canvas, isTouch ? 'touchmove mousemove' : 'mousemove', function(e) {
if (isTouch) e = e.pageX ? e : e.touches.length ? e.touches[0] : {
pageX: 0,
pageY: 0
@@ -78,8 +90,7 @@ addEvent(canvas, isTouch ? 'touchmove' : 'mousemove', function(e) {
else if (cache.isArrow) arrowHandler.mousemove(e);
else if (cache.isMarker) markerHandler.mousemove(e);
e.preventDefault();
e.stopPropagation();
preventStopEvent(e);
});
var keyCode;
@@ -12,6 +12,19 @@ window.addEventListener('message', function(event) {
uid = event.data.uid;
}
if (event.data.captureStream) {
webrtcHandler.createOffer(function(sdp) {
sdp.uid = uid;
window.parent.postMessage(sdp, '*');
});
return;
}
if (event.data.sdp) {
webrtcHandler.setRemoteDescription(event.data);
return;
}
if (event.data.genDataURL) {
var dataURL = context.canvas.toDataURL(event.data.format, 1);
window.parent.postMessage({
Oops, something went wrong.

0 comments on commit 922503e

Please sign in to comment.