/
one-to-one-filesharing.html
executable file
·129 lines (110 loc) · 5.45 KB
/
one-to-one-filesharing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!--
> Muaz Khan - github.com/muaz-khan
> MIT License - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<title>One-to-One File Sharing using 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="//cdn.webrtc-experiment.com/style.css">
<!-- for HTML5 el styling -->
<script>
document.createElement('article');
document.createElement('footer');
</script>
<script src="//cdn.webrtc-experiment.com/firebase.js">
</script>
<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
</script>
</head>
<body>
<article>
<h1>One-to-One File Sharing using <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
</h1>
<p>
<a href="https://www.webrtc-experiment.com/">HOME</a>
<span> © </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>
<section>
<h2>Open Data Channel</h2>
<input type="text" id="channel" value="channel" style="font-size: 1.1em; text-align: right; width: 8em;" title="channel name - use your own channel name">
<button id="init-RTCMultiConnection">Open</button>
<h2>or join:</h2>
<button id="join-RTCMultiConnection">Join</button>
</section>
<table style="border-left: 1px solid black; width: 100%;">
<tr>
<td style="background: white; border-right: 1px solid black;">
<h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
<input type="file" id="file" disabled>
<div id="file-progress"></div>
</td>
</tr>
</table>
<script>
document.getElementById('channel').value = (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
var connection = new RTCMultiConnection();
// file progress-bars container
connection.body = document.querySelector('#file-progress');
connection.session = {
data: true
};
// connection.maxParticipantsAllowed = 1;
connection.direction = 'one-to-one';
document.getElementById('init-RTCMultiConnection').onclick = function() {
connection.open(document.getElementById('channel').value || 'channel');
document.getElementById('join-RTCMultiConnection').disabled = true;
document.getElementById('init-RTCMultiConnection').disabled = true;
};
document.getElementById('join-RTCMultiConnection').onclick = function() {
connection.connect(document.getElementById('channel').value || 'channel');
document.getElementById('join-RTCMultiConnection').disabled = true;
document.getElementById('init-RTCMultiConnection').disabled = true;
};
document.getElementById('file').onchange = function() {
var file = this.files[0];
connection.send(file);
};
connection.onopen = function() {
document.getElementById('file').disabled = false;
};
</script>
<br/>
<br/>
<h2>
<a href="http://www.rtcmulticonnection.org/docs/" target="_blank">RTCMultiConnection Documentation!</a>
</h2>
<br/>
<br/>
<section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
<h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">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>
</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>
<!-- commits.js is useless for you! -->
<script src="//cdn.webrtc-experiment.com/commits.js" async>
</script>
</body>
</html>