Skip to content
Branch: master
Find file History

Canvas+WebPage Recording using RecordRTC

Record entire webpage, part of webpage eg. a DIV, Canvas2D animatino, WebGL animation, videos+webpage, or any activity on the webpage.


  1. WebPage+Canvas Recording
  2. HTML5 Canvas Dashboard + 2D Animation Recording
  3. HTML5 2D Animation Recording
  4. HTML5 2D Animation + Microphone Recording
  5. HTML5 2D Animation + Mp3 Recording
  6. HTML5 2D Animation + Microphone + Mp3 Recording
  7. WebGL Animation Recording
  8. plotly - WebGL Recording

How to use?

<script src=""></script>
<script src=""></script>
<div id="element-to-record" style="width:100%;height:100%;background:green;"></div>
var elementToRecord = document.getElementById('element-to-record');
var recorder = RecordRTC(elementToRecord, {
    type: 'canvas',
    showMousePointer: true,
    useWhammyRecorder: true
recorder.stopRecording(function(url) {;

Record <canvas>

<script src=""></script>
<script src=""></script>
var canvas = document.querySelector('canvas');
var recorder = new CanvasRecorder(window.canvasElementToBeRecorded, {
    disableLogs: false

// start recording <canvas> drawings

// a few minutes later
recorder.stop(function(blob) {
    var url = URL.createObjectURL(blob);;

Watch a video:


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

You can’t perform that action at this time.