@vikasietum_tecknology/record-rtc
Version:
record-rtc is a library based on recordrtc library. In this forked version of the original library we have optimized the memory management. The video recording is stored in IndexDB in chunks.
202 lines (171 loc) • 12.5 kB
HTML
<script>window.demoVersion = '2018.12.23';</script>
<!--
> Muaz Khan - www.MuazKhan.com
> MIT License - www.WebRTC-Experiment.com/licence
> Documentation - github.com/muaz-khan/RecordRTC
> and - RecordRTC.org
-->
<html lang="en">
<head>
<title>Recording Canvas2D Animations using RecordRTC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<style>
audio {
vertical-align: bottom;
width: 10em;
}
video {
max-width: 100%;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
p,
.inner {
padding: 1em;
}
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
label {
display: inline-block;
width: 8em;
}
</style>
<style>
.recordrtc button {
font-size: inherit;
}
.recordrtc button, .recordrtc select {
vertical-align: middle;
line-height: 1;
padding: 2px 5px;
height: auto;
font-size: inherit;
margin: 0;
}
.recordrtc, .recordrtc .header {
display: block;
text-align: center;
padding-top: 0;
}
.recordrtc video {
width: 70%;
}
.recordrtc option[disabled] {
display: none;
}
</style>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/gif-recorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/getScreenId.js"></script>
<!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
<script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Recording Canvas2D Animations using <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a>!
</h1>
<p style="margin:0;margin-bottom:-30px;">
<a href="https://github.com/muaz-khan/RecordRTC">Github Source Codes</a> |
<a href="https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/">Canvas Recording</a> |
<a href="https://www.webrtc-experiment.com/RecordRTC/simple-demos/">Simple Demos</a>
<br><br>
<a href="https://www.npmjs.com/package/recordrtc"><img src="https://img.shields.io/npm/v/recordrtc.svg"></a>
<a href="https://www.npmjs.com/package/recordrtc"><img src="https://img.shields.io/npm/dm/recordrtc.svg"></a>
<a href="https://travis-ci.org/muaz-khan/RecordRTC"><img src="https://travis-ci.org/muaz-khan/RecordRTC.png?branch=master"></a>
</p>
</header>
<section style="margin: 20px; text-align: center; color: red;">
<small id="demoVersion"></small>
<script>var date=new Date(window.demoVersion),month=date.toLocaleString("en-us",{month:"long"}),day=date.getUTCDate();day.toString().length<=9&&(day=day.toString().length == 1 ? "0"+day : day);var year=date.getUTCFullYear(); document.getElementById("demoVersion").innerHTML="Last Updated On: <time>"+month+" "+day+" "+year+"</time>";</script>
</section>
<div class="github-stargazers"></div>
<section class="experiment" id="other-demos">
<h2 class="header">
HTML5 Canvas2D Animation Recording
</h2>
<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); text-align: left;">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="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="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="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);">HTML5 2D Animation + Microphone Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="Canvas-Animation-Recording-Plus-Microphone.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-Plus-Microphone.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 + Mp3 Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="Canvas-Animation-Recording-Plus-Mp3.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-Plus-Mp3.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 + Microphone + Mp3 Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="Canvas-Animation-Recording-Plus-Microphone-Plus-Mp3.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-Plus-Microphone-Plus-Mp3.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);">WebGL Animation Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/webgl/" 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/WebGL-Recording" 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);">plotly - WebGL Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="https://www.webrtc-experiment.com/RecordRTC/plotly.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/tree/master/WebGL-Recording/plotly.html" style="color: rgb(65, 131, 196); text-decoration: none; background: transparent;">Source</a></td>
</tr>
</tbody>
</table>
</section>
<section class="experiment">
<div id="github-issues"></div>
</section>
<section class="experiment">
<div id="github-commits"></div>
</section>
<section class="experiment"><small id="send-message"></small></section>
</article>
<footer>
<p>
<a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a> |
<a href="http://www.muazkhan.com/">Muaz Khan</a> |
<a href="https://twitter.com/WebRTCWeb">@WebRTCWeb</a> |
<a href="https://twitter.com/muazkh">@muazkh</a>
</p>
</footer>
<!-- commits.js is useless for you! -->
<script>
window.useThisGithubPath = 'muaz-khan/RecordRTC';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>