前端获取视频帧率/帧数

最新推荐文章于 2024-06-20 09:40:44 发布
最新推荐文章于 2024-06-20 09:40:44 发布
阅读量5.8k 收藏 5
点赞数 2
文章标签： javascript c语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36994568/article/details/105939835
版权
本文介绍了如何使用C语言编译成WebAssembly（WASM）来解析MP4文件，获取视频帧率。通过对比了不同解决方案的优缺点，如MediaInfo和MP4Box.js，提出了一个仅30KB的小型解决方案。详细步骤包括WASM本地环境配置、编译C文件、在JS中调用C函数以及测试过程。
摘要由CSDN通过智能技术生成

实现方案：

    使用C语言书写解析MP4文件的方法，编译为wasm，与JS协同用来解析上传的MP4文件，获取视频帧数。

         优：体积较小（共30KB）

         缺：现在功能相当有限，只实现了MP4获取帧数的功能

    网页Demo 获取MP4视频帧数icon-default.png?t=LBL2http://vividlipi.gitee.io/gerframecountformp4其他方案：

    1.  使用MediaInfo前端解决方案

          优：支持多种视频，几乎全部视频信息

          缺：体积稍微大一点（3M左右）

    2. 使用MP4Box.js方案

          优：有simple和all版本可选，根据需要的功能选择不同的版本，simple版本30K左右，all版本200K左右

          缺

