Skip to content

Commit 4402f4e

Browse files
muaz-khanmuaz-khan
committed
Added [email protected] Maybe fixed #116 
1 parent 5479366 commit 4402f4e

16 files changed

+384
-6
lines changed

‎Canvas-Recording/Canvas-Animation-Recording.html

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
<!DOCTYPE html>
2+
<html itemscope itemtype="http://schema.org/WebPage">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
7+
8+
<title>Canvas Animation Recording using RecordRTC</title>
9+
<meta name="description" content="Record canvas animation using RecordRTC.">
10+
<meta name="author" content="Muaz Khan"><link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
11+
<style>
12+
/* Muaz Khan (@muazkh) */
13+
14+
::-webkit-scrollbar {
15+
height: 0;
16+
overflow: visible;
17+
width: 10px;
18+
border-left:1px solid rgb(229, 229, 229);
19+
}
20+
::-webkit-scrollbar-thumb {
21+
background-color: rgba(0, 0, 0, .2);
22+
background-clip: padding-box;
23+
min-height: 28px;
24+
padding: 100px 0 0;
25+
box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
26+
border-width: 1px 1px 1px 6px;
27+
}
28+
::-webkit-scrollbar-button {
29+
height: 0;
30+
width: 0;
31+
}
32+
::-webkit-scrollbar-track {
33+
background-clip: padding-box;
34+
border: solid transparent;
35+
border-width: 0 0 0 4px;
36+
}
37+
::-webkit-scrollbar-corner {
38+
background: transparent;
39+
}
40+
41+
::selection, ::-moz-selection {
42+
background: #00A2E8;
43+
color: #fff;
44+
text-shadow: none;
45+
}
46+
47+
html, body, .footer, input, textarea, h1, h2 {
48+
margin: 0;
49+
padding: 0;
50+
51+
word-wrap: break-word;
52+
53+
-o-text-overflow: ellipsis;
54+
-ms-text-overflow: ellipsis;
55+
text-overflow: ellipsis;
56+
57+
font-family: Verdana, arial, helvetica, sans-serif
58+
}
59+
html {
60+
background-color: #FBFBFB;
61+
font-size: 13px;
62+
height:100%;
63+
cursor: default;
64+
overflow-x: hidden;
65+
}
66+
67+
.footer
68+
{
69+
border-top: 1px solid #E5E5E5;
70+
text-align: center;
71+
}
72+
73+
h1, h2
74+
{
75+
border-bottom: 1px solid #E5E5E5;
76+
text-align: center;
77+
text-shadow: 1px 1px #E5E5E5, 2px 2px white, 3px 3px #E5E5E5;
78+
color: #6c96c8;
79+
font-size: 350%;
80+
font-weight: normal;
81+
padding-bottom: 10px;
82+
83+
overflow:hidden;
84+
height: 55px;
85+
}
86+
87+
h1, .footer, .no-user-select, .view-buttons a
88+
{
89+
-webkit-user-select: none;
90+
-moz-user-select: none;
91+
-ms-user-select: none;
92+
user-select: none;
93+
}
94+
95+
h1
96+
{
97+
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 97%, rgba(237,237,237,1) 97%, rgba(255,255,255,1) 100%); /* FF3.6+ */
98+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(97%,rgba(243,243,243,1)), color-stop(97%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
99+
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 97%,rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
100+
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 97%,rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
101+
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 97%,rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%); /* IE10+ */
102+
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 97%,rgba(237,237,237,1) 97%,rgba(255,255,255,1) 100%); /* W3C */
103+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
104+
}
105+
106+
h2 {
107+
font-size: 30px;
108+
font-weight: normal;
109+
text-align: left;
110+
height: auto;
111+
}
112+
113+
a {
114+
color: #0b7aff;
115+
text-decoration: none;
116+
}
117+
118+
a:hover {
119+
color: #043877;
120+
}
121+
122+
section h2, section p, section pre, div h2, div p, div pre
123+
{
124+
padding: 1% 2%;
125+
}
126+
127+
pre, code {
128+
font-family: Consolas, "Andale Mono", "Lucida Console", "Courier New", monospace;
129+
color: #666
130+
}
131+
132+
img {
133+
width: 100%;
134+
-webkit-user-drag: none;
135+
}
136+
137+
img:hover {
138+
box-shadow: 0 0 3px rgb(0, 162, 232);
139+
}
140+
141+
img, .view-buttons a
142+
{
143+
border: 1px solid rgb(0, 162, 232);
144+
border-radius: 3px;
145+
box-shadow: 0 0 5px rgb(0, 162, 232);
146+
}
147+
148+
.view-buttons a {
149+
padding: 5px 10px;
150+
background-color: #FBFBFB;
151+
}
152+
153+
.view-buttons {
154+
padding: 20px;
155+
text-align: center;
156+
}
157+
158+
::-webkit-scrollbar {
159+
width: 0;
160+
height: 0;
161+
}
162+
</style>
163+
</head>
164+
<body>
165+
<h1>
166+
Click to <button id="btn-record-webm" style="font-size:inherit;">Record as WebM</button>
167+
</h1>
168+
<section>
169+
<canvas id="canvas"></canvas>
170+
</section>
171+
<script>
172+
if(!innerWidth) var innerWidth = document.body.clientWidth;
173+
if(!innerHeight) var innerHeight = document.body.clientHeight;
174+
innerHeight = innerHeight - (innerHeight / 3);
175+
176+
document.createElement("canvas").getContext?(function(){function a(){s.closePath(),s.fillStyle="rgba("+parseInt(Math.random()*255)+", "+parseInt(Math.random()*255)+", "+parseInt(Math.random()*255)+", .9)",s.fill(),s.beginPath()}function l(){var v;c+=5,h===1&&(t+=5,o+=5,n+=5,u+=5,c>20&&(h=2)),h===2&&(t-=5,o-=5,n-=5,u-=5,c>40&&(h=3)),h===3&&(f+=5,r+=5,i+=5,e+=5,c>60&&(h=4)),h===4&&(f-=5,r-=5,i-=5,e-=5,c>80&&(c=0,h=1)),s.clearRect(0,0,5e4,5e4);var y=[[t,n],[t,n],[t+269,n+69],[t+269,n+69],[t+211,n-162],[t+211,n-162],[t+23,n-213],[t+23,n-213],[t-165,n-60],[t-165,n-60],[t-72,n+116],[t-72,n+116],[t+74,n+117],[t+74,n+117],[t+128,n+128],[t+128,n+128],[t+274,n+15],[t+274,n+15],[t+137,n-158],[t+137,n-158],[t-80,n-97],[t-80,n-97],[t-114,n-10],[t-114,n-10],[t-165,n-57],[t-165,n-57],[t-72,n+118],[t-72,n+118],[t+72,n+117],[t+72,n+117],[t+268,n+67],[t+268,n+67],[t+211,n-162],[t+211,n-162],[t+24,n-211],[t+24,n-211]],p=[[f,i,r,e,o,u],[f+95,i+139,r-46,e+104,o,u],[f+186,i+153,r-44,e+97,o+29,u+3],[f+326,i+112,r+24,e+55,o+29,u+3],[f+317,i+12,r-7,e+77,o+5,u-65],[f+262,i-64,r-58,e-55,o+5,u-65],[f+154,i-43,r-116,e+6,o-88,u-76],[f+72,i-84,r-187,e-35,o-88,u-76],[f-81,i+111,r-162,e+70,o-142,u-39],[f-51,i+31,r-195,e-15,o-142,u-39],[f+78,i+239,r-123,e+142,o-124,u+47],[f-9,i+207,r-250,e+109,o-124,u+47],[f+107,i+229,r-162,e+130,o-55,u+61],[f+206,i+213,r-81,e+127,o-55,u+61],[f+196,i+191,r+67,e+166,o+151,u+108],[f+250,i+283,r+110,e+204,o+151,u+108],[f+283,i+100,r+87,e+12,o+136,u-78],[f+409,i+38,r+137,e-10,o+136,u-78],[f+164,i-44,r-76,e-50,o-36,u-163],[f+204,i-101,r-53,e-107,o-36,u-163],[f+23,i-2,r-156,e-53,o-118,u-132],[f-43,i-51,r-162,e-77,o-118,u-132],[f-26,i+101,r-190,e+86,o-189,u+73],[f-65,i+121,r-264,e+117,o-189,u+73],[f-65,i+121,r-264,e+117,o-363,u-30],[f-55,i+5,r-326,e-61,o-363,u-30],[f-61,i+140,r-261,e+205,o-239,u+204],[f+101,i+266,r-208,e+249,o-239,u+204],[f+110,i+237,r-161,e+190,o-22,u+238],[f+110,i+237,r+47,e+161,o-22,u+238],[f+309,i+214,r+121,e+202,o+254,u+160],[f+309,i+214,r+192,e+61,o+254,u+160],[f+325,i+14,r+161,e-98,o+178,u-203],[f+239,i-124,r+116,e-130,o+178,u-203],[f+179,i-105,r-74,e-175,o-104,u-255],[f+13,i-51,r-152,e-169,o-104,u-255]],w=36;for(v=0;v<w;v++)s.moveTo(y[v][0],y[v][1]),s.bezierCurveTo(p[v][0],p[v][1],p[v][2],p[v][3],p[v][4],p[v][5]),s.translate(y[v][0],y[v][1]),s.rotate(.001),s.translate(-y[v][0],-y[v][1]),a();oninterval(l)}var s;window.oninterval=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/60)}}(),s=document.getElementById("canvas").getContext("2d"),s.canvas.width=innerWidth,s.canvas.height=innerHeight,s.lineWidth=2;var c=0,h=1,t=396,n=342,f=339,i=232,r=529,e=255,o=498,u=322;l()})():(alert("Your browser is not supporting HTML5 Canvas APIs!"))
177+
</script>
178+
179+
<script>
180+
(function () {
181+
if (!document.createElement('canvas').getContext) {
182+
document.body.innerHTML = '<h1 style="height:auto;color:red;font-size:30px;">Excuse me Sir,<br /><br />You are using very old web-browser!<br /><br />Please upgrade it.</h1>';
183+
}
184+
var prepend = function (parent, elementToPrepend)
185+
{
186+
return parent.insertBefore(elementToPrepend, parent.firstChild);
187+
};
188+
189+
var div = document.createElement('div');
190+
191+
div.innerHTML = '<g:plusone size="tall"></g:plusone>';
192+
div.className = 'gplus-button';
193+
div.style.position = 'absolute';
194+
div.style.top = 0;
195+
div.style.padding = '3px 0';
196+
div.style.right = '30px';
197+
198+
var body = document.body;
199+
200+
if(body.insertBefore) prepend(body, div);
201+
else document.body.appendChild(div);
202+
})();
203+
204+
205+
(function () {
206+
var lastTime = 0, vendors = ['ms', 'moz', 'webkit', 'o'];
207+
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
208+
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
209+
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'RequestCancelAnimationFrame'];
210+
}
211+
if (!window.requestAnimationFrame)
212+
window.requestAnimationFrame = function (callback, element) {
213+
var currTime = new Date().getTime();
214+
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
215+
var id = window.setTimeout(function () {
216+
callback(currTime + timeToCall);
217+
}, timeToCall);
218+
lastTime = currTime + timeToCall;
219+
return id;
220+
};
221+
if (!window.cancelAnimationFrame)
222+
window.cancelAnimationFrame = function (id) {
223+
clearTimeout(id);
224+
};
225+
}());
226+
</script>
227+
228+
<!-- below section handles RecordRTC and WhammyRecorder -->
229+
230+
<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
231+
232+
<script>
233+
document.getElementById('btn-record-webm').onclick = function() {
234+
this.disabled = true;
235+
236+
var video = new Whammy.Video(100);
237+
var canvas = document.getElementById('canvas');
238+
239+
var stop = false;
240+
var lastTime = (new Date).getTime();
241+
(function looper() {
242+
var currentTime = (new Date).getTime();
243+
video.frames.push({
244+
duration: currentTime - lastTime,
245+
image: canvas.toDataURL('image/webp', 1)
246+
});
247+
lastTime = currentTime;
248+
249+
if(stop) {
250+
video.compile(function(blob) {
251+
document.body.innerHTML = '<video controls src="' + URL.createObjectURL(blob) + '" autoplay loop></video>';
252+
})
253+
return;
254+
}
255+
setTimeout(looper, 100);
256+
})();
257+
258+
var seconds = 15;
259+
var interval = setInterval(function() {
260+
seconds--;
261+
document.querySelector('h1').innerHTML = seconds + ' seconds remaining.';
262+
}, 1000);
263+
264+
setTimeout(function() {
265+
clearTimeout(interval);
266+
stop = true;
267+
}, seconds * 1000);
268+
};
269+
</script>
270+
</body>
271+
</html>

‎README.md

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,26 @@ E.g.
9191

9292
```html
9393
<!-- use 5.2.6 or any other version -->
94-
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.3.2/RecordRTC.js"></script>
94+
<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.3.3/RecordRTC.js"></script>
9595
```
9696

9797
There are some other NPM packages regarding RecordRTC:
9898

9999
* [https://www.npmjs.org/search?q=RecordRTC](https://www.npmjs.org/search?q=RecordRTC)
100100

101+
Here is how to use `require`:
102+
103+
```javascript
104+
var RecordRTC = require('recordrtc');
105+
var Whammy = RecordRTC.Whammy;
106+
var WhammyRecorder = RecordRTC.WhammyRecorder;
107+
var StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
108+
// and so on
109+
110+
var video = new Whammy.Video(100);
111+
var recorder = new StereoAudioRecorder(stream, options);
112+
```
113+
101114
## How to capture stream?
102115

103116
```html

0 commit comments

Comments
 (0)