搜索
 找回密码
 立即注册

ffmpeg实现web在线转码播放

音视频开发进阶 2022-7-14 20:37:33 432

前提: 公司项目中上传的视频编码格式不一,但是在浏览器播放中,却出现了黑屏(有声音)的情况,即使是MP4格式的视频,也存在无法播放,查询一番,了解到chrome浏览器的video标签仅对部分格式的视频支持播放

通常我们使用MP4格式,但是MP4又分为“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三种类型。其中只有H264类型的视频才能进行html播放 标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

注释:Internet Explorer 8 以及更早的版本不支持 video 标签。

使用FFMPEG转码

预览地址: 642134542.github.io/vue-ffmpeg/

1、原理:

ffmpeg.wasm 是 FFmpeg 的纯 WebAssembly / JavaScript 端口。它支持在浏览器内录制、转换和流式传输视频和音频。

Webassembly 的出现为前端转码提供可能

2、按照官网配置

2.1 npm安装

<pre class="public-DraftStyleDefault-pre" data-offset-key="dos0i-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="dos0i-0-0"><div data-offset-key="dos0i-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="dos0i-0-0"><span data-text="true">npm install @ffmpeg/ffmpeg @ffmpeg/core</span></span></div></pre></pre>

2.2 html

<pre class="public-DraftStyleDefault-pre" data-offset-key="2pf1t-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="2pf1t-0-0"><div data-offset-key="2pf1t-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="2pf1t-0-0"><span data-text="true"><div>

   <h3>Upload a video to transcode to mp4 (x264) and play!</h3>

   <video id="output-video" controls ></video><br/>

   <input type="file" id="uploader">

   <p id="message"></p>

  </div>

</span></span></div></pre></pre>

2.3 js

<pre class="public-DraftStyleDefault-pre" data-offset-key="dekk-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="dekk-0-0"><div data-offset-key="dekk-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="dekk-0-0"><span data-text="true">const { createFFmpeg, fetchFile } = FFmpeg;

const ffmpeg = createFFmpeg({

    corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',

    log: true,

 });

 const transcode = async ({ target: { files } }) => {

   const message = document.getElementById('message');

     const { name } = files[0];

      message.innerHTML = 'Loading ffmpeg-core.js';

     await ffmpeg.load();

      ffmpeg.FS('writeFile', 'name', await fetchFile(files[0]));

      message.innerHTML = 'Start transcoding';

     await ffmpeg.run('-i', 'name', 'output.mp4');

      message.innerHTML = 'Complete transcoding';

     const data = ffmpeg.FS('readFile', 'output.mp4');

     const video = document.getElementById('output-video');

      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

   }

   const elm = document.getElementById('uploader');

   elm.addEventListener('change', transcode);

</span></span></div></pre></pre>

3、结果

页面可以正常加载和上传,但是在转码过程中报错了

ReferenceError: SharedArrayBuffer is not defined,

所以需要解决SharedArrayBuffer报错

添加图片注释,不超过 140 字(可选)

兼容性查看caniuse.com/?search=Sha…

添加图片注释,不超过 140 字(可选)

可以看到SharedArrayBuffer是支持谷歌浏览器79版本以上 那么,为什么这里会出现SharedArrayBuffer is not defined的报错信息呢 经过一番百度和查看issue, 是因为谷歌浏览器的安全策略机制改变了 2017.7月(Chrome 60)引入 SharedArrayBuffer。 2021.7月(Chrome 92)限制 SharedArrayBuffer只能在 cross-origin isolated 页面使用。 Android Chrome 88 也进行了同样的限制。 从上述结论中,可以知道在60-91的版本的浏览器是可以正常打开的 那么92版本的呢 在vue-cli开发环境中我们可以再vue.config.js中配置

<pre class="public-DraftStyleDefault-pre" data-offset-key="17qgq-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="17qgq-0-0"><div data-offset-key="17qgq-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="17qgq-0-0"><span data-text="true">devServer: {   headers: {       "Cross-Origin-Opener-Policy": "same-origin",       "Cross-Origin-Embedder-Policy": "require-corp",     }, }

</span></span></div></pre></pre>

4、效果

在控制台中可以看到读取文件和转码进程,

而且页面可以正常的显示视频并播放

添加图片注释,不超过 140 字(可选)

5、优化:

5.1、corePath

createFFmpeg中的corePath的地址是cdn在线的,这里我们需要换成自己的本地资源,

但是使用import一直报错

估计是相关依赖并没有找到,npm install还是不行

只好把包里的ffmpeg-core.js、ffmpeg-core.wasm和ffmpeg-core.worker.js放在public中

5.2、加载

读取文件和转码的时间比较长,所以我们需要增加加载层和进度条

<pre class="public-DraftStyleDefault-pre" data-offset-key="9qehd-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="9qehd-0-0"><div data-offset-key="9qehd-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="9qehd-0-0"><span data-text="true">ffmpeg.setProgress(({ ratio }) => {

  console.log(ratio);

  this.percentage = Math.floor(ratio * 100)

  /*

  * ratio is a float number between 0 to 1.

  */

});

</span></span></div></pre></pre>

6、部署:

使用ip或者域名访问,依旧会报错SharedArrayBuffer is not defined,所以我们需要代理中配置请求头

<pre class="public-DraftStyleDefault-pre" data-offset-key="oskb-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="oskb-0-0"><div data-offset-key="oskb-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="oskb-0-0"><span data-text="true">add_header Cross-Origin-Opener-Policy same-origin;

add_header Cross-Origin-Embedder-Policy require-corp;

</span></span></div></pre></pre>

但是还是存在报错信息

解决办法: 1、使用https代替http 2、使用chrome 60-91版本访问 7、可能存在报错信息 7.1、caught (in promise) Error: Oops, something went wrong in FS operation

解决办法: 不要使用中文名称,将name可以进行转义

7.2、Error: ffmpeg.FS('readFile', 'output.mp4') error. Check if the path exists

解决办法:同问题1 7.3、github page无法设置header请求头,预览地址是如何解决SharedArrayBuffer报错的 在Stack Overflow这个问题中 有个回答提供了解决方案 github.com/gzuidhof/co… 开发者只需要将coi-serviceworker.js在index.html引入即可

<pre class="public-DraftStyleDefault-pre" data-offset-key="brbqr-0-0"><pre class="Editable-styled" data-block="true" data-editor="8fsth" data-offset-key="brbqr-0-0"><div data-offset-key="brbqr-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="brbqr-0-0"><span data-text="true"><script src="coi-serviceworker.js"></script></span></span></div></pre></pre>

参考链接:

1、juejin.cn/post/701696…

原文链接:https://juejin.cn/post/7078898276203757581

使用道具 举报

随机推荐

0 回复

游客
返回顶部