最低0.47元/天 解锁文章
云朵后的小丑鱼
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端视频帧提取 ffmpeg + Webassembly
yinshipin007的博客
04-12 895
基于 ffmpeg + Webassembly 实现前端视频帧提取现有的前端视频帧提取主要是基于 canvas+ video标签的方式，在用户本地选取视频文件后，将本地文件转为 ObjectUrl后设置到 video标签的src属性中，再通过canvas的 drawImage接口提取出当前时刻的视频帧。受限于浏览器支持的视频编码格式，即使是支持最全的的 Chrome 浏览器也只能解析 MP4/ WebM的视频文件和H.264/ VP8的视频编码。
mediainfo.js获取视频详细信息
12-09
在本文中，我们将深入探讨如何使用mediainfo.js来获取视频的详细信息，包括帧率、时长以及计算总帧数。 首先，我们需要了解mediainfo.js的基本用法。在项目中引入mediainfo.js库后，你可以创建一个MediaInfo对象并...
利用js文件获取视频文件详细信息 如帧速率、总比特率等
zouyi_888的博客
01-14 5053
用js获取上传的视频文件的详细信息，如帧速率、总比特率等。
花椒前端基于WebAssembly 的H.265播放器研发
360技术
07-16 4199
奇技指南随着近些年直播技术的不断更新迭代，高画质、低带宽、低成本成为直播行业追求的重要目标之一。本文介绍花椒直播基于WebAssembly 的H.265播放器研发。本文来...
前端从视频文件提取画面帧
最新发布
weixin_43891869的博客
06-20 657
然后，你可以添加自定义的回调，例如 onReady 和 onSamples，然后向对象提供ArrayBuffer类型的数据。在这里，‘http://example.com/example.mp4’ 是视频的 URL，25 是你希望每秒提取的帧数。在这个过程中， MP4Box它能帮你获取编码的视频和音频块，然后你可以将这些块输入到 VideoDecoder 或 AudioDecoder。解析容器文件到单独的编码视频和/或音频块：这个步骤需要将文件（例如 .mp4 文件）解析到单独的编码视频和/或音频块。
【前端性能】Web 动画帧率（FPS）计算
weixin_34407348的博客
12-13 586
我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。 有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状况，从而更好的优化它们，本文就是介绍 Web 动画帧率（FPS）计算方法。   流畅动画的标准 首先，理清一些概念。FPS 表示的是每秒钟画面更新次数。我...
前端视频取帧方法
weixin_43950820的博客
08-02 392
capture = (url:string,width:number,height:number,screenPartNo:number) => { let canvas = document.createElement(“canvas”); let ctx = canvas.getContext(‘2d’); let video = document.createElement(“video”); video.setAttribute(‘src’, url); video.setAttribute(
前端如何统计视频的渲染帧率
fjqgx的专栏
08-04 512
​在前端多媒体方向中，不论是点播、直播还是webrtc卡顿率都是一个很重要的指标。那前端如何统计卡顿率呢？在比较早的时候是通过Video的waiting和playing消息来判断当前视频播放是否卡顿的。但是现在浏览器支持了一个新的接口：requestVideoFrameCallback。当每一次有新的视频帧渲染的时候，都会触发一次这个回调。
fps-react:FPS React检测低帧率和FPSStats
05-23
FPSReactFPS React是一个带有一些有用钩子的小包装，可以检测低帧率，显示FPS统计信息或仅获取原始FPS数据。安装 npm i fps-reactoryarn add fps-reactuseFPSDetect 用于检测低帧速率，并可能禁用效果以改善性能。...
前端canvas动画如何转成mp4视频的方法
12-13
1. **纯前端视频编码转换**：如使用Whammy库，它能将canvas绘制的帧序列转化为WebM格式的视频。但是，这种方法存在一些限制，比如图片地址必须为相对路径，无法录制音频，生成的视频需下载后再上传，且当处理大量帧...
ogg小视频HTML5测试mp4视频
08-27
免费分享一份包含ogg、mp4、webm三种格式的测试小视频，再加一段已测试可直接复制的代码，免去到处找和裁剪的麻烦。
javacv实现rtsp转flv用于网页前端播放验证可用
05-10
3. 设置必要的编码参数，如视频和音频的编码器、帧率、分辨率等。 4. 开始循环抓取和录制，直至需要停止。 以下是一个简化的示例代码片段： ```java import org.bytedeco.javacv.*; public class ...
opencv读摄像头上传到前端.rar
08-08
OpenCV的`cv2.VideoCapture.read()`方法用于获取下一帧，而合适的帧率设置可以降低延迟。此外，优化网络传输协议，如使用WebRTC或者RTMP，可以减少数据在网络中的传输延迟。 4. **Python编程**：Python是实现这个...
前端获取视频流并播放
热门推荐
不知名的研发小码农
07-27 1万+
2017-09-05 前端获取视频流并播放  JavaScript html5出来后，前端播放视频瞬间变得方便容易多了，一个<video>标签就可以搞定,只要给src属性正确的文件路径即可。<video src="images/xxx.mov" width="300px" heigth="300px" controls="controls" autoplay>&lt...
js获取视频任意帧
raining_day101的博客
01-12 1763
js获取本地视频任意帧
JS计算帧率
weixin_31315135的博客
03-30 1280
获取画布帧率
mediainfo.js获取视频详细信息，js获取视频帧数
MFWSCQ的博客
12-10 7818
需求：上传视频的时候需要知道该视频的帧数等信息，input的file直接读取是不能读取帧数的 方式：通过引入mediainfo.js来获取视频的帧率和视频的总时长，用帧率*时长得出总帧数 栗子： 上面输出格式是 text 我们可以根据需要将格式设为 json 对象，这样就能获取想要的信息了 //这是text 格式 MediaInfo({ format: 'text' }, (mediainfo) => { fileinput.addEventListener('change', () =
前端上传视频截取某一帧
m0_66226018的博客
06-21 256
上述代码写完之后，记得让后端进行一下跨域，因为这是上传到文件服务器上了，现在的操作还拿不到截取的图片，一定要让后端进行Access-Control-Allow-Origin' header跨域。接收某一帧的图片upload，这个是只存放图片，并且直截取图片，不能弹出图片选择框。上传视频的el-upload。
js如何直接获取avi视频的帧数和帧率
06-07
JavaScript本身并没有直接获取avi视频的帧数和帧率的方法，需要借助第三方库或API来实现。 一种常用的方法是使用FFmpeg.js库，该库提供了JavaScript版本的FFmpeg，可以在浏览器中解码和处理视频。通过使用该库，可以获取视频的帧数和帧率，以下是一个示例代码： ```javascript // 引入FFmpeg.js import * as FFmpeg from 'ffmpeg.js/ffmpeg.min.js'; // 读取视频文件 const fileReader = new FileReader(); fileReader.readAsArrayBuffer(file); fileReader.onload = async () => { const av = FFmpeg.avformat_open_input(new Uint8Array(fileReader.result), null, null, null); await FFmpeg.avformat_find_stream_info(av, null); // 获取视频流信息 const videoStream = av.streams.filter(stream => stream.codec_type === FFmpeg.AVMEDIA_TYPE_VIDEO)[0]; const frameRate = videoStream.avg_frame_rate; const frameCount = videoStream.nb_frames; console.log(`帧率: ${frameRate}, 帧数: ${frameCount}`); }; ``` 上述代码中，首先使用`FileReader`读取视频文件，然后使用`avformat_open_input`打开视频文件并获取视频流信息，再使用`avformat_find_stream_info`查找流信息。最后，从视频流信息中获取帧率和帧数。 需要注意的是，使用FFmpeg.js库会增加页面的运行负担和加载时间，同时需要注意版权问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值