Skip to content

Latest commit

 

History

History
 
 

Canvas-Recording

Record Entire WebPage or Canvas2D

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
  2. Record canvas 2D drawings, lines, shapes, texts, images, drag/resize/enlarge/move via a huge drawing tool!
  3. Record Canvas2D Animation

This WebRTC experiment is using RecordRTC.js to record HTML/Canvas into webm; where html2canvas.js is used to capture HTML-snapshots. Those snapshots are encoded in webp; and then encoded again in webm.

You can say it: "HTML/Canvas Recording using RecordRTC"!

=

<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
<div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
<script>
var elementToShare = document.getElementById('elementToShare');
var recorder = RecordRTC(elementToShare, {
    type: 'canvas',
    showMousePointer: true
});
recorder.startRecording();
recorder.stopRecording(function(url) {
    window.open(url);
});
</script>

=

Record <canvas>

<script src="https://cdn.webrtc-experiment.com/RecordRTC/Whammy.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC/CanvasRecorder.js"></script>
<canvas></canvas>
<script>
var canvas = document.querySelector('canvas');
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
    disableLogs: false
});

// start recording <canvas> drawings
recorder.record();

// a few minutes later
recorder.stop(function(blob) {
    var url = URL.createObjectURL(blob);
    window.open(url);
});
</script>

Live Demo:

Watch a video: https://vimeo.com/152119435

=

RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.

  1. RecordRTC to Node.js
  2. RecordRTC to PHP
  3. RecordRTC to ASP.NET MVC
  4. RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!
  5. MRecordRTC i.e. Multi-RecordRTC!
  6. RecordRTC on Ruby!
  7. RecordRTC over Socket.io

=

License

RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.