PageRenderTime 68ms CodeModel.GetById 13ms RepoModel.GetById 1ms app.codeStats 0ms

/v2.2.2/demos/one-to-one-filesharing.html

https://gitlab.com/oytunistrator/RTCMultiConnection
HTML | 129 lines | 103 code | 19 blank | 7 comment | 0 complexity | 380b679a120fea8183cec96c03573188 MD5 | raw file
  1. <!--
  2. > Muaz Khan - github.com/muaz-khan
  3. > MIT License - www.webrtc-experiment.com/licence
  4. > Documentation - www.RTCMultiConnection.org
  5. -->
  6. <!DOCTYPE html>
  7. <html id="home" lang="en">
  8. <head>
  9. <title>One-to-One File Sharing using RTCMultiConnection ® Muaz Khan</title>
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <meta charset="utf-8">
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  13. <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
  14. <meta name="author" content="Muaz Khan">
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16. <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
  17. <!-- for HTML5 el styling -->
  18. <script>
  19. document.createElement('article');
  20. document.createElement('footer');
  21. </script>
  22. <script src="//cdn.webrtc-experiment.com/firebase.js">
  23. </script>
  24. <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
  25. </script>
  26. </head>
  27. <body>
  28. <article>
  29. <h1>One-to-One File Sharing using <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
  30. </h1>
  31. <p>
  32. <a href="https://www.webrtc-experiment.com/">HOME</a>
  33. <span> &copy; </span>
  34. <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
  35. <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
  36. <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
  37. <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
  38. <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
  39. </p>
  40. <section>
  41. <h2>Open Data Channel</h2>
  42. <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">
  43. <button id="init-RTCMultiConnection">Open</button>
  44. <h2>or join:</h2>
  45. <button id="join-RTCMultiConnection">Join</button>
  46. </section>
  47. <table style="border-left: 1px solid black; width: 100%;">
  48. <tr>
  49. <td style="background: white; border-right: 1px solid black;">
  50. <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
  51. <input type="file" id="file" disabled>
  52. <div id="file-progress"></div>
  53. </td>
  54. </tr>
  55. </table>
  56. <script>
  57. document.getElementById('channel').value = (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
  58. var connection = new RTCMultiConnection();
  59. // file progress-bars container
  60. connection.body = document.querySelector('#file-progress');
  61. connection.session = {
  62. data: true
  63. };
  64. // connection.maxParticipantsAllowed = 1;
  65. connection.direction = 'one-to-one';
  66. document.getElementById('init-RTCMultiConnection').onclick = function() {
  67. connection.open(document.getElementById('channel').value || 'channel');
  68. document.getElementById('join-RTCMultiConnection').disabled = true;
  69. document.getElementById('init-RTCMultiConnection').disabled = true;
  70. };
  71. document.getElementById('join-RTCMultiConnection').onclick = function() {
  72. connection.connect(document.getElementById('channel').value || 'channel');
  73. document.getElementById('join-RTCMultiConnection').disabled = true;
  74. document.getElementById('init-RTCMultiConnection').disabled = true;
  75. };
  76. document.getElementById('file').onchange = function() {
  77. var file = this.files[0];
  78. connection.send(file);
  79. };
  80. connection.onopen = function() {
  81. document.getElementById('file').disabled = false;
  82. };
  83. </script>
  84. <br/>
  85. <br/>
  86. <h2>
  87. <a href="http://www.rtcmulticonnection.org/docs/" target="_blank">RTCMultiConnection Documentation!</a>
  88. </h2>
  89. <br/>
  90. <br/>
  91. <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
  92. <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
  93. <div>
  94. <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>
  95. </div>
  96. <button id="send-message" style="font-size: 1em;">Send Message</button>
  97. </section>
  98. </article>
  99. <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
  100. <footer>
  101. <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
  102. <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
  103. <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
  104. <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
  105. </footer>
  106. <!-- commits.js is useless for you! -->
  107. <script src="//cdn.webrtc-experiment.com/commits.js" async>
  108. </script>
  109. </body>
  110. </html>