Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 263 lines (206 sloc) 10 KB
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<title>Audio/Video/Screen sharing and recording using RTCMultiConnection</title>
<meta name="description" content="Audio/Video/Screen sharing and recording using RTCMultiConnection" />
<meta name="keywords" content="Audio Recording, Video Recording, Screen Recording, RTCMultiConnection" />
<style>
video {
width: 45%;
}
button {
padding: 4px 12px;
margin: 5px 10px;
}
hr {
border: 0;
border-top: 1px solid rgb(189, 189, 189);
}
</style>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Audio/Video/Screen sharing and recording using
<a href="https://github.com/muaz-khan/RTCMultiConnection">RTCMultiConnection</a>
/ <a href="https://github.com/muaz-khan/RTCMultiConnection/tree/master/v2.2.2/demos/audio-video-screen-sharing-recording.html">Source Code</a>
</h1>
<p>
<a href="https://rtcmulticonnection.herokuapp.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/RTCMultiConnection/issues?state=open" target="_blank">Latest issues</a> .
<a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section class="experiment">
<div style="text-align:center;">
<button id="openRoom">Open Room</button>
<button id="joinRoom">Join Room</button>
<hr>
<button id="shareScreen" disabled>Share Screen</button>
<hr>
<button id="recordAudioVideo" disabled>Record Audio+Video+Screen</button>
</div>
<hr>
<h2 style="border:0;padding-left:10px;">Recorded Videos</h2><br>
<div id="recorded-videos"></div>
<hr>
<h2 style="border:0;padding-left:10px;">Live Videos</h2><br>
<div id="videos-container"></div>
<br><br>
</section>
<script src="https://www.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script>
// http://www.rtcmulticonnection.org/docs/constructor/
var rmc = new RTCMultiConnection();
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
rmc.openSignalingChannel = function(config) {
var channel = config.channel || rmc.channel || 'default-namespace';
var sender = Math.round(Math.random() * 9999999999) + 9999999999;
io.connect(SIGNALING_SERVER).emit('new-channel', {
channel: channel,
sender: sender
});
var socket = io.connect(SIGNALING_SERVER + channel);
socket.channel = channel;
socket.on('connect', function() {
if (config.callback) config.callback(socket);
});
socket.send = function(message) {
socket.emit('message', {
sender: sender,
data: message
});
};
socket.on('message', config.onmessage);
};
rmc.body = document.getElementById('videos-container');
// http://www.rtcmulticonnection.org/docs/#getExternalIceServers
rmc.getExternalIceServers = false;
document.getElementById('openRoom').onclick = function() {
this.disabled = true;
// http://www.rtcmulticonnection.org/docs/open/
rmc.open();
};
document.getElementById('joinRoom').onclick = function() {
this.disabled = true;
// http://www.rtcmulticonnection.org/docs/connect/
rmc.connect();
};
window.onbeforeunload = function() {
// Firefox
document.getElementById('openRoom').disabled = false;
document.getElementById('joinRoom').disabled = false;
};
rmc.onMediaCaptured = function() {
document.getElementById('openRoom').disabled = true;
document.getElementById('joinRoom').disabled = true;
};
rmc.onstream = function(event) {
rmc.body.appendChild(event.mediaElement);
if(event.type === 'remote' && !recorders.length) {
document.getElementById('shareScreen').disabled = false;
document.getElementById('recordAudioVideo').disabled = false;
}
};
document.getElementById('shareScreen').onclick = function() {
this.disabled = true;
// http://www.rtcmulticonnection.org/docs/addStream/
rmc.addStream({
screen: true,
oneway: true
});
};
var recorders = [];
document.getElementById('recordAudioVideo').onclick = function() {
var streams = rmc.streams.selectAll({
local: true
});
streams = streams.concat(rmc.streams.selectAll({
remote: true
}));
var button = this;
if (button.innerHTML == 'Record Audio+Video+Screen') {
button.disabled = true;
streams.forEach(function(streamEvent) {
var recorder = RecordRTC(streamEvent.stream, {
type: 'video'
});
recorder.startRecording();
recorders.push(recorder);
});
setTimeout(function() {
button.innerHTML = 'Stop Recording Audio/Video';
button.disabled = false;
}, 3000);
} else if (button.innerHTML == 'Stop Recording Audio/Video') {
recorders.forEach(function(recorder) {
recorder.stopRecording(function() {
appendRecordedVideo(recorder.blob);
});
});
recorders = [];
button.innerHTML = 'Record Audio+Video+Screen';
}
};
var recordedVideos = document.getElementById('recorded-videos');
function appendRecordedVideo(blob) {
if(blob.video) {
blob = blob.video;
}
var video = document.createElement('video');
video.controls = true;
video.src = URL.createObjectURL(blob);
recordedVideos.appendChild(video);
}
</script>
<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/RTCMultiConnection/commits/master">Latest Updates</a></h2>
<div id="github-commits"></div>
</section>
<section class="experiment own-widgets">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/issues">Latest Issues</a></h2>
<div id="github-issues"></div>
</section>
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" 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>
<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
<script>
window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</article>
<footer>
<p>
<a href="https://www.webrtc-experiment.com">WebRTC Experiments</a> © <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>
<a href="https://github.com/muaz-khan" target="_blank">Github</a>
</p>
</footer>
</body>
</html>