index.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>libdatachannel media example</title>
  6. <style>
  7. button {
  8. padding: 8px 16px;
  9. }
  10. pre {
  11. overflow-x: hidden;
  12. overflow-y: auto;
  13. }
  14. video {
  15. width: 100%;
  16. }
  17. .option {
  18. margin-bottom: 8px;
  19. }
  20. #media {
  21. max-width: 1280px;
  22. }
  23. </style>
  24. <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  25. </head>
  26. <body>
  27. <h1>libdatachannel streamer example client</h1>
  28. <h2>Options</h2>
  29. <div class="option">
  30. <input id="use-stun" type="checkbox"/>
  31. <label for="use-stun">Use STUN server</label>
  32. </div>
  33. <button id="start" onclick="start()" disabled>Start</button>
  34. <button id="stop" style="display: none" onclick="stop()">Stop</button>
  35. <h2>State</h2>
  36. <p>ICE Connection state: <span id="ice-connection-state"></span></p>
  37. <p>ICE Gathering state: <span id="ice-gathering-state"></span></p>
  38. <p>Signaling state: <span id="signaling-state"></span></p>
  39. <div id="media" style="display: none">
  40. <h2>Media</h2>
  41. <video id="video" autoplay playsinline></video>
  42. </div>
  43. <h2>Data Channel</h2>
  44. <pre id="data-channel" style="height: 200px;"></pre>
  45. <h2>SDP</h2>
  46. <h3>Offer</h3>
  47. <pre id="offer-sdp"></pre>
  48. <h3>Answer</h3>
  49. <pre id="answer-sdp"></pre>
  50. <script src="client.js"></script>
  51. </body>
  52. </html>