HTMLVideoElement: requestVideoFrameCallback()

requestVideoFrameCallback() timeupdate

requestVideoFrameCallback() Window.requestAnimationFrame() requestVideoFrameCallback() requestVideoFrameCallback()

• requestVideoFrameCallback()
• requestAnimationFrame() 60Hz requestVideoFrameCallback() 25fps 60Hz 25Hz 60Hz 120 fps 60Hz
• requestVideoFrameCallback()

requestVideoFrameCallback() (V-sync) 1 V-sync

API requestVideoFrameCallback()

now expectedDisplayTime v-sync expectedDisplayTime now 5 10 expectedDisplayTime 16 / 60Hz v-sync

requestVideoFrameCallback(callback)

callback

2

now

DOMHighResTimeStamp

metadata

• expectedDisplayTime: DOMHighResTimeStamp
• height:
• mediaTime: HTMLMediaElement.currentTime
• presentationTime: DOMHighResTimeStamp
• presentedFrames:
• processingDuration: mediaTime
• width:

WebRTC requestVideoFrameCallback()

• captureTime: DOMHighResTimeStamp RTCP RTP
• receiveTime: DOMHighResTimeStamp
• rtpTimestamp: RTP

ID

HTMLVideoElement.cancelVideoFrameCallback()

requestVideoFrameCallback() <canvas> DOM

if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
  let paintCount = 0;
  let startTime = 0.0;

  const updateCanvas = (now, metadata) => {
    if (startTime === 0.0) {
      startTime = now;
    }

    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    const elapsed = (now - startTime) / 1000.0;
    const fps = (++paintCount / elapsed).toFixed(3);
    fpsInfo.innerText = `video fps: ${fps}`;
    metadataInfo.innerText = JSON.stringify(metadata, null, 2);

    // 
    video.requestVideoFrameCallback(updateCanvas);
  };

  // 
  video.requestVideoFrameCallback(updateCanvas);
} else {
  alert(" requestVideoFrameCallback() ");
}

requestVideoFrameCallback

• <video>
• HTMLVideoElement.cancelVideoFrameCallback()
• requestVideoFrameCallback() (developer.chrome.com, 2023)