canvas 捕获视频帧

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>捕获视频帧</title>
    <style>
      * {
        box-sizing: border-box;
      }
      video,
      canvas {
        width: 360px;
        outline: 1px solid red;
      }
      img {
        width: 100px;
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
    </style>
  </head>
  <body>
    <div class="list"></div>
    <hr />
    <script>
      init();
      async function init() {
        const list = document.querySelector('.list');
        for (let i = 0; i < 60; i++) {
          const frame = await captureFrame(i);
          const img = document.createElement('img');
          img.src = frame.src;
          list.appendChild(img);
        }
      }
 
      // captureFrame()
      function captureFrame(time = 0) {
        return new Promise((resolve) => {
          const video = document.createElement('video');
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
 
          video.currentTime = time;
          video.muted = true;
          video.autoplay = true;
 
          video.addEventListener('canplay', () => {
            console.log(' => ', video.videoWidth, video.videoHeight);
            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;
            }
 
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            canvas.toBlob(
              (blob) => {
                const src = URL.createObjectURL(blob);
                resolve({ src, blob });
              },
              'image/png',
              1
            );
          });
          video.src = './frag_bunny.mp4';
        });
 
        // document.body.appendChild(video);
        // document.body.appendChild(canvas);
      }
    </script>
  </body>
</html>

posted @ 2024-04-16 19:09 _clai 阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· Element Capture API

· FaceDetector 人脸检测追踪demo

· 从视频文件提取画面帧

· js canvas截取视频画面首帧

· JS取视频第一帧

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

公告

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

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

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

_clai

canvas 捕获视频帧

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>捕获视频帧</title>
	<style>
	* {
	box-sizing: border-box;
	}
	video,
	canvas {
	width: 360px;
	outline: 1px solid red;
	}
	img {
	width: 100px;
	}
	.list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	}
	</style>
	</head>
	<body>
	<div class="list"></div>
	<hr />
	<script>
	init();
	async function init() {
	const list = document.querySelector('.list');
	for (let i = 0; i < 60; i++) {
	const frame = await captureFrame(i);
	const img = document.createElement('img');
	img.src = frame.src;
	list.appendChild(img);
	}
	}

	// captureFrame()
	function captureFrame(time = 0) {
	return new Promise((resolve) => {
	const video = document.createElement('video');
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	video.currentTime = time;
	video.muted = true;
	video.autoplay = true;

	video.addEventListener('canplay', () => {
	console.log(' => ', video.videoWidth, video.videoHeight);
	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;
	}

	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	canvas.toBlob(
	(blob) => {
	const src = URL.createObjectURL(blob);
	resolve({ src, blob });
	},
	'image/png',
	1
	);
	});
	video.src = './frag_bunny.mp4';
	});

	// document.body.appendChild(video);
	// document.body.appendChild(canvas);
	}
	</script>
	</body>
	</html>