Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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.

Demos

  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="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/screenshot.js"></script>
<div id="element-to-record" style="width:100%;height:100%;background:green;"></div>
<script>
var elementToRecord = document.getElementById('element-to-record');
var recorder = RecordRTC(elementToRecord, {
    type: 'canvas',
    showMousePointer: true,
    useWhammyRecorder: 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>

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

License

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