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

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 Description must not be empty')
  }

  try {
    console.log("answer", JSON.parse(atob(sd)))
    pc.setRemoteDescription(new...