upstream-pion-webrtc/examples/whip-whep/index.html

<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>