simulcast

Example of how to have Pion handle incoming track with multiple simulcast rtp streams and show all them back.

HTML

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
Browser base64 Session Description<br />
<textarea id="localSessionDescription" readonly="true"></textarea> <br />
<button onclick="window.copySDP()">
  Copy browser SDP to clipboard
</button>
<br />
<br />

Golang base64 Session Description<br />
<textarea id="remoteSessionDescription"></textarea> <br />
<button onclick="window.startSession()"> Start Session </button><br />

<br />

<div>
  Browser stream<br />
  <video id="browserVideo" width="200" height="200" autoplay muted></video>
</div>

<div id="serverVideos">
  Video from server<br />
</div>

CSS

textarea {
    width: 500px;
    min-height: 75px;
}

JavaScript

// Create peer conn
const pc = new RTCPeerConnection({
  iceServers: [
    {
      urls: "stun:stun.l.google.com:19302",
    },
  ],
});

pc.oniceconnectionstatechange = (e) => {
  console.log("connection state change", pc.iceConnectionState);
};
pc.onicecandidate = (event) => {
  if (event.candidate === null) {
    document.getElementById("localSessionDescription").value = btoa(
      JSON.stringify(pc.localDescription)
    );
  }
};

pc.onnegotiationneeded = (e) =>
  pc
    .createOffer()
    .then((d) => pc.setLocalDescription(d))
    .catch(console.error);

pc.ontrack = (event) => {
  console.log("Got track event", event);
  let video = document.createElement("video");
  video.srcObject = event.streams[0];
  video.autoplay = true;
  video.width = "500";
  let label = document.createElement("div");
  label.textContent = event.streams[0].id;
  document.getElementById("serverVideos").appendChild(label);
  document.getElementById("serverVideos").appendChild(video);
};

navigator.mediaDevices
  .getUserMedia({
    video: {
      width: {
        ideal: 4096,
      },
      height: {
        ideal: 2160,
      },
      frameRate: {
        ideal: 60,
        min: 10,
      },
    },
    audio: false,
  })
  .then((stream) => {
    document.getElementById("browserVideo").srcObject = stream;
    pc.addTransceiver(stream.getVideoTracks()[0], {
      direction: "sendonly",
      streams: [stream],
      sendEncodings: [
        // for firefox order matters... first high resolution, then scaled resolutions...
        {
          rid: "f",
        },
        {
          rid: "h",
          scaleResolutionDownBy: 2.0,
        },
        {
          rid: "q",
          scaleResolutionDownBy: 4.0,
        },
      ],
    });
    pc.addTransceiver("video");
    pc.addTransceiver("video");
    pc.addTransceiver("video");
  });

window.startSession = () => {
  const sd = document.getElementById("remoteSessionDescription").value;
  if (sd === "") {
    return alert("Session...