close.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title></title>
  7. <link rel="stylesheet" href="../style.css" />
  8. </head>
  9. <body>
  10. <h1>MediaChannel</h1>
  11. <canvas id="sender-stream" width="200" height="100"></canvas>
  12. <video id="receiver-stream" autoplay></video>
  13. <script>
  14. const canvas = document.getElementById("sender-stream");
  15. const ctx = canvas.getContext("2d");
  16. // Set the canvas background color to white
  17. ctx.fillStyle = "white";
  18. ctx.fillRect(0, 0, canvas.width, canvas.height);
  19. // Draw the text "Alice" in black
  20. ctx.font = "30px sans-serif";
  21. ctx.fillStyle = "black";
  22. ctx.fillText(window.location.hash.substring(1), 50, 50);
  23. </script>
  24. <div id="inputs">
  25. <input type="text" id="receiver-id" placeholder="Receiver ID" />
  26. <button id="call-btn" disabled>Call</button>
  27. <button id="close-btn">Hang up</button>
  28. </div>
  29. <div id="messages"></div>
  30. <div id="result"></div>
  31. <div id="error-message"></div>
  32. <video></video>
  33. <script src="/dist/peerjs.js"></script>
  34. <script src="close.js" type="application/javascript"></script>
  35. </body>
  36. </html>