定格动态:如何用前端实现视频帧截图

在这样一个图像化极其重要的时代,从视频中提取精彩瞬间,即视频帧截图的技术,已成为前端开发中的一个亮点。JavaScript作为网页动态效果和交互的主力军,其在视频处理领域能力逐渐被挖掘和重视,尤其是视频帧截图技术的应用,为网站和应用程序提供了更为丰富和直观的用户体验。

大体为以下流程:
在这里插入图片描述

选择视频文件定格帧

选择本地视频文件

<input type="file">
const input = document.querySelector('input');
  input.onchange = async (e) => {
  const file = e.target.files[0];
  console.log(file);
}

创建一个video标签,把视频文件放到video标签中。使用 createObjectURL 方法把视频文件对象转为一个url。

const video = document.createElement("video");
video.src = URL.createObjectURL(file);
// 设置视频自动播放
video.autoplay = true;
// 设置视频播放的时间点
video.currentTime = 10;

使用 createObjectURL 创建的URL是一个blob:开头的临时路径,这个路径可以在浏览器中直接访问,访问到的内容就是上传的视频文件。当页面关闭后,此路径也随之失效。
在这里插入图片描述

通过 currentTime 设置需要截图的时间点,由于创建的video标签未加到页面中,所以这里设置了自动播放后,不会继续播放10s后的内容,而是停留在10s的位置。

绘制视频帧

现在视频停留在了指定帧的位置,接下来就通过 canvas来绘制当前帧。

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = vdo.videoWidth;
canvas.height = vdo.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);

在这里插入图片描述

转为图片地址

将canvas内容转为一个可用img标签展示的url地址,这个过程需要两步:

  • 使用toBlob方法创造一个Blob对象
  • 使用createObjectURL方法把对象转为可访问的URL
function drawVideo(vdo) {
    return new Promise((resolve) => {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = vdo.videoWidth;
        canvas.height = vdo.videoHeight;
        ctx.drawImage(vdo, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
            resolve({
                blob,
                url: URL.createObjectURL(blob)
            });
        })
    })
}

由于 toBlob 是采用回调函数的方式调用,所以封装drawVideo 方法返回为一个promise。

截图全流程

当video标签设置url后,不能马上截图,视频加载需要一个过程,要等视频可以播放后再截图。

video.oncanplay = async () => {
    const frame = await drawVideo(video);
}

封装完整的截图方法,由于oncanplay 同样是一个异步方法,这里也需要返回一个promise

function captureFrame(file, time) {
    return new Promise((resolve) => {
        const video = document.createElement("video");
        video.autoplay = true;
        video.currentTime = time;
        video.src = URL.createObjectURL(file);
        video.oncanplay = async () => {
            const frame = await drawVideo(video);
            resolve(frame);
        }
    })
}

获取视频时长,按照每1秒的间隔截一张图

const video = document.createElement("video");
video.src = URL.createObjectURL(file);
// 视频加载完成后,才能获取到视频的时长
video.onloadedmetadata = async () => {
    for (let index = 0; index < video.duration; index++) {
        const frame = await captureFrame(file, index);
        // 将截图加入到页面中展示
        const img = document.createElement("img");
        img.src = frame.url;
        img.style.width = "100px";
        document.body.appendChild(img);
    }
};

尽管视频帧截图技术带来了许多便利,但在实际应用过程中也面临着一些挑战:

  • 性能问题:处理大量或高分辨率视频时的性能消耗较大,可能影响页面加载速度和用户体验。解决方案包括优化图片尺寸、使用异步加载技术、以及在服务器端进行视频处理等。
  • 浏览器兼容性:不同浏览器对视频解码和渲染的支持程度不同,可能导致在某些浏览器上无法正确显示视频帧截图。解决这一问题的方法包括使用广泛支持的编解码器和格式,以及提供替代的媒体格式。
  • 用户体验:如何让用户方便快捷地选择和保存截图是一个需要解决的问题。提供直观的用户界面和明确的操作指导是提升用户体验的关键。

随着前端技术的不断进步,未来视频帧截图技术将变得更加高效和用户友好。Web Assembly和FFmpeg等技术的发展有望进一步提升前端处理视频的能力,使得视频帧截图更加迅速和精确。

关注公众号【前端筱园】,回复“视频帧截图”获取本案例源码及素材

写在最后

欢迎访问我的个人网站:www.dengzhanyong.com

