Skip to content

Commit

Permalink
https://github.com/muaz-khan/RecordRTC updated.
Browse files Browse the repository at this point in the history
  • Loading branch information
@muaz-khan
muaz-khan committed Oct 9, 2014
1 parent c1cb521 commit 5febc11
Show file tree
Hide file tree
Showing 55 changed files with 5,844 additions and 108 deletions.
213 changes: 213 additions & 0 deletions AudioVideo-on-Firefox.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<!--
> Muaz Khan - https://github.com/muaz-khan
> neizerth - https://github.com/neizerth
> MIT License - https://www.webrtc-experiment.com/licence
> Source code - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>WebRTC Audio+Video Recording using RecordRTC &reg; Muaz Khan</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="//cdn.webrtc-experiment.com/style.css">

<style>
video {
max-width: 100%;
vertical-align: bottom;
}

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>
<script>
document.createElement('article');
document.createElement('footer');
</script>

<!-- script used for audio/video/gif recording -->
<script src="//cdn.webrtc-experiment.com/RecordRTC.js"> </script>
</head>

<body>
<article>
<header style="text-align: center;">
<h1>
Recording audio+video using <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>!
</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>

.
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>

.
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>

.
<a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a>

.
<a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
</p>
</header>

<div class="github-stargazers"></div>

<blockquote>
This <a href="https://www.webrtc-experiment.com/">WebRTC</a> experiment records both audio/video in single WebM/mp4 container/format using MediaRecorder API! It currently works only on Firefox &gt;= 29.<br /><br />
For chrome, please try <a href="https://www.webrtc-experiment.com/RecordRTC/">https://www.webrtc-experiment.com/RecordRTC/</a>.
</blockquote>

<div class="github-stargazers"></div>

<section class="experiment">
<h2 class="header">Record Audio+Video using Firefox &gt;= 29</h2>
<div class="inner">
<h2 id="download-url"></h2><br />
<video id="video"></video><hr />
<button id="start-recording">Record Audio+Video</button>
<button id="stop-recording" disabled>Stop</button><br />
</div>
</section>

<script>
var video = document.getElementById('video');
var downloadURL = document.getElementById('download-url');

var startRecording = document.getElementById('start-recording');
var stopRecording = document.getElementById('stop-recording');

startRecording.onclick = function() {
startRecording.disabled = true;
stopRecording.disabled = false;

captureUserMedia(function(stream) {
window.audioVideoRecorder = window.RecordRTC(stream, {
type: 'video' // don't forget this; otherwise you'll get video/webm instead of audio/ogg
});
window.audioVideoRecorder.startRecording();
});
};

stopRecording.onclick = function() {
stopRecording.disabled = true;
startRecording.disabled = false;

window.audioVideoRecorder.stopRecording(function(url) {
downloadURL.innerHTML = '<a href="' + url + '" download="RecordRTC.webm" target="_blank">Save RecordRTC.webm to Disk!</a>';
video.src = url;
video.muted = false;
video.play();

video.onended = function() {
video.pause();

// dirty workaround for: "firefox seems unable to playback"
video.src = URL.createObjectURL(audioVideoRecorder.getBlob());
};
});
};

function captureUserMedia(callback) {
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({ audio: true, video: true }, function(stream) {
video.src = URL.createObjectURL(stream);
video.muted = true;
video.controls = true;
video.play();

callback(stream);
}, function(error) { console.error(error); });
}

</script>

<section class="experiment">
<h2 class="header">Firefox and RecordRTC...</h2>
<ol>
<li>
Individual audio recordings in ogg container (Firefox &gt;= 26)
</li>
<li>
Audio+Video in single WebM/mp4 container (Firefox &gt;= 29)
</li>
<li>
Gif recording (Firefox &gt;= 18)
</li>
</ol>
</section>

<section class="experiment">
<h2 class="header">Using RecordRTC...</h2>
<ol>
<li>
You can record both audio/video in single webm file. It works only on Firefox!
</li>
<li>
For chrome; you can record audio as WAV and video as WebM or animated Gif.
</li>
</ol>
</section>

<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left: 1em;">Enter your email too; if you want "direct" reply!</small>
</section>

<section class="experiment">
<p style="margin-top: 0;">
RecordRTC is MIT licensed on Github! <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" target="_blank">Documentation</a>
</p>
</section>

<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a></h2>
<div id="github-commits"></div>
</section>
</article>

<a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" class="fork-left"></a>

<footer>
<p>
<a href="https://www.webrtc-experiment.com/">WebRTC Experiments</a>
&copy; <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
</p>
</footer>

