index.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <html>
  2. <!--
  3. SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
  4. SPDX-License-Identifier: MIT
  5. -->
  6. <head>
  7. <title>play-from-disk-renegotiation</title>
  8. </head>
  9. <body>
  10. <button onclick="window.addVideo()"> Add Video </button><br />
  11. <button onclick="window.removeVideo()"> Remove Video </button><br />
  12. <h3> Video </h3>
  13. <div id="remoteVideos"></div> <br />
  14. <h3> Logs </h3>
  15. <div id="logs"></div>
  16. </body>
  17. <script>
  18. let activeVideos = 0
  19. let pc = new RTCPeerConnection({
  20. iceServers: [
  21. {
  22. urls: 'stun:stun.l.google.com:19302'
  23. }
  24. ]
  25. })
  26. pc.ontrack = function (event) {
  27. var el = document.createElement(event.track.kind)
  28. el.srcObject = event.streams[0]
  29. el.autoplay = true
  30. el.controls = true
  31. event.track.onmute = function(event) {
  32. el.parentNode.removeChild(el);
  33. }
  34. document.getElementById('remoteVideos').appendChild(el)
  35. }
  36. let doSignaling = method => {
  37. pc.createOffer()
  38. .then(offer => {
  39. pc.setLocalDescription(offer)
  40. return fetch(`/${method}`, {
  41. method: 'post',
  42. headers: {
  43. 'Accept': 'application/json, text/plain, */*',
  44. 'Content-Type': 'application/json'
  45. },
  46. body: JSON.stringify(offer)
  47. })
  48. })
  49. .then(res => res.json())
  50. .then(res => pc.setRemoteDescription(res))
  51. .catch(alert)
  52. }
  53. // Create a noop DataChannel. By default PeerConnections do not connect
  54. // if they have no media tracks or DataChannels
  55. pc.createDataChannel('noop')
  56. doSignaling('createPeerConnection')
  57. window.addVideo = () => {
  58. if (pc.getTransceivers().length <= activeVideos) {
  59. pc.addTransceiver('video')
  60. activeVideos++
  61. }
  62. doSignaling('addVideo')
  63. };
  64. window.removeVideo = () => {
  65. doSignaling('removeVideo')
  66. };
  67. </script>
  68. </html>