欢迎加入前端筱园交流群:
描述文字
关注我的公众号【前端筱园】,不错过每一篇推送

描述文字

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/674766.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GaN功率电子器件中体缺陷相关机制的建模仿真研究

在电力电子器件的外延生长和器件制备过程中&#xff0c;缺陷是不可避免的&#xff0c;大量的缺陷在一定程度上会牺牲器件的击穿电压、导通电阻等性能&#xff0c;同时影响器件的可靠性。近期&#xff0c;河北工业大学和广东工业大学联合开发了缺陷相关的仿真模型&#xff0c;深…

gitblit 环境搭建,服务器迁移记录

下载 Gitblit&#xff1a; http://www.gitblit.com/ JDK&#xff1a;gitblit网站显示需要jdk1.7&#xff0c;这里用的1.8。 Git&#xff1a;到官网下载最新版本安装 1). 分别安装JDK&#xff0c;Git&#xff0c;配置环境变量&#xff0c;下载并解压Gitblit 2). 创建代码仓库 …

每日一题《leetcode--LCR 029.循环有序列表的插入》

https://leetcode.cn/problems/4ueAj6/ 这道题整体上想插入数据有三种情况&#xff1a; 1、整个列表是空列表&#xff0c;需要返回插入的结点 2、整个列表只有一个结点&#xff0c;需要在头结点后插入新结点&#xff0c;随机把新结点的next指向头结点 3、整个列表的结点 >1 …

052、Python 集合及其使用

集合&#xff08;Set&#xff09;是一种无序且元素唯一的数据结构&#xff0c;用于存储不重复的元素&#xff08;即集合具有无序性和互异性两个重要特性&#xff09;。集合可以用于执行集合操作&#xff0c;如并集、交集、差集等。 定义集合 可以使用大括号 {} 或者 set() 函…

供应MT7662TUN/C进口芯片现货

长期供应各品牌进口芯片现货&#xff1a; MT7662TUN/C DLPC4421A DLPC4422A DAD2000 IT6634 DDP4421-HV PMD1000 SiHA120N60E AM8280 AM90N06-03B P15F60HP2 MSD6A838UYGN-8-003D 5AGXBA5D4F31C5G MCZ5209SN STM32L431CCT6 PT2833 ES858 TPS74301RGWR CSD18…

Rust自动生成文件解析

目录 一、生成目录解析二、生成文件解析2.1 Cargo.toml2.2 main函数解析 一、生成目录解析 先使用cargo clean命令删除所有生成的文件&#xff0c;下图显示了目录结构和 main.rs文件 使用cargo new testrust时自动创建出名为testrust的Rust项目。内部主要包含一个src的源码文…

IP地址SSL证书申请流程与注意事项

申请IP地址SSL证书的过程相对直接&#xff0c;但涉及几个关键步骤和注意事项。以下是基于现有信息整理的申请流程及注意事项概览&#xff1a; 一、IP地址SSL证书申请流程&#xff1a; PC点此申请&#xff1a;IP SSL证书申请-极速签发 注册填写注册码230918&#xff08;填写注…

DeepFace ——用于高级人脸识别算法探索与应用

1. 概述 人脸识别作为人工智能和机器学习中的一个活跃领域&#xff0c;长期以来一直在追求模仿甚至超越人类视觉系统的能力。这项技术在安全、监控、身份验证等多个方面都有着广泛的应用&#xff0c;但同时也伴随着隐私、伦理和准确性等社会和文化方面的考量。 Meta&#xff0…

fly-barrage 前端弹幕库(6):实现人像免遮挡

项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff1b; &#x1f451;&#x1f40b;&#x1f389;如果感觉项目还不错的话&#xff0c;还请点下 star &#x1f31f;&#x1f31f;&#x1f31f;。 Gitee&#xff1a;https://gitee.com/fei_fei27/fly-barrage&a…

【matlab】绘图插入并放大/缩小子图

参考链接 代码分为两个&#xff1a;绘图代码与magnify.m 绘图代码就是普通的绘图代码&#xff0c;以下为例 %https://zhuanlan.zhihu.com/p/655767542 clc clear close all x 0:pi/100:2*pi; y1 sin(x); plot(x,y1,r-o); hold on y2sin(x)-0.05; y3sin(x)0.05; xlim([0 2*…

ai写真软件有哪些?轻松创造艺术写真照

