ffmpeg online

概述

对，你没有看错，ffmpeg可以在浏览器中运行了👍👍👍。这里需要感谢WebAssembly。

遇到的问题

使用unpkg的问题

The FetchEvent for "https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js" resulted in a network error response: Cross-Origin-Resource-Policy prevented from serving the response to the client.

GET https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js net::ERR_FAILED

这个也不是每次都出现，刷新的时候，时不时冒出一次……还没有来得急研究为什么。你可以在script标签中添加crossorigin 属性。

cross-origin isolated

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined

跨域隔离，这是遇到的第二个问题。GitHub的介绍中也给出了解决办法：对应页面的响应头部添加两个选项。这里使用的是IIS，测试了一下果然没有问题。添加的headers如下：

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

这里衍生出另外一个问题：服务器是我们自己的，我们可以给页面响应添加header，但是如果服务器我们控制不了该怎么办（例如：GitHub中的页面）？抱着试试看的态度查了一下，还真找到解决办法，引一个JS就能搞定，这个真的觉得👍👍👍。感觉是服务器端的问题，但是现在一个JS搞定了。注意一下这个JS不能使用CDN的方式引入。参考链接：GitHub - gzuidhof/coi-serviceworker

这里遇到一个令人费解的问题：引入coi-serviceworker （引入方式是用script标签,src="/lib/coi-serviceworker/min.js"）之后,浏览器中第一次访问该页面时一直在自动刷新……不知道什么鬼。之后将该类库放到与该页面相同的文件夹下，此时在引入，访问页面就正常了……懵圈的是，在换成第一次的引入方式也没有问题了😅😅😅，停滞一段时间之后就又开始一直刷新了……

图片太大的问题

这是一个苦逼的问题，这个问题感觉自己弄这个有点鸡肋了。选了一张3.53MB的图片和10.2MB的音频，报错了😓😓😓。之后又换了一个组合108KB的图片和10.2MB的音频，这次成功了。3.53MB也不是太大吧！

Pthread aborting at Error

worker.js onmessage() captured an uncaught exception: RuntimeError: abort(OOM). Build with -s ASSERTIONS=1 for more info.

RuntimeError: abort(OOM). Build with -s ASSERTIONS=1 for more info.

Uncaught RuntimeError: abort(OOM). Build with -s ASSERTIONS=1 for more info.

赶紧试试吧

图片和音频合成视频

选择图片

选择音频

m3u8转视频

选择一个m3u8文件

输入m3u8文件地址

m3u8转视频没有跑成功，提示如下错误:

[fferr] https protocol not found, recompile FFmpeg with openssl, gnutls or securetransport enabled.

在官网上也找到了类似的问题：https protocol not found, recompile FFmpeg with openssl, gnutls or securetransport enabled. · Issue #219 · ffmpegwasm/ffmpeg.wasm · GitHub

记录一下这个链接：openssl - How to compile ffmpeg with https support - Ask Ubuntu