Skip to content

Commit

Permalink
Added recordrtc@5.3.8, now supporting Canvas2D recording both on Fire…
Browse files Browse the repository at this point in the history 
…fox, Canary and StableChrome.

https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/
  • Loading branch information
@muaz-khan
muaz-khan committed Jun 17, 2016
1 parent eba3ca7 commit 7c49d6f
Show file tree
Hide file tree
Showing 17 changed files with 860 additions and 537 deletions.
118 changes: 66 additions & 52 deletions AudioVideo-on-Firefox.html
View file
Expand Up @@ -153,60 +153,74 @@ <h2 id="download-url"></h2>
}
</script>

<section class="experiment">
<section class="experiment" id="other-demos">
<h2 class="header">
RecordRTC <a href="https://github.com/muaz-khan/RecordRTC">Sources Codes</a> / <a href="https://github.com/muaz-khan/RecordRTC/wiki">Wiki Pages</a>
<a href="#other-demos">Other Demos</a>
</h2>
<ol>
<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC Main Demo</a> (Records screen/video/audio in all browsers!)
</li>

<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/PHP/">RecordRTC-to-PHP</a>
(audio/video recording and uploading to server)
</li>

<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/">Canvas Recording!</a> (Web-Page Recording)
</li>

<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/Record-Mp3-or-Wav.html">Record Mp3 or Wav</a> (Pre-recorded audio) i.e. (Audio on Demand)
</li>

<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/MRecordRTC/">MRecordRTC and writeToDisk/getFromDisk!</a>
</li>

<li>
<a href="https://www.webrtc-experiment.com/RecordRTC/AudioVideo-on-Firefox.html">Audio+Video Recording on Firefox</a>
</li>

<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/PHP-and-FFmpeg">
RecordRTC / PHP / FFmpeg
</a>
(Syncing/Merging audio/video in single file!)
</li>

<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs">RecordRTC-to-Nodejs</a>
(used ffmpeg to merge wav/webm in single WebM container)
</li>

<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC">RecordRTC-to-ASP.NET MVC</a>
(audio/video recording and uploading to server)
</li>

<li>
<a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio">RecordRTC-to-Socket.io</a>
(used ffmpeg to merge wav/webm in single WebM container)
</li>

<li><a href="https://www.webrtc-experiment.com/ffmpeg/">RecordRTC and ffmpeg-asm.js</a> (ffmpeg inside the browser!)</li>
</ol>
<table style="border-collapse: collapse; border-spacing: 0px; margin-top: 0px; margin-bottom: 16px; display: block; width: 728px; overflow: auto; word-break: normal; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6000003814697px;"><thead><tr style="border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);"><th style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Experiment Name</th><th style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Demo</th><th style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Source</th></tr></thead>
<tbody>
<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);">WebPage+Canvas Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/webpage-recording.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/blob/master/Canvas-Recording/webpage-recording.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);">HTML5 Canvas Dashboard + 2D Animation Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/record-canvas-drawings.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/blob/master/Canvas-Recording/record-canvas-drawings.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);">HTML5 2D Animation Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording.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/blob/master/Canvas-Recording/Canvas-Animation-Recording.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);">Record Videos and Upload to PHP server</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/PHP/" 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/RecordRTC-to-PHP" 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);">Record Mp3 Audio Files</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/Record-Mp3-or-Wav.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/blob/master/Record-Mp3-or-Wav.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);">MRecordRTC: Multiple Videos Recording hack for Old-Chrome</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/MRecordRTC/" 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/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);" 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>
</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 Videos and Upload to Node.js server using $.post/XHR/XMLHttpRequest</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-Nodejs" 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 Videos and Upload to ASP.NET MVC server</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-to-ASPNETMVC" 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 Videos and Upload to Node.js server using Socket.io</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://github.com/muaz-khan/RecordRTC/tree/master/RecordRTC-over-Socketio" 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 inside the browser using Ffmpeg-asm.js</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/ffmpeg/" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>
</tr>
</tbody>
</table>
</section>

<section class="experiment">
Expand Down
27 changes: 14 additions & 13 deletions Canvas-Recording/Canvas-Animation-Recording.html
View file
Expand Up @@ -227,29 +227,28 @@ <h1>

<!-- below section handles RecordRTC and WhammyRecorder -->

<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>

<script>
document.getElementById('btn-record-webm').onclick = function() {
this.disabled = true;

var video = new Whammy.Video(100);
var canvas = document.getElementById('canvas');

var recorder = RecordRTC(canvas, {
type: 'canvas'
});

recorder.startRecording();

var stop = false;
var lastTime = (new Date).getTime();

(function looper() {
var currentTime = (new Date).getTime();
video.frames.push({
duration: currentTime - lastTime,
image: canvas.toDataURL('image/webp', 1)
});
lastTime = currentTime;

if(stop) {
video.compile(function(blob) {
recorder.stopRecording(function() {
var blob = recorder.getBlob();
document.body.innerHTML = '<video controls src="' + URL.createObjectURL(blob) + '" autoplay loop></video>';
})
});
return;
}
setTimeout(looper, 100);
Expand All @@ -258,7 +257,9 @@ <h1>
var seconds = 15;
var interval = setInterval(function() {
seconds--;
document.querySelector('h1').innerHTML = seconds + ' seconds remaining.';
if(document.querySelector('h1')) {
document.querySelector('h1').innerHTML = seconds + ' seconds remaining.';
}
}, 1000);

setTimeout(function() {
Expand Down
8 changes: 7 additions & 1 deletion Canvas-Recording/README.md
View file
@@ -1,9 +1,15 @@
## Record Entire WebPage or Canvas2D

Demos:
Features:

1. Realtime Canvas2D-animation recording is supported on Firefox 44+, and Chrome 53+
2. Older chrome supports webpage recording as well as canvas-2d animation recording. PS: Old Firefox is NOT supporting Canvas2D recording.

## Demos

1. [Record entire DIV including video, image, textarea, input, drag/move/resize, everything](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/)
2. [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)
3. [Record Canvas2D Animation](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/Canvas-Animation-Recording.html)

This [WebRTC](https://www.webrtc-experiment.com/) experiment is using [RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) to record HTML/Canvas into webm; where [html2canvas.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) is used to capture HTML-snapshots. Those snapshots are encoded in webp; and then encoded again in webm.

Expand Down

0 comments on commit 7c49d6f

Please sign in to comment.