艺术写真照是艺术与日常之间的桥梁&#xff0c;它将艺术的边界延伸到了我们的日常生活中&#xff0c;让每个人都能够通过AI技术&#xff0c;将平凡的瞬间转化为艺术的永恒。 那AI写真怎么样呢&#xff1f;今天&#xff0c;本文将推荐几款AI写真软件&#xff0c;它们将帮助你轻…

CXL (1)

为什么有CXL CXL说到底 是为了打破内存墙而生的 CXL全称是Compute Express Link&#xff0c; 可以用来连接CPU&#xff0c;以及其他任何计算单元&#xff0c;比如GPU。 CXL和PCIe跑在一样的physical layer上&#xff0c;与PCIe不一样的是&#xff0c;CXL允许CPU和连接的设备共…

csrf漏洞与ssrf漏洞

环境&#xff1a;用kali搭建的pikachu靶场 一.CSRF 1.CSRF漏洞简介 跨站请求伪造&#xff08;CSRF&#xff09;漏洞是一种Web应用程序安全漏洞&#xff0c;攻击者通过伪装成受信任用户的请求来执行未经授权的操作。这可能导致用户在不知情的情况下执行某些敏感操作&#xff0…

21、matlab生成脉冲序列:pulstran()函数

1、pulstran()函数 1&#xff09;语法 语法1&#xff1a;y pulstran(t,d,func,fs) 基于连续函数的采样产生脉冲序列。 语法2&#xff1a;y pulstran(t,d,p) 生成一个脉冲序列&#xff0c;该脉冲序列是向量p中原型脉冲的多个延迟插值的总和。 语法3&#xff1a;y pulstran…

echarts柱状图坐标轴的内容太长导致显示不全的两种解决办法

情况一&#xff1a;坐标上的内容是文字时 width: 60,//将内容的宽度固定 overflow: truncate,//超出的部分截断 truncate: ...,//截断的部分用...代替 情况二&#xff1a;如果纵坐标上是数字 grid: {top: "15%",left: "2%",right: "2%",bottom:…

西贝柳斯终极版2023:Mac上的简易音乐记谱神器,谱写未来

Avid Sibelius Ultimate 2023 for Mac是一款专为Mac用户设计的音乐记谱软件&#xff0c;它以其强大的功能和直观的操作界面&#xff0c;为音乐创作者们提供了一个高效、便捷的创作平台。 一、音乐创作的得力助手 Sibelius Ultimate 2023不仅适用于有抱负的作曲家和词曲作者&a…

OpenCV中的圆形标靶检测——斑点检测算法(一)

1.导读 在上一节内容中我们简要描述了OpenCV中实现圆形标靶检测的API的使用方法,其处理流程可大致分为1)斑点形状的检测,和2)基于规则的斑点形状的过滤与定位。第一步将类似圆斑形状的区域检测出来,但可能存在一些误检测的噪声,第二步则利用圆斑的分布规则(M*N排列)进行…

海外仓系统介绍:一篇文章讲清楚这是什么,怎么选,有哪些坑

所谓的海外仓系统是一种管理海外仓的综合性工具&#xff0c;主要功能体现在海外仓仓储管理、一件代发订单处理、快递物流跟踪、数据统计、财务统计等方面。 因为海外仓的类型比较多&#xff0c;有大型集团化海外仓&#xff0c;起步阶段海外仓和中小型海外仓&#xff0c;家庭仓…

短视频矩阵系统搭建开发,ai智能剪辑系统,矩阵发布,一键管理多个账户

前言&#xff1a; 企业短视频矩阵是企业通过搭建多个短视频平台账号&#xff0c;形成一个多元化的内容传播网络。它旨在通过多平台内容的同步传播&#xff0c;实现企业品牌价值的最大化。短视频矩阵包括抖音、快手、视频号、小红书、百家号等热门短视频平台&#xff0c;其核心…

UTONMOS:元宇宙游戏,散发无尽魅力与可能

在数字世界的浩瀚星海中&#xff0c;utonmos元宇宙游戏宛如一颗璀璨的明珠&#xff0c;散发着无尽的魅力与可能。 utonmos可不单单只是一款游戏&#xff0c;它更是一个令人惊叹的全新虚拟宇宙&#xff0c;急切地等待着你去深入探索和豪迈征服。 在这里&#xff0c;你能随心所欲…