main.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>libdatachannel media sender example</title>
  6. </head>
  7. <body>
  8. <p>Please enter the offer provided to you by the sender application: </p>
  9. <textarea cols="80" rows="25"></textarea>
  10. <button>Submit</button>
  11. <video id="video-element" muted></video>
  12. <script>
  13. document.querySelector('button').addEventListener('click', async () => {
  14. const offer = JSON.parse(document.querySelector('textarea').value);
  15. const pc = new RTCPeerConnection({
  16. // Recommended for libdatachannel
  17. bundlePolicy: 'max-bundle',
  18. });
  19. pc.onicegatheringstatechange = (state) => {
  20. if (pc.iceGatheringState === 'complete') {
  21. // We only want to provide an answer once all of our candidates have been added to the SDP.
  22. const answer = pc.localDescription;
  23. document.querySelector('textarea').value = JSON.stringify({"type": answer.type, sdp: answer.sdp});
  24. document.querySelector('p').value = 'Please paste the answer in the sender application.';
  25. alert('Please paste the answer in the sender application.');
  26. }
  27. }
  28. pc.ontrack = (evt) => {
  29. const videoElement = document.getElementById('video-element');
  30. videoElement.srcObject = evt.streams[0];
  31. videoElement.play();
  32. };
  33. await pc.setRemoteDescription(offer);
  34. const answer = await pc.createAnswer();
  35. await pc.setLocalDescription(answer);
  36. })
  37. </script>
  38. </body>
  39. </html>