Vue3中使用ffmpeg.wasm进行转码

news2024/9/22 21:36:38

一、安装方法

       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.coloradmin.cn/o/1488610.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【AIGC】如何提高Prompt准确度

前言 随着人工智能的迅猛进展,AIGC(通用人工智能聊天工具)已成为多个行业中不可或缺的自然语言处理技术。Prompt作为AIGC系统的一项关键功能,在工具的有效运作中发挥了举足轻重的作用。本篇文章将深入探讨Prompt与AIGC之间的紧密…

2024智能遥控器行业市场规模及技术水平分析

智能遥控器,主要是由集成电路板和用来生产不同讯息的按钮所组成,内装有一个中央处理器芯片,芯片在制造时就将设备各种菜单码值信息输入其中,遥控发射器只要发出与之对应的密码就可以实现对设备的控制。无线遥控技术原理就是发射机…

内存飙高问题如何排查?

目录 1、查看日志 2、查看GC情况 3、分析堆内存对象占用情况 4、分析堆内存快照文件 内存飙高如果发生在java进程上,一般情况是因为创建了大量对象导致,持续飙高说明垃圾回收跟不上对象创建的速度,或者内存泄漏导致对象无法被回收&#x…

案例介绍:汽车售后服务网络构建与信息抽取技术应用(开源)

一、引言 在当今竞争激烈的汽车行业中,售后服务的质量已成为品牌成功的关键因素之一。作为一位经验丰富的项目经理,我曾参与构建一个全面的汽车售后服务网络,旨在为客户提供无缝的维修、保养和配件更换服务。这个项目的核心目标是通过高效的…

【CFD小工坊】尝试完成一个简单的溃坝流算例(1)

【CFD小工坊】尝试完成一个简单的溃坝流算例(1) 前言算例简介网格生成数据的读入与输出模型参数的读入网格数据及结果数据的输出 前言 我们从一个简单的算例开始,从实际建模过程中学习和做代码。我选择的算例是一个矩形区域内的溃坝流&#…

ES入门六:Suggesters Api实践

都是负担在很多app上,当我们输入某些内容时候,它会立即做一些补全操作,如果我想实现上述的需求,我们就可以使用ES提供的Suggesters Api。那Suggesters是如何做到的那?简单来说,Suggesters会将输入的文本拆分…

每日一练:LeeCode-707. 设计链表 【链表+虚拟头结点+设计】

每日一练:LeeCode-707. 设计链表 【链表虚拟头结点设计】 思路设置虚拟头节点 本文是力扣 每日一练:LeeCode-707. 设计链表 【链表虚拟头结点设计】 学习与理解过程,本文仅做学习之用,对本题感兴趣的小伙伴可以出门左拐LeeCode-70…

Rabbitmq消息丢失-消费者消息丢失(二)

说明:消费端在处理消息的过程中出现异常,例如:业务逻辑异常,或者消费者被停机,或者网络断开连接等,以上等情况使消息没有得到正确恰当的处理,也会使消息丢失。 分析:分析就是说明中…

中科数安|防止电脑文件资料外泄

#防止电脑文件资料泄漏# 中科数安提供了一系列解决方案来防止电脑文件资料外泄。 www.weaem.com 这些解决方案包括以下几个方面: 访问控制:实施严格的文件访问控制,确保只有授权的人员能够访问和编辑核心文件。使用身份验证和权限管理系统&a…

Android APK包反编译为java文件教程

方法 流程: test.apk -> smali文件 -> dex文件 -> jar文件 ->java 文件 将APK包解压为 smail文件 下载 apktool工具 apktool.jar 将 test.apk 和 apktool.jar放同一目录下,并执行以下命令 java -jar apktool.jar d -f xxx.apk -o xxx(解…

30、类和接口

文章目录 接口概念接口和类之间有何关系? 可以使用接口来约束类接口继承接口接口还可以继承类接口为什么可以继承类内层原因:接口为什么可以继承类 用得出的结论解释最初的demo接口继承类的一些限制 接口概念 接口(Interfaces)可…

SAP PP学习笔记 - 豆知识07 - 如何查看BOM一览

SAP标准提供了CS03,只能查询单个的BOM,如果想查看一览,只能自己写SQVI 查询。 有其他高招的童鞋,请赐教啊。 1,SQVI 工具 SAP MM学习笔记18- SQVI 工具_sap sqvi-CSDN博客 输入查询名,然后点击 登录 2&a…

C++学习笔记:set和map

set和map set什么是setset的使用 关联式容器键值对 map什么是mapmap的使用map的插入方式常用功能map[] 的灵活使用 set 什么是set set是STL中一个底层为二叉搜索树来实现的容器 若要使用set需要包含头文件 #include<set>set中的元素具有唯一性(因此可以用set去重)若用…

Linux高级编程:进程间的通信(二)、IPC

回顾 共7种方式&#xff1a; 古老的进程间通信方式&#xff1a; 管道&#xff1a; 无名管道 有名管道 信号 系统V IPC进程对象 共享内存 消息队列 信号量集 socket通信 //网络 ------------------------- 无名管道 pipe&#xff08;&#xff09; 特点&#xff1a; 用于…

CSS3笔记

1.相同优先级的样式以写在后面的为主。 2.交集选择器&#xff0c;并且 条件挨在一起 p.rich{...} /*p元素class有rich的元素*/ 3.并集选择器&#xff0c;或者 逗号隔开 .class1,class2{...}/*满足其中一个类名都会使用该样式*/ 4.后代选择器 空格 隔开 所有符合的包括孙子及…

揭秘App访问量背后的秘密:数据统计与分析

在移动互联网时代&#xff0c;App已成为人们日常生活的重要组成部分。对于App运营者来说&#xff0c;了解用户的访问量、行为习惯等数据至关重要。本文将深入探讨如何精准统计App访问量&#xff0c;为运营者提供有价值的数据支持。 一、App访问量统计的重要性 访问量是衡量A…

2024年【焊工(初级)】找解析及焊工(初级)考试技巧

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 焊工&#xff08;初级&#xff09;找解析是安全生产模拟考试一点通生成的&#xff0c;焊工&#xff08;初级&#xff09;证模拟考试题库是根据焊工&#xff08;初级&#xff09;最新版教材汇编出焊工&#xff08;初级…

【EAI 027】Learning Interactive Real-World Simulators

Paper Card 论文标题&#xff1a;Learning Interactive Real-World Simulators 论文作者&#xff1a;Mengjiao Yang, Yilun Du, Kamyar Ghasemipour, Jonathan Tompson, Leslie Kaelbling, Dale Schuurmans, Pieter Abbeel 作者单位&#xff1a;UC Berkeley, Google DeepMind, …

leetcode 移除链表元素

本题中&#xff0c;我们是要移除链表的某一个节点&#xff0c;为了确保统一操作&#xff0c;我们需要使用虚拟头节点&#xff0c;这样我们删除节点的时候&#xff0c;就是把这个要删除的节点&#xff08;当前节点cur&#xff09;的前一个节点pre&#xff0c;使得pre.next指向要…