Permalink
87e4e6e Jan 29, 2016
executable file 420 lines (364 sloc) 15.9 KB
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>RecordRTC & RTCMultiConnection ® 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="https://cdn.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: 20%;
}
.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;
}
.video-container {
background: white;
border: 2px solid black;
border-radius: 0.2em;
display: inline-block;
margin: 2em .2em;
padding: .1em;
vertical-align: top;
}
.video-container h2 {
border: 0;
border-top: 1px solid black;
display: block;
margin: 0;
text-align: center;
}
.video-container button {
font-size: .8em;
position: absolute;
z-index: 1;
}
</style>
<script>
document.createElement('article');
document.createElement('footer');
</script>
<!-- scripts used for broadcasting -->
<script src="https://cdn.webrtc-experiment.com/firebase.js">
</script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js">
</script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js">
</script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
<a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC" target="_blank">RecordRTC</a> &
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a> ® <a href="http://www.muazkhan.com/" target="_blank">Muaz Khan</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>
<!-- just copy this <section> and next script -->
<section class="experiment">
<section>
<span>
Private ??
<a href="" target="_blank" title="Open this link in new tab. Then your room will be private!">
<code>
<strong id="unique-token">#123456789</strong>
</code>
</a>
</span>
<input type="text" id="conference-name">
<button id="setup-new-conference" class="setup">Setup New Conference</button>
<button id="leave-conference" class="setup" style="margin-left: 13em;" disabled>Leave</button>
</section>
<!-- list of all available broadcasting rooms -->
<table style="width: 100%;" id="rooms-list"></table>
<!-- local/remote videos container -->
<div id="videos-container"></div>
</section>
<script>
// Muaz Khan - https://github.com/muaz-khan
// MIT License - https://www.webrtc-experiment.com/licence/
// RecordRTC - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
// RTCMultiConnection - http://www.RTCMultiConnection.org/docs/
var connection = new RTCMultiConnection();
connection.session = {
audio: true,
video: true
};
connection.onstream = function(e) {
appendVideo(e.mediaElement, e.streamid);
};
function appendVideo(video, streamid) {
video.width = 600;
video = getVideo(video, streamid);
videosContainer.insertBefore(video, videosContainer.firstChild);
rotateVideo(video);
scaleVideos();
document.getElementById('leave-conference').disabled = false;
}
function getVideo(video, streamid) {
var div = document.createElement('div');
div.className = 'video-container';
var button = document.createElement('button');
button.id = streamid;
button.innerHTML = 'Start Recording';
button.onclick = function() {
this.disabled = true;
if (this.innerHTML == 'Start Recording') {
this.innerHTML = 'Stop Recording';
connection.streams[this.id].startRecording({
audio: true,
video: true
});
} else {
this.innerHTML = 'Start Recording';
var stream = connection.streams[this.id];
stream.stopRecording(function(blob) {
var h2;
if (blob.audio && !(connection.UA.Chrome && stream.type == 'remote')) {
h2 = document.createElement('h2');
h2.innerHTML = '<a href="' + URL.createObjectURL(blob.audio) + '" target="_blank">Open recorded ' + blob.audio.type + '</a>';
div.appendChild(h2);
}
if (blob.video) {
h2 = document.createElement('h2');
h2.innerHTML = '<a href="' + URL.createObjectURL(blob.video) + '" target="_blank">Open recorded ' + blob.video.type + '</a>';
div.appendChild(h2);
}
});
}
setTimeout(function() {
button.disabled = false;
}, 3000);
};
div.appendChild(button);
div.appendChild(video);
return div;
}
function rotateVideo(mediaElement) {
mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(0deg)';
setTimeout(function() {
mediaElement.style[navigator.mozGetUserMedia ? 'transform' : '-webkit-transform'] = 'rotate(360deg)';
}, 1000);
}
connection.onstreamended = function(e) {
var div = e.mediaElement.parentNode;
div.style.opacity = 0;
rotateVideo(div);
setTimeout(function() {
if (div.parentNode) {
div.parentNode.removeChild(div);
}
scaleVideos();
}, 1000);
};
var sessions = {};
connection.onNewSession = function(session) {
if (sessions[session.sessionid]) return;
sessions[session.sessionid] = session;
var tr = document.createElement('tr');
tr.innerHTML = '<td><strong>' + session.extra['session-name'] + '</strong> is running a conference!</td>' +
'<td><button class="join">Join</button></td>';
roomsList.insertBefore(tr, roomsList.firstChild);
var joinRoomButton = tr.querySelector('.join');
joinRoomButton.setAttribute('data-sessionid', session.sessionid);
joinRoomButton.onclick = function() {
this.disabled = true;
var sessionid = this.getAttribute('data-sessionid');
session = sessions[sessionid];
if (!session) throw 'No such session exists.';
connection.join(session);
};
};
var videosContainer = document.getElementById('videos-container') || document.body;
var roomsList = document.getElementById('rooms-list');
document.getElementById('setup-new-conference').onclick = function() {
connection.sessionid = (Math.random() * 999999999999).toString().replace('.', '');
this.disabled = true;
connection.extra = {
'session-name': document.getElementById('conference-name').value || 'Anonymous'
};
connection.open();
};
document.getElementById('leave-conference').onclick = function() {
this.disabled = true;
connection.close();
};
// setup signaling to search existing sessions
connection.connect();
(function() {
var uniqueToken = document.getElementById('unique-token');
if (uniqueToken)
if (location.hash.length > 2) uniqueToken.parentNode.parentNode.parentNode.innerHTML = '<h2 style="text-align:center;"><a href="' + location.href + '" target="_blank">Share this link</a></h2>';
else uniqueToken.innerHTML = uniqueToken.parentNode.parentNode.href = '#' + (Math.random() * new Date().getTime()).toString(36).toUpperCase().replace(/\./g, '-');
})();
function scaleVideos() {
var videos = document.querySelectorAll('video'),
length = videos.length,
video;
var minus = 130;
var windowHeight = 700;
var windowWidth = 600;
var windowAspectRatio = windowWidth / windowHeight;
var videoAspectRatio = 4 / 3;
var blockAspectRatio;
var tempVideoWidth = 0;
var maxVideoWidth = 0;
for (var i = length; i > 0; i--) {
blockAspectRatio = i * videoAspectRatio / Math.ceil(length / i);
if (blockAspectRatio <= windowAspectRatio) {
tempVideoWidth = videoAspectRatio * windowHeight / Math.ceil(length / i);
} else {
tempVideoWidth = windowWidth / i;
}
if (tempVideoWidth > maxVideoWidth)
maxVideoWidth = tempVideoWidth;
}
for (var i = 0; i < length; i++) {
video = videos[i];
if (video)
video.width = maxVideoWidth - minus;
}
}
window.onresize = scaleVideos;
</script>
<section class="experiment">
<ol>
<li>You can record both local and remote audio+video streams in chrome >= 50</li>
<li>You can record video from both local and remote media streams (chrome,firefox,opera)</li>
<li>You can record audio from local stream (chrome,firefox,opera)</li>
<li>You can record "remote-audio" only on firefox</li>
<li>Many streams can be added; renegotiated; and recorded (simultaneously)!</li>
</ol>
</section>
<section class="experiment">
<h2 class="header">You can invoke audio/video recorder like this:</h2>
<pre>
connection.streams['stream-id'].<a href="http://www.rtcmulticonnection.org/docs/startRecording/">startRecording</a>({
audio: true,
video: true
});
</pre>
</section>
<section class="experiment">
<h2 class="header">You can skip argument:</h2>
<pre>
// to record both audio and video
connection.streams['stream-id'].<a href="http://www.rtcmulticonnection.org/docs/startRecording/">startRecording</a>();
</pre>
</section>
<section class="experiment">
<h2 class="header">Stop recording and get blob.</h2>
<ol>
<li>
A JavaScritp object is returned with audio/video blobs e.g. blob.audio or blob.video.
</li>
</ol>
<pre>
connection.streams['stream-id'].<a href="http://www.rtcmulticonnection.org/docs/stopRecording/">stopRecording</a>(function (blob) {
var mediaElement = document.createElement('audio');
mediaElement.src = URL.createObjectURL(blob.audio);
document.documentElement.appendChild(h2);
});
</pre>
</section>
<section class="experiment">
<h2 class="header">You can force to stop a specific stream:</h2>
<pre>
connection.streams['stream-id'].<a href="http://www.rtcmulticonnection.org/docs/stopRecording/">stopRecording</a>(onBlobs, {
audio: true // stop audio recorder and get audio blob
});
</pre>
</section>
<section class="experiment">
<h2 class="header">A simple working example:</h2>
<pre>
connection.onstream = function (e) {
// e.type == 'remote' || 'local'
connection.streams[e.streamid].<a href="http://www.rtcmulticonnection.org/docs/startRecording/">startRecording</a>({
video: true
});
// record 10 sec audio/video
var recordingInterval = 10 * 10000;
setTimeout(function () {
connection.streams[e.streamid].<a href="http://www.rtcmulticonnection.org/docs/stopRecording/">stopRecording</a>(function (blob) {
var mediaElement = document.createElement('video');
mediaElement.src = URL.createObjectURL(blob.video);
document.documentElement.appendChild(h2);
});
}, recordingInterval)
};
</pre>
</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 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/RTCMultiConnection" class="fork-left"></a>
<footer>
<a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
<a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
<a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
<a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
</footer>
<script>
window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>