Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 186 lines (155 sloc) 5.12 KB
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<title>RTCMultiConnection.sharePartOfScreen</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>
<img id="preview-image" style="position: absolute; top:0; left: 0;z-index:1000;">
<div id="elementToShare" contenteditable style="margin-top: 3px;">
<h2>Welcome to <a href="http://www.rtcmulticonnection.org/" contenteditable="false">RTCMultiConnection</a>.sharePartOfScreen!</h2>
<h3>Content is edit-able.</h3>
<input type="text" value="Type Text!" />
<br />
<textarea>resize textarea</textarea>
<br />
<pre>
document.getElementById('share-part-of-screen').onclick = function () { connection.sharePartOfScreen({ element: '#share-me', interval: 500 }); }; var image = document.getElementById('preview-image'); connection.onpartofscreen = function (event) { image.src = event.screenshot; };
</pre>
</div>
<div style="position: fixed;left: 20%;right: 20%;text-align: center;">
<button id="open-room">Open Room</button>
<button id="share-part-of-screen" disabled>Share Part Of Screen</button>
</div>
<script src="https://cdn.webrtc-experiment.com/screenshot.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>
var connection = new RTCMultiConnection();
// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
var channel = config.channel || connection.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);
};
connection.session = {
data: true
};
connection.onopen = function() {
document.getElementById('share-part-of-screen').disabled = false;
};
document.getElementById('share-part-of-screen').onclick = function() {
this.disabled = true;
connection.sharePartOfScreen({
element: '#elementToShare',
interval: 500
});
};
var image = document.getElementById('preview-image');
connection.onpartofscreen = function(event) {
this.disabled = true;
image.src = event.screenshot;
console.log(event.screenshot);
};
connection.connect();
document.getElementById('open-room').onclick = function() {
this.disabled = true;
connection.open();
};
</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>