<!-- commits.js is useless for you! -->
<script src="//cdn.webrtc-experiment.com/commits.js" async> </script>
</body>
</html>
45 changes: 45 additions & 0 deletions Canvas-Recording/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
## HTML2Canvas & RecordRTC / [Demo](https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/)

This [WebRTC](https://www.webrtc-experiment.com/) experiment is using [RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) to record HTML/Canvas into webm; where [html2canvas.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing) 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"!

<a href="https://www.webrtc-experiment.com/getMediaElement/">
<img src="https://lh5.googleusercontent.com/-mZGcj67_NTE/UtY2vw9bljI/AAAAAAAAAl0/T6lvI68bfb8/s0-I/RecordRTC-Canvas-Recording.gif" />
</a>

=

```html
<script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="//www.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'
});
recorder.startRecording();
recorder.stopRecording(function(url) {
window.open(url);
});
</script>
```

=

[RecordRTC](https://www.webrtc-experiment.com/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](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs)
2. [RecordRTC to PHP](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP)
3. [RecordRTC to ASP.NET MVC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-ASPNETMVC)
4. [RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/Canvas-Recording)
5. [MRecordRTC i.e. Multi-RecordRTC!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC)
6. [RecordRTC on Ruby!](https://github.com/cbetta/record-rtc-experiment)
7. [RecordRTC over Socket.io](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-over-Socketio)

=

## License

[RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
119 changes: 119 additions & 0 deletions Canvas-Recording/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<title>RecordRTC Canvas/HTML Recorder</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">
<style>
body {overflow-x:hidden;background: rgb(233, 233, 233);}
#elementToShare {
background: rgb(233, 233, 233);
font-size: 2em;
height: 100%;
left: 0;
padding: 0 1em;
position: absolute;
top: 0;
width: 100%;
}

input, textarea {
border: 1px solid red;
font-size: 1em;
outline: none;
padding: .3em .8em;
}

button, input[type=button] {
-moz-border-radius: 3px;
-moz-transition: none;
-webkit-transition: none;
background: #0370ea;
background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
border: 1px solid #076bd2;
border-radius: 3px;
color: #fff;
display: inline-block;
font-family: inherit;
font-size: .8em;
font-size: 1.5em;
line-height: 1.3;
padding: 5px 12px;
text-align: center;
text-shadow: 1px 1px 1px #076bd2;
}

button:hover, input[type=button]:hover { background: rgb(9, 147, 240); }

button:active, input[type=button]:active { background: rgb(10, 118, 190); }

button[disabled], input[type=button][disabled] {
background: none;
border: 1px solid rgb(187, 181, 181);
color: gray;
text-shadow: none;
}
a {
color: #2844FA;
cursor: pointer;
text-decoration: none;
}
a:hover, a:focus { color: #1B29A4; }
a:active { color: #000; }
</style>

<div id="elementToShare" contenteditable style="margin-top: 3px;">
<h2>Welcome to <a href="https://www.webrtc-experiment.com/RecordRTC/" contenteditable="false">RecordRTC</a> Canvas/HTML Recorder!</h2>
<h3>Content is edit-able.</h3>
<input type="text" value="Type Text!" />
<br />
<textarea>resize textarea</textarea>
<br />

<pre>
var recorder = RecordRTC(elementToShare, {
type: 'canvas'
});
recorder.startRecording();
recorder.stopRecording(function(url) {
window.open(url);
});
</pre>
</div>

<div style="position: fixed;left: 20%;right: 20%;text-align: center;">
<button id="start" contenteditable="false">Start Canvas Recording</button>
<button id="stop" disabled contenteditable="false">Stop</button>
</div>

<script src="https://www.webrtc-experiment.com/screenshot.js"> </script>
<script src="https://www.webrtc-experiment.com/RecordRTC.js"> </script>

<script>
var elementToShare = document.getElementById('elementToShare');
var recorder = RecordRTC(elementToShare, {
type: 'canvas'
});

document.getElementById('start').onclick = function() {
recorder.startRecording();

document.getElementById('start').disabled = true;
setTimeout(function() {
document.getElementById('stop').disabled = false;
}, 1000);
};
document.getElementById('stop').onclick = function() {
this.disabled = true;
recorder.stopRecording(function(url) {
var video = document.createElement('video');
video.src = url;
video.setAttribute('style', 'height: 100%; position: absolute; top:0;');
document.body.appendChild(video);
video.controls = true;
video.play();
});
};
</script>
<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←WebRTC Experiments Homepage</a>
Loading

0 comments on commit 5febc11

Please sign in to comment.