0
点赞
收藏
分享

微信扫一扫

【实战技巧】前端利用 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)

ffmpeg.FS

​ffmpeg.FS(method, ...args)​​​ 用来运行 ​​FS​​ 操作。

对于 ​​ffmpeg.wasm​​​ 的输入/输出文件,需要先将它们保存到 ​​MEMFS​​​ 以便 ​​ffmpeg.wasm​​​ 能够使用它们。这里我们依赖 ​​Emscripten​​​ 提供的 ​​FS​​ 方法♂️。

参数如下

  • method:需要执行的方法名。
  • args:执行方法对应的参数。

/* Write data to MEMFS, need to use Uint8Array for binary data */
// 把文件存入内存中
ffmpeg.FS('writeFile', 'video.avi', new Uint8Array(...));
/* Read data from MEMFS */
// 在内存中读取
ffmpeg.FS('readFile', 'video.mp4');
/* Delete file in MEMFS */
// 在内存中删除
ffmpeg.FS('unlink', 'video.mp4');

ffmpeg.exit

​ffmpeg.exit()​​​ 用来杀死程序的执行,同时删除 ​​MEMFS​​ 以释放内存。

ffmpeg.setLogging

​ffmpeg.setLogging(logging)​​ 控制是否将日志信息输出到控制台。

参数如下

  • logging:在控制台中打开/关闭日志消息。

ffmpeg.setLogging(true);

ffmpeg.setLogger

​ffmpeg.setLogger(logger)​​​ 设置和获取 ​​ffmpeg.wasm​​ 的输出消息。。

参数如下

  • logger:处理消息的函数。

