Vue3中使用ffmpeg.wasm进行转码

一、安装方法

       1.1 使用yarn进行安装

yarn add @ffmpeg/ffmpeg @ffmpeg/core

       1.2 安装版本

             注意安装版本需在0.12.0以上版本才可以使用下面代码(目前更新到0.12.10),之前的版本代码使用方法有所不同(0.12.10之后的版本也可能会有变动)

二、代码

       1.1 引用和声明

import { FFmpeg } from "@ffmpeg/ffmpeg";const ffmpeg = new FFmpeg();

      1.2 加载

  if (!isLoadFfmpegCore) {messageText.value = "加载ffmpeg-core.js";await ffmpeg.load({coreURL: "/static/esm/ffmpeg-core.js",    });isLoadFfmpegCore = true;}

     1.3 对url格式的网络视频转码

const changeFormat = async (url) => {const response = await fetch(url);const blob = await response.blob();const name = "1.mp4";if (!isLoadFfmpegCore) {messageText.value = "加载ffmpeg-core.js";await ffmpeg.load({coreURL: "/static/esm/ffmpeg-core.js",});isLoadFfmpegCore = true;}await ffmpeg.writeFile(name, new Uint8Array(await readFromBlobOrFile(blob)));await ffmpeg.exec(["-i", name, `${111}.mp4`]);isTranscoding = false;const data = await ffmpeg.readFile(`${111}.mp4`);videoSrc.value = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
};
const readFromBlobOrFile = (blob) =>new Promise((resolve, reject) => {const fileReader = new FileReader();fileReader.onload = () => {resolve(fileReader.result);};fileReader.onerror = ({target: {error: { code },},}) => {reject(Error(`File could not be read! Code=${code}`));};fileReader.readAsArrayBuffer(blob);});

1.4 对本地文件视频转码

    其他代码与网络视频类似,这里贴出读取文件代码

const fetchFile = async (_data) => {let data = _data;if (typeof _data === "undefined") {return new Uint8Array();}if (typeof _data === "string") {/* From base64 format */if (/data:_data\/([a-zA-Z]*);base64,([^"]*)/.test(_data)) {data = atob(_data.split(",")[1]).split("").map((c) => c.charCodeAt(0));/* From remote server/URL */} else {const res = await fetch(new URL(_data, import.meta.url).href);data = await res.arrayBuffer();}/* From Blob or File */} else if (_data instanceof File || _data instanceof Blob) {data = await readFromBlobOrFile(_data);}return new Uint8Array(data);
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/509979.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android内存优化总结

最近遇到视频播放的时候,内存居高不下的问题。没有崩溃,没有anr,功能一切正常。唯独内存一直攀升。 小总结下: 1.fragment 在activity全局变量被依赖,虽然调用fragment.onDestory了,但无法真正回收。 2.fragment 内部…

教师跨市调动难吗

当你站在三尺讲台,眼前是孩子们求知若渴的眼神,你是否曾想过,有一天你会离开这片熟悉的土地,踏上一段全新的教育征途?跨市调动,对于许多教师而言,是一个充满挑战与机遇的选择。 不得不说&#x…

滑动窗口

题目 思路 对于一个数组区间的最值,可以开辟一个队列记录(当然这里不能叫队列只是和队列相似,习惯性叫法)。 每个区间的最值等于队首元素。扫描数组时,如果该元素大于队尾元素(取最大值时)将该队尾元素出队…

2024洗地机选购攻略 | 洗地机好用吗?洗地机如何挑选?

在众多清洁工具中,洗地机以其卓越的清洁能力和便捷的操作方式,获得了广泛关注。2024年,市场上涌现出众多品牌的洗地机,但哪些品牌的洗地机值得推荐呢?在这里,我们将详细探讨几个备受好评的洗地机品牌&#…

[动态规划]---part1

前言 作者:小蜗牛向前冲 专栏:小蜗牛算法之路 专栏介绍:"蜗牛之道,攀登大厂高峰,让我们携手学习算法。在这个专栏中,将涵盖动态规划、贪心算法、回溯等高阶技巧,不定期为你奉上基础数据结构…

宗庆后去世,钟睒睒被骂农夫与蛇

作者:翻篇 琥珀酒研社快评: 宗庆后去世后 娃哈哈销量暴涨 而农夫山泉销量暴跌 创始人钟睒睒 被网友骂成农夫与蛇 这是咋回事呢 钟睒睒没成为娃哈哈代理前 跟很多创业者一样 做啥啥不成 摆地摊不够回本 种蘑菇没有销路 就在他走投无路时 遇…

ORA-00600 [17147] patch 33093098它来了

文章目录 前言一、Opatch的更新二、集群重启 前言 书接上回:https://blog.csdn.net/weixin_41607523/article/details/136021914?spm1001.2014.3001.5501 针对一直报错的600 很是苦恼,重启了n回之后还是会在几天之后继续报错,为排除所有可能…

土壤数据合集:全国各省土壤类型分布矢量数据+中国土壤质地空间分布数据+中国土壤侵蚀空间分布数据

给大家分享3份土壤数据 1、全国各省土壤类型分布矢量数据 2、中国土壤质地空间分布数据 3、中国土壤侵蚀空间分布数据 #1全国各省土壤类型分布矢量数据 本数据包括两个数据集: (1)1:400万中国土壤图(2000), (2&…

WordPress免费的远程图片本地化下载插件nicen-localize-image

nicen-localize-image(可在wordpress插件市场搜索下载),是一款用于本地化文章外部图片的插件,支持如下功能: 文章发布前通过编辑器插件本地化 文章手动发布时自动本地化 文章定时发布时自动本地化 针对已发布的文章…

Xcode :Could not build module ‘WebKit‘ 已验证解决

问题&#xff1a;Could not build module WebKit 具体报错如下&#xff1a; error: type argument nw_proxy_config_t (aka struct nw_proxy_config *) is neither an Objective-C object nor a block type property (nullable, nonatomic, copy) NSArray<nw_proxy_config_…

【知识整理】Git 使用实践问题整理

问题1、fatal: refusing to merge unrelated histories 一、Git 的报错 fatal: refusing to merge unrelated histories 新建了一个仓库之后&#xff0c;把本地仓库进行关联提交、拉取的时候&#xff0c;出现了如下错误&#xff1a; fatal: master does not appear to be a g…

TikTok外贸系统的核心功能及其源代码分享!

随着全球化的不断推进&#xff0c;外贸业务成为越来越多企业的增长动力&#xff0c;TikTok作为一个全球性的社交媒体平台&#xff0c;其用户基数庞大、活跃度高&#xff0c;为外贸业务提供了无限的商机。 为了帮助企业在TikTok上更好地开展外贸业务&#xff0c;TikTok外贸系统…