title: Change playout delay in WebRTC stream
body: <p>I'm trying to cast a live MediaStream (Eventually from the camera) from peerA to peerB and I want peerB to receive the live stream in real time and then replay it with an added delay. Unfortunately in isn't possible to simply pause the stream and resume with play since it jump forward to the live moment.</p>
  
  <p>So I have figured out that I can use MediaRecorder + SourceBuffer rewatch the live stream. Record the stream and append the buffers to MSE (SourceBuffer) and play it 5 seconds later.
  This works grate on the local device (stream). But when I try to use Media Recorder on the receivers MediaStream (from <code>pc.onaddstream</code>) is looks like it gets some data and it's able to append the buffer to the sourceBuffer. however it dose not replay. sometime i get just one frame.</p>
  
  <pre><code>const [pc1, pc2] = localPeerConnectionLoop()
  const canvasStream = canvas.captureStream(200)
  
  videoA.srcObject = canvasStream
  videoA.play()
  
  // Note: using two MediaRecorder at the same time seem problematic
  // But this one works
  // stream2mediaSorce(canvasStream, videoB)
  // setTimeout(videoB.play.bind(videoB), 5000)
  
  pc1.addTransceiver(canvasStream.getTracks()[0], {
    streams: [ canvasStream ]
  })
  
  pc2.onaddstream = (evt) =&gt; {
    videoC.srcObject = evt.stream
    videoC.play()
  
    // Note: using two MediaRecorder at the same time seem problematic
    // THIS DOSE NOT WORK
    stream2mediaSorce(evt.stream, videoD)
    setTimeout(() =&gt; videoD.play(), 2000)
  }
  
  /**
   * Turn a MediaStream into a SourceBuffer
   * 
   * @param  {MediaStream}      stream   Live Stream to record
   * @param  {HTMLVideoElement} videoElm Video element to play the recorded video in
   * @return {undefined}
   */
  function stream2mediaSorce (stream, videoElm) {
    const RECORDER_MIME_TYPE = 'video/webm;codecs=vp9'
    const recorder = new MediaRecorder(stream, { mimeType : RECORDER_MIME_TYPE })
  
    const mediaSource = new MediaSource()
    videoElm.src = URL.createObjectURL(mediaSource)
    mediaSource.onsourceopen = (e) =&gt; {
      sourceBuffer = mediaSource.addSourceBuffer(RECORDER_MIME_TYPE);
  
      const fr = new FileReader()
      fr.onerror = console.log
      fr.onload = ({ target }) =&gt; {
        console.log(target.result)
        sourceBuffer.appendBuffer(target.result)
      }
      recorder.ondataavailable = ({ data }) =&gt; {
        console.log(data)
        fr.readAsArrayBuffer(data)
      }
      setInterval(recorder.requestData.bind(recorder), 1000)
    }
  
    console.log('Recorder created')
    recorder.start() 
  }
  </code></pre>
  
  <p>Do you know why it won't play the video?</p>
  
  <p>I have created a <a href="https://jsfiddle.net/ofy8w1jn/5/" rel="noreferrer">fiddle</a> with all the necessary code to try it out, the javascript tab is the same code as above, (the html is mostly irrelevant and dose not need to be changed)</p>
  
  <p>Some try to reduce the latency, but I actually want to increase it to ~10 seconds to rewatch something you did wrong in a golf swing or something, and if possible avoid MediaRecorder altogether</p>
  
  <p><strong>EDIT:</strong>
  I found something called "playout-delay" in some RTC extension</p>
  
  <blockquote>
    <p>that allows the sender to control the minimum and maximum latency from  capture to render time</p>
  </blockquote>
  
  <ul>
  <li><a href="https://webrtc.org/experiments/rtp-hdrext/playout-delay/" rel="noreferrer">https://webrtc.org/experiments/rtp-hdrext/playout-delay/</a></li>
  </ul>
  
  <p>How can i use it?
  Will it be of any help to me?</p>