snapshot of https://github.com/pion/webrtc.git (main, 2026-09-15; blobs > 131072B omitted)

examples/whip-whep/index.html

@@ -0,0 +1,87 @@
+<html>
+
+  <!--
+		SPDX-FileCopyrightText: 2026 The Pion community <https://pion.ly>
+		SPDX-License-Identifier: MIT
+	-->
+  <head>
+    <title>whip-whep</title>
+  </head>
+
+  <body>
+    <button onclick="window.doWHIP()">Publish</button>
+    <button onclick="window.doWHEP()">Subscribe</button>
+    <h3> Video </h3>
+    <video id="videoPlayer" autoplay muted controls style="width: 500"> </video>
+
+
+    <h3> ICE Connection States </h3>
+    <div id="iceConnectionStates"></div> <br />
+  </body>
+
+  <script>
+    let peerConnection = new RTCPeerConnection()
+
+    peerConnection.oniceconnectionstatechange = () => {
+      let el = document.createElement('p')
+      el.appendChild(document.createTextNode(peerConnection.iceConnectionState))
+
+      document.getElementById('iceConnectionStates').appendChild(el);
+    }
+
+    window.doWHEP = () => {
+      peerConnection.addTransceiver('video', { direction: 'recvonly' })
+      peerConnection.addTransceiver('audio', { direction: 'recvonly' })
+
+      peerConnection.ontrack = function (event) {
+        document.getElementById('videoPlayer').srcObject = event.streams[0]
+      }
+
+      peerConnection.createOffer().then(offer => {
+        peerConnection.setLocalDescription(offer)
+
+        fetch(`/whep`, {
+          method: 'POST',
+          body: offer.sdp,
+          headers: {
+            Authorization: `Bearer none`,
+            'Content-Type': 'application/sdp'
+          }
+        }).then(r => r.text())
+          .then(answer => {
+            peerConnection.setRemoteDescription({
+              sdp: answer,
+              type: 'answer'
+            })
+          })
+      })
+    }
+
+    window.doWHIP = () => {
+      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+        .then(stream => {
+          document.getElementById('videoPlayer').srcObject = stream
+          stream.getTracks().forEach(track => peerConnection.addTrack(track, stream))
+
+          peerConnection.createOffer().then(offer => {
+            peerConnection.setLocalDescription(offer)
+
+            fetch(`/whip`, {
+              method: 'POST',
+              body: offer.sdp,
+              headers: {
+                Authorization: `Bearer none`,
+                'Content-Type': 'application/sdp'
+              }
+            }).then(r => r.text())
+              .then(answer => {
+                peerConnection.setRemoteDescription({
+                  sdp: answer,
+                  type: 'answer'
+                })
+              })
+          })
+      })
+    }
+  </script>
+</html>