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);
};

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

链表相加(二)

题目 题目链接 链表相加(二)_牛客题霸_牛客网 题目描述 代码实现 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返回方法规定的值即可** * param head1 ListNode类 * param head2 ListNode类 * return ListNode…

4G/5G执法记录仪、智能安全帽走国标GB28181接入海康、宇视等大平台,也可走平台与平台对接,以下级平台级联到上级大平台

AIoT万物智联,智能安全帽生产厂家,执法记录仪生产厂家,智能安全帽、智能头盔、头盔记录仪、执法记录仪、智能视频分析/边缘计算AI盒子、车载DVR/NVR、布控球、智能眼镜、智能手电、无人机4G补传系统等统一接入大型融合通信可视指挥调度平台VM…

【算法分析与设计】被围绕的区域

📝个人主页:五敷有你 🔥系列专栏:算法分析与设计 ⛺️稳中求进,晒太阳 题目 给你一个 m x n 的矩阵 board ,由若干字符 X 和 O ,找到所有被 X 围绕的区域,并将这些区域里所有…

告别手动填写邀请码,这款App数据统计工具帮你轻松实现

在移动互联网时代,App的推广和运营已成为各大企业的必修课。然而,面对错综复杂的推广渠道和浩如烟海的数据,如何精准地追踪用户来源、优化推广策略,一直是困扰着运营者的难题。今天,我们就来聊聊一款能够帮助你轻松解决…

『Linux从入门到精通』第 ㉓ 期 - 管道

文章目录 💐专栏导读💐文章导读🐧进程间通信的目的🐧如何进行进程间通信🐧进程间通信的分类🐧管道🐦什么是管道🐦管道原理 🐧实例代码🐧管道的特点&#x1f4…

如何扫码查看图片信息?图片放到二维码展示的在线教学

现在通过扫码来查看物品图片是很常用的一种方式,将物品不同角度的图片存入一张二维码后,用户只需要扫描这张二维码图片,就可以了解物品预览图及其他信息。常用的图片格式比如jpg、png、gif都可以放到二维码中显示,那么具体该怎么做…

FreeCAD|建模常用命令

import FreeCAD as App import Part 1、创建点 V1 App.Vector(0, 10, 0) 2、创建线段 L1 Part.LineSegment(V1, V2) 3、创建圆弧 C1 Part.Arc(V1, VC1, V4) 4、创建Shape S1 Part.Shape([C1, L1, C2, L2]) 5、创建基本形状 makeBox(l, w, h, [p, d]) makeCircl…

C语言:qsort的使用方法

目录 1. qsort是什么? 2. 为什么要使用qsort 3. qsort的使用 3.1 qsort的返回值和参数 3.2 qsort的compare函数参数 3.3 int类型数组的qsort完整代码 4. qsort完整代码 1. qsort是什么? qsort中的q在英语中是quick,快速的意思了&#…

LeetCode_Java_动态规划系列(3)(题目+思路+代码)

338.比特位计数 给你一个整数 n &#xff0c;对于 0 < i < n 中的每个 i &#xff0c;计算其二进制表示中 1 的个数 &#xff0c;返回一个长度为 n 1 的数组 ans 作为答案。 class Solution {public int[] countBits(int n) {/** 思路&#xff1a;* 1.创建一个长度为 n…

智慧市容环境卫生管理信息系统建设项目初步设计参考指南

第四章项目建设方案 梳理和编制数据标准规范&#xff0c;为数据体系建设提供建设指导。数据标准规范体系是根据统一市容环卫基础数据资源建立的&#xff0c;从要素分类、编码、符号、制图、更新机制等层 面解决各类规划标准不衔接、各自为政问题。标准规范体系包括&#xff1…

回溯难题(算法村第十八关黄金挑战)

复原 IP 地址 93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0 到 255 之间组成&#xff0c;且不能含有前导 0&#xff09;&#xff0c;整数之间用 . 分隔。 例如&#xff1a;"0.1.2.201" 和 &q…

【计算机毕业设计】044学生管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

数据结构——算法与算法分析3,4

目录 1.分析算法时间复杂度的方法 举例&#xff1a; 1.数据集队时间复杂度的影响 2.空间复杂度 3.设计好算法的过程 1.分析算法时间复杂度的方法 举例&#xff1a; 1.数据集队时间复杂度的影响 一般只考虑最坏时间复杂度和平均时间复杂度 2.空间复杂度 3.设计好算法的过程…

【Android 内存优化】怎么理解Android PLT hook?

文章目录 前言什么是hook?PLT hook作用基本原理PLT hook 总体步骤 代码案例分析方案预研面临的问题怎么做&#xff1f;ELFELF 文件头SHT&#xff08;section header table&#xff09; 链接视图&#xff08;Linking View&#xff09;和执行视图&#xff08;Execution View&…

Vue使用高德地图定位到当前位置,并显示天气信息

首先得去高德控制台申请两个 key&#xff0c;一个天气key和一个定位key 获取天气信息的函数&#xff1a; const getWeather function (city) {// 使用 fetch 发送请求获取天气信息fetch(https://restapi.amap.com/v3/weather/weatherInfo?city${city}&keyeefd36557b0250…

二,几何相交----2,区间相交检测IID--(1)算法

对于空间的线段是否相交&#xff0c;假设都是与x平行&#xff0c;则需要三步 1&#xff0c;对各线段左右端点设置为L,R标志 2&#xff0c;从小到大进行排序 3&#xff0c;线性扫描&#xff0c;从小到大&#xff0c;根据模式判断是否相交&#xff0c;假设不相交&#xff0c;则应…

【JavaScript】面试手撕浅拷贝

【JavaScript】面试手撕浅拷贝 引入 浅拷贝和深拷贝应该是面试时非常常见的问题了&#xff0c;为了能将这两者说清楚&#xff0c;于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词&#xff0c;有种莫名的熟悉感&#xff0c;感觉跟某个英文很相似&#xff…

sc-MAVE

Deep-joint-learning analysis model of single cell transcriptome and open chromatin accessibility data单细胞转录组和开放染色质可及性数据的深度联合学习分析模型 在同一个细胞中同时分析转录组和染色质可及性信息为了解细胞状态提供了前所未有的解决方案。然而&#x…

WPS/Office 好用的Word插件-查找替换

例如&#xff1a;一片文档&#xff1a;…………泰山…………泰&#xff08;少打了山字&#xff09;………… 要是把“泰”查找替换为“泰山”&#xff0c;就会把前面的“泰山”变成“泰山山”&#xff0c;这种问题除了再把“泰山山”查找替换为“泰山”&#xff0c;有没有更简单…

Flutter输入框换行后自适应高度

Flutter输入框换行后输入框高度随之增加 效果 设计思想 通过TextEditingController在build中监听输入框&#xff0c;输入内容后计算输入框高度然后自定义适合的值&#xff0c;并且改变外部容器高度达到自适应高度的目的 参考代码 //以下代码中的值只适用于案例&#xff0c;…