@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.
329 lines (277 loc) • 33.6 kB
HTML
<!--
> 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>RecordRTC Simple Demos</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://www.webrtc-experiment.com/style.css">
<style>
audio, video {
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
vertical-align: top;
}
input {
border: 1px solid #d9d9d9;
border-radius: 1px;
font-size: 2em;
margin: .2em;
width: 30%;
}
.setup {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
font-size: 102%;
height: 47px;
margin-left: -9px;
margin-top: 8px;
position: absolute;
}
p { padding: 1em; }
li {
border-bottom: 1px solid rgb(189, 189, 189);
border-left: 1px solid rgb(189, 189, 189);
padding: .5em;
}
</style>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
30+ Simple Demos using <a href="https://www.webrtc-experiment.com/RecordRTC/">RecordRTC</a>
</h1>
<p style="margin:0;margin-bottom:-30px;margin-top: 15px;">
<a href="https://www.webrtc-experiment.com/RecordRTC/">Home</a> |
<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="">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>
<div class="github-stargazers" style="margin-top: 30px;"></div>
<section class="experiment" id="other-demos">
<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);">Audio Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="audio-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/simple-demos/audio-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);">Video Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="video-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/simple-demos/video-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);">Screen Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="screen-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/simple-demos/screen-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);">Demo that fixes video seeking issues</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="seeking-workaround.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/simple-demos/seeking-workaround.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);">WebAssembly Recorder</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="WebAssemblyRecorder.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/simple-demos/WebAssemblyRecorder.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);">RecordRTC Google Chrome Extension API demo</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="RecordRTC_Extension.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/simple-demos/RecordRTC_Extension.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);">HTML Element Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="recording-html-element.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/simple-demos/recording-html-element.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);">ondataavailable | get Intervals based blobs</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="ondataavailable.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/simple-demos/ondataavailable.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);">16khz Audio Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="16khz-audio-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/simple-demos/16khz-audio-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 Mp3 or Wav</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="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/simple-demos/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);">Embedded IFrames</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="embedded-iframes.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/simple-demos/embedded-iframes.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);">Demo explains how to use promises with RecordRTC</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="RecordRTCPromisesHandler.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/simple-demos/RecordRTCPromisesHandler.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);">Demo to test bitsPerSecond</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="bitsPerSecond.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/simple-demos/bitsPerSecond.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);">Microosft Edge Audio Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="edge-audio-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/simple-demos/edge-audio-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 Multiple Camers into Single WebM</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="multi-cameras-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/simple-demos/multi-cameras-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);">Demo to test onStateChanged</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="onStateChanged.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/simple-demos/onStateChanged.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);">Get timestamp during recording using onTimeStamp</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="onTimeStamp.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/simple-demos/onTimeStamp.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);">Upload to server using jQuery over PHP</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="php-upload-jquery.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/simple-demos/php-upload-jquery.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);">Upload to server using JavaScript over PHP</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="php-upload-simple-javascript.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/simple-demos/php-upload-simple-javascript.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);">Get recorded file size during recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="preview-blob-size-during-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/simple-demos/preview-blob-size-during-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);">Demo to test Raw PCM audio</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="raw-pcm.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/simple-demos/raw-pcm.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 Cropped Screen</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="record-cropped-screen.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/simple-demos/record-cropped-screen.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);">Reusme same RecordRTC instance/object</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="reuse-same-instance.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/simple-demos/reuse-same-instance.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);">Auto-stop recording after specific interval using setRecordingDuration</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="setRecordingDuration.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/simple-demos/setRecordingDuration.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);">Include Your Logo in the recorded video</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="show-logo-on-recorded-video.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/simple-demos/show-logo-on-recorded-video.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);">Demo to test video-mirror 180 degree rotated video</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="video-mirror-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/simple-demos/video-mirror-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 Camera and Screen into Single WebM</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="video-plus-screen-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/simple-demos/video-plus-screen-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);">Show Animated News Bar on the top of the recorded video</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="show-animated-bar-on-video.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/simple-demos/show-animated-bar-on-video.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);">Demo to test "recorder.destroy" method</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="destroy.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/simple-demos/destroy.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);">Simple Gif Recording</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="gif-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/simple-demos/gif-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 Multipe Audios and get single WAV/Mp3/Ogg</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="multi-audios-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/simple-demos/multi-audios-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);">pass getUserMedia constraints to RecordRTC</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="pass-getUserMedia-constraints.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/simple-demos/pass-getUserMedia-constraints.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);">Auto Stop RecordRTC on Silence i.e. if someone stops speaking</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="auto-stop-on-silence.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/simple-demos/auto-stop-on-silence.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);">Calculate Recording Duration i.e. recording time</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="calculate-recording-duration.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/simple-demos/calculate-recording-duration.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);">isTypeSupported i.e. is-mime-type-supported</td>
<td style="padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><a href="isTypeSupported.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/simple-demos/isTypeSupported.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>
<section class="experiment">
<p style="margin-top: 6px; text-align: center;">
<a href="https://github.com/muaz-khan/RecordRTC">RecordRTC is Open-Sourced (MIT licensed) on Github!</a>
</p>
</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://www.webrtc-experiment.com/commits.js" async> </script>
</body>
</html>