iosSafariVideoConstraintsIssue.html

<h2>Demonstrates iOS Safari <a href=https://bugs.webkit.org/show_bug.cgi?id=210393> issue 210393 </a> </h2>

<label for="videoConstraints">VideoConstraints:</label>
<input type="text" id="video_constraints" name="video_constraints" size="100" value='{"width":1920,"height":1080,"frameRate":24}'>
<br><br>
<button id="getUserMedia">Step 1: getUserMedia</button>
<br><br>
<video id="local_video" width="200" autoplay=true></video>
<br><br>
<label for="packetsSent">packetsSent:</label>
<input type="text" id="packetsSent" name="packetsSent" size="20" value=''>
<br><br>
<button id="negotiate">Step 2: negotiate</button>
<br><br>
<video id="remote_video" width="200" autoplay=true></video>
<br><br>
<label for="packetsReceived">packetsReceived:</label>
<input type="text" id="packetsReceived" name="packetsReceived" size="20" value=''>
<br><br>

<script>
function log(message) {
  console.log(message);
  const p = document.createElement('p');
  p.innerText = message;;
  document.body.appendChild(p);
}

async function waitForSometime(seconds) {
  seconds = seconds || 0;
  return new Promise(resolve => setTimeout(resolve, seconds * 1000));
}

async function monitorPackets(localPC, remotePC) {
  const localStats = await localPC.getStats();
  const remoteStats = await remotePC.getStats();
  const inBoundRTP = [...remoteStats.values()].find(({type}) => type === 'inbound-rtp');
  const outBoutRTP = [...localStats.values()].find(({type}) => type === 'outbound-rtp');
  document.getElementById('packetsSent').value = outBoutRTP && outBoutRTP.packetsSent;
  document.getElementById('packetsReceived').value = inBoundRTP && inBoundRTP.packetsReceived;
}

const video_constraints = document.getElementById('video_constraints');
const remote_video = document.getElementById('remote_video');
const local_video = document.getElementById('local_video');

let localVideoTrack = null;
document.getElementById('getUserMedia').onclick = async function () {
  log('Step 0: check video constraints: ' + video_constraints.value);
  const videoConstraints = JSON.parse(video_constraints.value);

  log('Step 1: get GUM stream');
  userMediaStream  = await navigator.mediaDevices.getUserMedia({ audio: false, video: videoConstraints });
  local_video.srcObject = userMediaStream;

  localVideoTrack = userMediaStream.getVideoTracks()[0];
};

document.getElementById('negotiate').onclick = async function () {
  log('Step 2: Negotiate and Get Remote Stream');
  const { remoteStream, localPC, remotePC } = await negotiate(localVideoTrack);
  remote_video.srcObject = remoteStream;

  // update packets sent and received on PCs
  setInterval(() => monitorPackets(localPC, remotePC), 1000);
};

// negotiate
// 1) creates peer connections
// 2) adds local track
// 3) negotiates connection
// 4) returns remote stream.
async function negotiate(localTrack) {
  const localPC = new RTCPeerConnection();
  const remotePC = new RTCPeerConnection();
  remotePC.onicecandidate = (event) => event.candidate && localPC.addIceCandidate(event.candidate);
  localPC.onicecandidate = (event) => event.candidate && remotePC.addIceCandidate(event.candidate);

  return new Promise( async (resolve) => {
    localPC.addTrack(localTrack);
    remotePC.ontrack = (event) => {
      console.log('got track:', event.track)
      resolve({
          remoteStream: new MediaStream([event.track]),
          localPC,
          remotePC
        });
    }

    const offer = await localPC.createOffer();
    localPC.setLocalDescription(offer);
    remotePC.setRemoteDescription(offer);
    const answer = await remotePC.createAnswer();
    remotePC.setLocalDescription(answer);
    localPC.setRemoteDescription(answer);
  });
}

</script>