【实战技巧】前端播放本地视频并实现截图功能（上）

前言

最近公司有新的需求，大致描述为需要用户上传本地文件，然后可以在网页进行播放，同时可以对播放中的视频进行截图，最后把截图下载到本地。

由于之前没有这块的知识储备，所以也是边摸索边实现。特此把探索过程记录下来，方便日后复习，也或许能帮到其他有需要的小伙伴。

本文基础前端框架为 vue2.x ，思路如下。

• 本地上传视频
• 播放视频
• 视频截图
• 截图下载

使用到的第三方库： ffmpeg.wasm

npm 上包名叫这个 @ffmpeg/ffmpeg

ffmpeg.wasm

先来学习一下这个库的基本用法，全部的 API 都在下面了。

• createFFmpeg()
  • ffmpeg.load()
  • ffmpeg.run()
  • ffmpeg.FS()
  • ffmpeg.exit()
  • ffmpeg.setLogging()
  • ffmpeg.setLogger()
  • ffmpeg.setProgress()
• fetchFile()

安装

npm install @ffmpeg/ffmpeg @ffmpeg/core -S 

在模块中导出这两个方法 createFFmpeg, fetchFile。

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; 

createFFmpeg

createFFmpeg 是一个创建 ffmpeg 实例的工厂函数。

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({}) 

参数如下

• corePath： 指定 ffmpeg-core.js 的加载路径。

• log： 是否打开所有日志，默认为 false

• logger： 获取日志消息的函数，例： ({ message }) => console.log(message)

• progress： 跟踪进度的函数，例： p => console.log(p)

ffmpeg.load

ffmpeg.load() 返回一个 Promise，用来加载 ffmpeg-core.js 核心包，在浏览器环境中，ffmpeg.wasm-core 脚本默认是从 CDN 中获取的，可以在创建 ffmpeg 实例时通过 corePath 来指定到本地路径。

(async () => {
  await ffmpeg.load();
})(); 

ffmpeg.run

ffmpeg.run(...args) 返回一个 Promise，官网说这个方法和原生的 ffmpeg 一样，需要传递的参数也一样，但我原生的也不会啊，算了，知道用法就行了。

(async () => {
  /* 等价于执行了 `$ ffmpeg -i flame.avi -s 1920x1080 output.mp4` */
  await ffmpeg.run('-i', 'flame.avi', '-s', '1920x1080', 'output.mp4');
})(); 

ffmpeg 参数说明：

参数	说明
基本选项:
-formats	输出所有可用格式
-f fmt	指定格式(音频或视频格式)
-i filename	指定输入文件名，在linux下当然也能指定:0.0(屏幕录制)或摄像头
-y	覆盖已有文件
-t duration	记录时长为t
-fs limit_size	设置文件大小上限
-ss time_off	从指定的时间(s)开始， [-]hh:mm:ss[.xxx]的格式也支持
-itsoffset time_off	设置时间偏移(s)，该选项影响所有后面的输入文件。该偏移被加到输入文件的时戳，定义一个正偏移意味着相应的流被延迟了 offset秒。 [-]hh:mm:ss[.xxx]的格式也支持
-title string	标题
-timestamp time	时间戳
-author string	作者
-copyright string	版权信息
-comment string	评论
-album string	album名
-v verbose	与log相关的
-target type	设置目标文件类型(“vcd”, “svcd”, “dvd”, “dv”, “dv50”, “pal-vcd”, “ntsc-svcd”, …)
-dframes number	设置要记录的帧数
视频选项:
-b	指定比特率(bits/s)，似乎ffmpeg是自动VBR的，指定了就大概是平均比特率
-bitexact	使用标准比特率
-vb	指定视频比特率(bits/s)
-vframes number	设置转换多少桢(frame)的视频
-r rate	帧速率(fps) （可以改，确认非标准桢率会导致音画不同步，所以只能设定为15或者29.97）
-s size	指定分辨率 (320x240)
-aspect aspect	设置视频长宽比(4:3, 16:9 or 1.3333, 1.7777)
-croptop size	设置顶部切除尺寸(in pixels)
-cropbottom size	设置底部切除尺寸(in pixels)
-cropleft size	设置左切除尺寸 (in pixels)
-cropright size	设置右切除尺寸 (in pixels)
-padtop size	设置顶部补齐尺寸(in pixels)
-padbottom size	底补齐(in pixels)
-padleft size	左补齐(in pixels)
-padright size	右补齐(in pixels)
-padcolor color	补齐带颜色(000000-FFFFFF)
-vn	取消视频
-vcodec codec	强制使用codec编解码方式(‘copy’ to copy stream)
-sameq	使用同样视频质量作为源（VBR）
-pass n	选择处理遍数（1或者2）。两遍编码非常有用。第一遍生成统计信息，第二遍生成精确的请求的码率
-passlogfile file	选择两遍的纪录文件名为file
-newvideo	在现在的视频流后面加入新的视频流
高级视频选项：
-pix_fmt format	set pixel format, ‘list’ as argument shows all the pixel formats supported
-intra	仅适用帧内编码
-qscale q	以<数值>质量为基础的VBR，取值0.01-255，约小质量越好
-loop_input	设置输入流的循环数(目前只对图像有效)
-loop_output	设置输出视频的循环数，比如输出gif时设为0表示无限循环
-g int	设置图像组大小
-cutoff int	设置截止频率
-qmin int	设定最小质量，与-qmax（设定最大质量）共用，比如-qmin 10 -qmax 31
-qmax int	设定最大质量
-qdiff int	量化标度间最大偏差 (VBR)
-bf int	使用frames B 帧，支持mpeg1,mpeg2,mpeg4
音频选项:
-ab	设置比特率(单位：bit/s，也许老版是kb/s)前面-ac设为立体声时要以一半比特率来设置，比如192kbps的就设成96，转换 默认比特率都较小，要听到较高品质声音的话建议设到160kbps（80）以上。
-aframes number	设置转换多少桢(frame)的音频
-aq quality	设置音频质量 (指定编码)
-ar rate	设置音频采样率 (单位：Hz)，PSP只认24000
-ac channels	设置声道数，1就是单声道，2就是立体声，转换单声道的TVrip可以用1（节省一半容量），高品质的DVDrip就可以用2
-an	取消音频
-acodec codec	指定音频编码(‘copy’ to copy stream)
-vol volume	设置录制音量大小(默认为256) <百分比> ，某些DVDrip的AC3轨音量极小，转换时可以用这个提高音量，比如200就是原来的2倍
-newaudio	在现在的音频流后面加入新的音频流
字幕选项:
-sn	取消字幕
-scodec codec	设置字幕编码(‘copy’ to copy stream)
-newsubtitle	在当前字幕后新增
-slang code	设置字幕所用的ISO 639编码(3个字母)
Audio/Video 抓取选项:
-vc channel	设置视频捕获通道(只对DV1394)
-tvstd standard	设置电视标准 NTSC PAL(SECAM)