requestVideoFrameCallback

requestVideoFrameCallback: 将新视频帧发送到合成器时运行的回调函数

requestVideoFrameCallback() 的用法与 Window.requestAnimationFrame() 相同。您可以使用它来运行一个回调函数，该函数在下一个视频帧发送到合成器时执行某些操作。当合成下一个视频帧时，再次调用 requestVideoFrameCallback() 以运行回调，以此类推，回调结束
requestVideoFrameCallback() 提供对每个单独视频帧的可靠访问。
requestAnimationFrame() 尝试匹配显示刷新率，通常为60 Hz。另一方面，requestVideoFrameCallback() 尝试匹配视频帧速率。更具体地说，回调将以视频帧速率和浏览器绘画刷新速率中的较低者运行。例如，在以60Hz绘制的浏览器中播放帧速率为25fps的视频将以25Hz的速率触发回调。在同一个60 Hz浏览器中运行的帧速率为120 fps的视频将以60 Hz的频率触发回调。
requestVideoFrameCallback() 在回调函数中提供有用的视频元数据。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .video,
      .canvas {
        width: 420px;
        height: auto;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <video src="./frag_bunny.mp4" controls audooplay muted loop class="video"></video>
    <canvas class="canvas"></canvas>
 
    <script>
      /** @type {HTMLVideoElement} */
      const video = document.querySelector('.video');
      /** @type {HTMLCanvasElement} */
      const canvas = document.querySelector('.canvas');
 
      /** @type {CanvasRenderingContext2D} */
      const ctx = canvas.getContext('2d');
 
      video.addEventListener('loadedmetadata', () => {
        if (video.videoWidth < video.offsetWidth) {
          canvas.width = video.offsetWidth * devicePixelRatio;
          canvas.height = video.offsetHeight * devicePixelRatio;
        } else {
          canvas.width = video.videoWidth * devicePixelRatio;
          canvas.height = video.videoHeight * devicePixelRatio;
        }
      });
 
      function drawFrame() {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        video.requestVideoFrameCallback((now, metadata) => {
          // console.log('frame', now, metadata.mediaTime);
          drawFrame();
        });
      }
 
      requestAnimationFrame(drawFrame);
    </script>
  </body>
</html>

posted @ 2024-05-03 22:25 _clai 阅读(131) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· canvas 捕获视频帧

· webcodecs mix-blend-mode

· requestAnimationFrame

· requestAnimationFrame使用介绍

阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了

公告

昵称： _clai
园龄： 4年11个月
粉丝： 0
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. uniapp 文件管理器(文件选择)(4)

_clai

requestVideoFrameCallback

requestVideoFrameCallback: 将新视频帧发送到合成器时运行的回调函数

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	.video,
	.canvas {
	width: 420px;
	height: auto;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<video src="./frag_bunny.mp4" controls audooplay muted loop class="video"></video>
	<canvas class="canvas"></canvas>

	<script>
	/** @type {HTMLVideoElement} */
	const video = document.querySelector('.video');
	/** @type {HTMLCanvasElement} */
	const canvas = document.querySelector('.canvas');

	/** @type {CanvasRenderingContext2D} */
	const ctx = canvas.getContext('2d');

	video.addEventListener('loadedmetadata', () => {
	if (video.videoWidth < video.offsetWidth) {
	canvas.width = video.offsetWidth * devicePixelRatio;
	canvas.height = video.offsetHeight * devicePixelRatio;
	} else {
	canvas.width = video.videoWidth * devicePixelRatio;
	canvas.height = video.videoHeight * devicePixelRatio;
	}
	});

	function drawFrame() {
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	video.requestVideoFrameCallback((now, metadata) => {
	// console.log('frame', now, metadata.mediaTime);
	drawFrame();
	});
	}

	requestAnimationFrame(drawFrame);
	</script>
	</body>
	</html>