ffmpeg.setLogger(({ type, message }) => {
console.log(type, message);
/*
* type can be one of following:
*
* info: internal workflow debug messages
* fferr: ffmpeg native stderr output
* ffout: ffmpeg native stdout output
*/

ffmpeg.setProgress

​ffmpeg.setProgress(progress)​​​ 进度处理程序,用于获取 ​​ffmpeg​​ 命令的当前进度。

参数如下

  • progress:处理进度信息的函数。

ffmpeg.setProgress(({ ratio }) => {
console.log(ratio);
/*
* ratio is a float number between 0 to 1. 0 到 1之间的数字
*/

fetchFile

​fetchFile(media)​​​ 返回一个 ​​Promise​​​, 用于从各种资源中获取文件。要处理的视频/音频文件可能位于远程 ​​URL​​​ 或本地文件系统中的某个位置。这个函数帮助你获取文件并返回一个 ​​Uint8Array​​​ 变量供 ​​ffmpeg.wasm​​ 使用。

参数如下

  • media:​URL​​​ 字符串、​​base64​​​ 字符串或​​File​​​、​​Blob​​​、​​Buffer​​ 对象。

(async () => {
const data = await fetchFile('https://github.com/ffmpegwasm/testdata/raw/master/video-3s.avi');
/*
* data will be in Uint8Array format
*/

补充

设置 corePath

​corePath​​​ 支持引入 ​​cdn​

const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
})

但是业务需要部署在内网,访问不了 ​​cdn​​​,幸好 ​​corePath​​ 也支持加载本地文件。

这里应该是支持绝对路径,默认会去访问 ​​public​​ 下面的文件。

const ffmpeg = createFFmpeg({
corePath: 'ffmpeg-core.js',
})

把 ​​node_modules\@ffmpeg\core\dist​​​ 下面的三个文件拷贝到 ​​public​​ 中。

【实战技巧】前端利用 ffmpeg 播放本地视频_前端框架

设置日志

在创建实例的时候,通过传入 ​​log: true​​,开启日志。

const ffmpeg = createFFmpeg({
log: true,
})

【实战技巧】前端利用 ffmpeg 播放本地视频_前端框架_02

也可以通过 ​​ffmpeg.setLogger​​ 自定义日志格式,比如

ffmpeg.setLogger(({ type, message }) => {
console.log('🚀🚀 ~ message', message);
console.log('🚀🚀 ~ type', type);
});

【实战技巧】前端利用 ffmpeg 播放本地视频_FFmpeg_03

还可以直接在创建实例的时候传入 ​​logger​​​ 属性,效果是一样的,建议把 ​​log​​​ 属性改为 ​​false​​,不然日志会重复。

const ffmpeg = createFFmpeg({
corePath: 'ffmpeg-core.js',
log: false,
logger: ({ type, message }) => {
console.log('🚀🚀 ~ message', message);
console.log('🚀🚀 ~ type', type);
}
})

获取进度

如何获取上传文件的进度呢,可以通过 ​​ffmpeg.setProgress​

ffmpeg.setProgress(({ ratio }) => {
console.log('🚀🚀 ~ ratio', ratio);
});

【实战技巧】前端利用 ffmpeg 播放本地视频_FFmpeg_04

也可以直接在创建实例的时候传入 ​​progress​​ 属性,效果是一样的。

const ffmpeg = createFFmpeg({
corePath: 'ffmpeg-core.js',
log: false,
progress: ({ ratio }) => {
console.log('🚀🚀 ~ ratio', ratio);
}
})

解决错误

如果产生下面这个错误

【实战技巧】前端利用 ffmpeg 播放本地视频_ide_05

本地开发的时候需要在 ​​vue.config.js​​ 中添加

devServer: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
},
}

如果是 ​​vite​​​ 的项目这样修改 ​​vite.config.ts​

plugins: [
vue(),
vueJsx(),
{
name: 'configure-response-headers',
configureServer: server {
server.app.use('/node_modules/',(_req, res, next) => {
res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
next();
});
}
}
],

部署的时候需要配置 ​​nginx​​ 或者在后端配置。

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

本地上传视频

上传文件功能我们用 ​​IView​​ 组件库的上传组件,组件库基本都有上传组件,道理是一样的。

页面组件 ​​main.vue​

<template>
<div style="width:100%; height:100%; background-color: #DAE4E4;padding:50px">
<upload-btn @before-upload="beforeUpload"></upload-btn>
<video-ref :video-file-url="videoFileUrl"></video-ref>
</div>
</template>

<script>import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
import videoRef from '../../components/video/Video.vue'
import UploadBtn from '../../components/video/UploadBtn.vue'

export default {
data() {
return {
ffmpeg: {},
videoFileUrl: "",
}
},
components: {
videoRef,
UploadBtn
},
computed: {},
methods: {
// 页面初始化逻辑
async init() {
await this.initFfmpeg()
},
// 初始化 ffmpeg 功能
async initFfmpeg() {
this.ffmpeg = createFFmpeg({
corePath: 'ffmpeg-core.js',
log: true,
})
},
// 上传文件前的钩子
async beforeUpload(file) {
console.log('🚀🚀 beforeUpload ~ file', file);
await this.ffmpeg.load();
await this.getVideoFileUrl(file)
},
async getVideoFileUrl(file) {
// 获取资源文件
const result = await fetchFile(file)
console.log('🚀🚀 ~ result', result);
// 对于 ffmpeg.wasm 的输入/输出文件,需要先将它们保存到 MEMFS 以便 ffmpeg.wasm 能够使用它们
this.ffmpeg.FS('writeFile', `${file.name}`, result);
await this.ffmpeg.run('-i', `${file.name}`, '-acodec', 'aac', '-vcodec', 'libx264', '-y', `${file.name.split('.')[0]}.mp4`);
// 在内存中读取文件
const data = this.ffmpeg.FS('readFile', `${file.name.split('.')[0]}.mp4`);
// 获取内存中的播放地址
this.videoFileUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
console.log('🚀🚀 ~ this.videoFileUrl', this.videoFileUrl);
}
},
async mounted() {
// 页面初始化逻辑
await this.init()
}
}
</script>

子组件上传按钮 ​​UploadBtn.vue​

<template>
<div class="upload-btn">
<i-upload :before-upload="beforeUpload"
:show-upload-list="false"
action=""
name="file"
accept="video/*">
<i-button>点击上传视频</i-button>
<br>
<br>
</i-upload>
</div>
</template>

<script>export default {
methods: {
// 上传文件前的钩子
async beforeUpload(file) {
this.$emit("before-upload", file)
},
}
}
</script>

子组件视频播放器 ​​Video.vue​

// 播放视频我们采用 `HTML5` 原生标签 `video`。
<template>
<div class="video-box">
<video id="videoRef"
ref="videoRef"
v-if="videoFileUrl"
class="videoRef"
controls>
<source :src="videoFileUrl"
type="video/mp4"
</video>
</div>
</template>

<script>export default {
props: {
videoFileUrl: {
default: () => (''),
},
},
}
</script>

举报

相关推荐

0 条评论