Change playout delay in WebRTC stream Change playout delay in WebRTC stream google-chrome google-chrome

Change playout delay in WebRTC stream


Update, there is new feature that will enable this, called playoutDelayHint.

We want to provide means for javascript applications to set their preferences on how fast they want to render audio or video data. As fast as possible might be beneficial for applications which concentrates on real time experience. For others additional data buffering may provide smother experience in case of network issues.

Refs:
https://discourse.wicg.io/t/hint-attribute-in-webrtc-to-influence-underlying-audio-video-buffering/4038

https://bugs.chromium.org/p/webrtc/issues/detail?id=10287

Demo: https://jsfiddle.net/rvekxns5/doe i was only able to set max 10s in my browser but it's more up to the UA vendor to do it's best it can with the resources available

import('https://jimmy.warting.se/packages/dummycontent/canvas-clock.js').then(({AnalogClock}) => {  const {canvas} = new AnalogClock(100)  document.querySelector('canvas').replaceWith(canvas)    const [pc1, pc2] = localPeerConnectionLoop()  const canvasStream = canvas.captureStream(200)  videoA.srcObject = canvasStream  videoA.play()  pc1.addTransceiver(canvasStream.getTracks()[0], {    streams: [ canvasStream ]  })  pc2.onaddstream = (evt) => {    videoC.srcObject = evt.stream    videoC.play()  }  $dur.onchange = () => {    pc2.getReceivers()[0].playoutDelayHint = $dur.valueAsNumber  }})
<!-- all the irrelevant part, that you don't need to know anything about --><h3 style="border-bottom: 1px solid">Original canvas</h3><canvas id="canvas" width="100" height="100"></canvas><script>function localPeerConnectionLoop(cfg = {sdpSemantics: 'unified-plan'}) {  const setD = (d, a, b) => Promise.all([a.setLocalDescription(d), b.setRemoteDescription(d)]);  return [0, 1].map(() => new RTCPeerConnection(cfg)).map((pc, i, pcs) => Object.assign(pc, {    onicecandidate: e => e.candidate && pcs[i ^ 1].addIceCandidate(e.candidate),    onnegotiationneeded: async e => {      try {        await setD(await pc.createOffer(), pc, pcs[i ^ 1]);        await setD(await pcs[i ^ 1].createAnswer(), pcs[i ^ 1], pc);      } catch (e) {        console.log(e);      }    }  }));}</script><h3 style="border-bottom: 1px solid">Local peer (PC1)</h3><video id="videoA" muted width="100" height="100"></video><h3 style="border-bottom: 1px solid">Remote peer (PC2)</h3><video id="videoC" muted width="100" height="100"></video><label> Change playoutDelayHint<input type="number" value="1" id="$dur"></label>