PageRenderTime 66ms CodeModel.GetById 28ms 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. 

  2. > Muaz Khan     - github.com/muaz-khan 

    3. 

  3. > MIT License   - www.webrtc-experiment.com/licence

    4. 

  4. > Documentation - www.RTCMultiConnection.org

    5. 

  5. -->
    6. 

  6. 

  7. <!DOCTYPE html>
    8. 

  8. <html id="home" lang="en">
    9. 

  9. 

  10. <head>
    11. 

  11.     <title>One-to-One File Sharing using RTCMultiConnection ® Muaz Khan</title>
    12. 

  12.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    13. 

  13.     <meta charset="utf-8">
    14. 

  14.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    15. 

  15.     <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    16. 

  16.     <meta name="author" content="Muaz Khan">
    17. 

  17.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    18. 

  18.     <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
    19. 

  19.     <!-- for HTML5 el styling -->
    20. 

  20.     <script>
    21. 

  21.     document.createElement('article');
    22. 

  22.     document.createElement('footer');
    23. 

  23.     </script>
    24. 

  24. 

  25.     <script src="//cdn.webrtc-experiment.com/firebase.js">
    26. 

  26.     </script>
    27. 

  27.     <script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
    28. 

  28.     </script>
    29. 

  29. </head>
    30. 

  30. 

  31. <body>
    32. 

  32.     <article>
    33. 

  33.         <h1>One-to-One File Sharing using <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection</a>
    34. 

  34.         </h1>
    35. 

  35. 

  36.         <p>
    37. 

  37.             <a href="https://www.webrtc-experiment.com/">HOME</a>
    38. 

  38.             <span> &copy; </span>
    39. 

  39.             <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
    40. 

  40.             <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
    41. 

  41.             <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
    42. 

  42.             <a href="https://github.com/muaz-khan/WebRTC-Experiment/issues?state=open" target="_blank">Latest issues</a> .
    43. 

  43.             <a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">What's New?</a>
    44. 

  44.         </p>
    45. 

  45. 

  46.         <section>
    47. 

  47.             <h2>Open Data Channel</h2>
    48. 

  48.             <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">
    49. 

  49.             <button id="init-RTCMultiConnection">Open</button>
    50. 

  50.             <h2>or join:</h2>
    51. 

  51.             <button id="join-RTCMultiConnection">Join</button>
    52. 

  52.         </section>
    53. 

  53.         <table style="border-left: 1px solid black; width: 100%;">
    54. 

  54.             <tr>
    55. 

  55.                 <td style="background: white; border-right: 1px solid black;">
    56. 

  56.                     <h2 style="display: block; font-size: 1em; text-align: center;">Share Files</h2>
    57. 

  57.                     <input type="file" id="file" disabled>
    58. 

  58. 

  59.                     <div id="file-progress"></div>
    60. 

  60.                 </td>
    61. 

  61.             </tr>
    62. 

  62.         </table>
    63. 

  63.         <script>
    64. 

  64.         document.getElementById('channel').value = (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
    65. 

  65. 

  66.         var connection = new RTCMultiConnection();
    67. 

  67. 

  68.         // file progress-bars container
    69. 

  69.         connection.body = document.querySelector('#file-progress');
    70. 

  70. 

  71.         connection.session = {
    72. 

  72.             data: true
    73. 

  73.         };
    74. 

  74.         // connection.maxParticipantsAllowed = 1;
    75. 

  75.         connection.direction = 'one-to-one';
    76. 

  76. 

  77.         document.getElementById('init-RTCMultiConnection').onclick = function() {
    78. 

  78.             connection.open(document.getElementById('channel').value || 'channel');
    79. 

  79.             document.getElementById('join-RTCMultiConnection').disabled = true;
    80. 

  80.             document.getElementById('init-RTCMultiConnection').disabled = true;
    81. 

  81.         };
    82. 

  82. 

  83.         document.getElementById('join-RTCMultiConnection').onclick = function() {
    84. 

  84.             connection.connect(document.getElementById('channel').value || 'channel');
    85. 

  85.             document.getElementById('join-RTCMultiConnection').disabled = true;
    86. 

  86.             document.getElementById('init-RTCMultiConnection').disabled = true;
    87. 

  87.         };
    88. 

  88. 

  89.         document.getElementById('file').onchange = function() {
    90. 

  90.             var file = this.files[0];
    91. 

  91.             connection.send(file);
    92. 

  92.         };
    93. 

  93. 

  94.         connection.onopen = function() {
    95. 

  95.             document.getElementById('file').disabled = false;
    96. 

  96.         };
    97. 

  97.         </script>
    98. 

  98.         <br/>
    99. 

  99.         <br/>
    100. 

  100. 

  101.         <h2>
    102. 

  102.             <a href="http://www.rtcmulticonnection.org/docs/" target="_blank">RTCMultiConnection Documentation!</a>
    103. 

  103.         </h2>
    104. 

  104.         <br/>
    105. 

  105.         <br/>
    106. 

  106.         <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
    107. 

  107.             <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>
    108. 

  108. 

  109.             <div>
    110. 

  110.                 <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>
    111. 

  111.             </div>
    112. 

  112.             <button id="send-message" style="font-size: 1em;">Send Message</button>
    113. 

  113.         </section>
    114. 

  114.     </article>
    115. 

  115.     <a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
    116. 

  116. 

  117.     <footer>
    118. 

  118.         <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> and
    119. 

  119.         <a href="http://www.RTCMultiConnection.org/docs/" target="_blank">RTCMultiConnection.js</a> ©
    120. 

  120.         <a href="mailto:muazkh@gmail.com" target="_blank">Muaz Khan</a>:
    121. 

  121.         <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>
    122. 

  122.     </footer>
    123. 

  123. 

  124.     <!-- commits.js is useless for you! -->
    125. 

  125.     <script src="//cdn.webrtc-experiment.com/commits.js" async>
    126. 

  126.     </script>
    127. 

  127. </body>
    128. 

  128. 

  129. </html>
    130.