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>