当前位置：首页 > news >正文

【开源力荐】一款基于web的可视化视频剪辑工具

news 2025/9/14 10:08:16

嗨, 大家好, 我是徐小夕.

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

H5-Dooring（页面可视化搭建平台）
V6.Dooring（可视化大屏搭建平台）
橙子试卷（表单搭建引擎）
Nocode/WEP 文档知识引擎

最近在研究可视化技术的时候, 又发现一款非常神奇的开源项目, 它是一款基于 web 的视频可视化剪辑工具, 我们可以使用它轻松实现自己的 web 视频编辑器, 并且代码采用vue3 实现, 非常符合大家的口味.

它就是——fly-cut.

fly-cut 使用 webcodecs 实现 Web 端视频编辑工具，类似剪映Web版。底层前端采用vue3框架, 接下来先和大家演示一下这款开源项目.

demo演示

我们可以上传图片或者视频, 在编辑器中进行二次编辑, 同时它还支持多种媒体轨道, 也可以对音频进行编辑.

github地址: https://github.com/x007xyz/fly-cut

核心技术栈分析

我研究了一下这个项目的 github 代码, 和大家分享几个核心技术栈, 大家也可以基于他们应用在自己的项目中:

@ckpack/vue-color：是在 Vue 应用中处理颜色相关功能的插件。
@element-plus/icons-vue：提供 Element Plus 框架的图标组件。
@leafer-in/editor 和 @leafer-in/view：图像编辑器和视图相关组件或模块。
@vueuse/core：提供一系列实用的 Vue 组合式函数。
@webav/av-canvas 和 @webav/av-cliper：视频或图像处理库。
axios：用于进行 HTTP 请求的库。
element-plus：Vue 组件库。
leafer-ui：可能是图像编辑器的 UI 组件库。
lodash-es：提供实用工具函数。
opfs-tools：特定文件系统或工具相关的工具。
pinia：用于 Vue 应用的状态管理。
spark-md5：用于计算 MD5 哈希值。
vue：前端MVVM框架。
vue-hooks-plus：可能提供一些额外的 Vue 钩子函数。
vue-router：用于 Vue 应用的路由管理。
vue3-moveable：用于实现可移动的组件或元素。
wavesurfer.js：用于音频相关的处理或展示。

技术交流

最近建了一个独立开发者社群, 感兴趣的小伙伴可以加入交流独立开发的一二.

后期规划

大家对于今天的分享有好的建议, 也欢迎随时和我反馈交流~

最近也独立了一款可视化文档编辑器, 类似飞书和Notion.

体验地址: http://react-flow.com/docx

后续我也会持续迭代 H5-Dooring 零代码项目，让它成为最好用的可视化 + 无代码应用搭建工具，如果大家感兴趣，也随时欢迎留言区反馈交流~

往期精彩

零代码+AI的阶段性复盘
文档引擎+AI可视化打造下一代文档编辑器
爆肝1000小时, Dooring零代码搭建平台3.5正式上线
从零打造一款基于Nextjs+antd5.0的中后台管理系统

【开源力荐】一款基于web的可视化视频剪辑工具

嗨, 大家好, 我是徐小夕. 之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如： H5-Dooring（页面可视化搭建平台）V6.Dooring（可视化大屏搭建平台）橙…...

编程日记 2024/8/15 15:28:25

鸿萌数据恢复服务: 如何修复 SQL Server 数据库错误 829？

天津鸿萌科贸发展有限公司从事数据安全服务二十余年，致力于为各领域客户提供专业的数据恢复、数据备份、网络及终端数据安全等解决方案与服务。同时，鸿萌是众多国际主流数据恢复软件(Stellar、UFS、R-Studio、ReclaiMe Pro 等)的授权代理商&#xff0c…...

编程日记 2024/8/15 15:27:23

OpenCV图像处理——按最小外接矩形剪切图像

引言在图像处理过程中，提取感兴趣区域（ROI）并在其上进行处理后，往往需要将处理后的结果映射回原图像。这一步通常涉及以下几个步骤： 找到最小外接矩形：使用 cv::boundingRect 或 cv::minAreaRect 提取感兴…...

编程日记 2024/8/15 15:24:20

《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark

1.简介按照以前的讲解和分享路数，宏哥今天就应该从外观上来讲解WireShark的界面功能了。 2.软件界面由上到下依次是标题栏、主菜单栏、主菜单工具栏、显示过滤文本框、打开区、最近捕获并保存的文件、捕获区、捕获过滤文本框、本机所有网络接口、学习区及用户指…...

编程日记 2024/8/15 15:21:16

调用yolov3模型进行目标检测

要调用已经训练好的YOLOv3模型对图片进行检测，需要完成以下几个步骤： 加载预训练模型：从预训练的权重文件中加载模型。准备输入图片：将图片转换为模型所需的格式。进行推理：使用模型对图片进行推理，得到检…...

编程日记 2024/8/15 15:18:12

linux文件——重定向原理——dup、重定向与execl、VFS

前言：本篇讲解linux下的重定向相关内容。在本篇中， 博主将会带着友友们一边实验， 一边探索底层原理。通过本篇的学习， 友友们将会了解到重定向是如何实现的， 重定向的本质是什么， 重定向和进程替换之间的…...

编程日记 2024/8/15 15:15:09

【STM32 FreeRTOS】任务

使用 RTOS 的实时应用程序可以被构建为一组独立的任务。每个任务在自己的上下文中执行，不依赖于系统内的其他任务或 RTOS 调度器本身。在任何时间点，应用程序中只能执行一个任务，实时 RTOS 调度器负责决定所要执行的任务。因此， R…...

编程日记 2024/8/15 15:13:06

Java面试--框架--Spring MVC

Spring MVC 目录 Spring MVC1.spring mvc简介2.spring mvc实现原理2.1核心组件2.2工作流程 3.RESTful 风格4.Cookie，Session4.1 会话4.2 保存会话的两种技术 5.拦截器5.1过滤器、监听器、拦截器的对比5.2 过滤器的实现5.3 拦截器基本概念5.4 拦截器的实现 1.spring …...

编程日记 2024/8/15 15:10:00

土壤水分监测系统的工作原理

TH-TS200土壤水分监测系统是一种在地球科学、农学等领域广泛应用的分析仪器，它主要用于监测土壤中的水分含量，为农业生产、水资源管理、环境保护等提供重要数据支持。通常包括数据采集器、土壤水分传感器、土壤温度传感器(部分系统配备)、计算机软件以及…...

编程日记 2024/8/15 15:07:58

k8s学习--如何控制pod调度的位置

文章目录一、Pod 调度基础二、通过节点选择器 (Node Selector) 控制调度三、使用节点亲和性 (Node Affinity)四、使用污点和容忍 (Taints and Tolerations)五、Pod 反亲和性 (Pod Anti-Affinity) 总结在 Kubernetes (K8s)中，Pod 是应用运行的最小单位&#xff0…...

编程日记 2024/8/15 15:06:57

基于mysqldump的MySQL数据库异地备份方案（含完整脚本和解释）

MySQL数据库异地备份方案 0 文档描述本文描述了一个数据库异地备份方案，以下脚本代码都是在线上应用的本文以CentOS7为例，其他系统请自行查询安装命令如果评论有需求，我就对应系统做一下文档 1 基本原理 1.1 流程原理本身很简单&#…...

编程日记 2024/8/15 15:05:56

C语言中10个字符串函数详解

目录 1.strlen 2.strcpy 3.strcat 4.strcmp 5.strncpy 6.strncat 7.strncmp 8.strstr 9.strtok 10.strerror 1.strlen 基本结构：size_t strlen(const char *str)；功能：用于计算字符串的长度；字符串已经 0作为结束标志…...

编程日记 2024/8/15 15:03:53

flume系列之：查询多个flume agent组是否有topic重复接入情况

flume系列之：查询多个flume agent组是否有topic重复接入情况一、查询zk节点下的flume agent组二、获取采集的topic三、获取重复接入的topic，支持设置重复接入白名单四、执行流程五、完整代码一、查询zk节点下的flume agent组 def get_flumeAgent_zkPath(zkRootPaths):for z…...

编程日记 2024/8/15 15:02:52

Windows自动化1️⃣环境搭建WinAppDriver

对于技术选型: 我尝试了, pywinauto, WinAppDriver,CukeTest 担心CukeTest可能会收费, 尝试pywinauto,在元素点击,搜索时, 遇到不可用情况; WinAppDriver是微软家的,大厂开源, 就它了! 步骤一：安装WinAppDriver 进入WinAppDriver下载页面（https://githu…...

编程日记 2024/8/15 15:01:51

云服务器Docker内部署服务后，端口无法访问?

云服务器Docker内部署服务后，端口无法访问，可以按照以下思路进行排查： 以【docker run --name my-nginx -d -p 9395:80 nginx】举例： 查看Docker映射是否正确，可使用docker ps命令查看。Docker是否设置端口映射&#…...

编程日记 2024/8/15 15:00:50

Unity将摄像机视角保存成Json文件方便读取使用

系列文章目录 unity工具文章目录系列文章目录👉前言👉一、设置环境👉二、代码如下👉三、使用方法 👉四、下次外部调用json里面的摄像机位置的时候如下代码方法👉壁纸分享👉总结 &#x1f449…...

编程日记 2024/8/15 14:59:49

git是什么/基本指令

git作用去中心化， 分布式版本控制器新增术语：仓库区， 工作区， 暂存区具体见下板书常用git命令 git clone 仓库网址 git status 查看仓库状态 git add newfile 临时添加到git仓库 git commit -m 正式添加git仓库 g…...

编程日记 2024/8/15 14:58:47

Linux 中的同步机制

代码基于：Kernel 6.6 临界资源：指哪些在同一时刻只允许被一个线程访问的软件或硬件资源。这种资源的特点是，如果有线程正在使用，其他进程必须等待直到该线程释放资源。临界区：指在每个线程中访问临界资源的那段代码。…...

编程日记 2024/8/15 14:57:46

Day17 枚举、typedef、位运算、堆空间的学习

目录枚举 typedef 位运算堆上的空间枚举一个一个列举出来，是指将变量的值一一列举出来，变量的值只限于列举出来的值的范围内。作用： 1、为了提高代码的可读性 2、提高代码的安全性枚举类型基本语法： enum 枚举名 { …...

编程日记 2024/8/15 14:56:44

Python爬虫与数据分析：中国大学排名的深度挖掘

前言 👉 小编已经为大家准备好了完整的代码和完整的Python学习资料，朋友们如果需要可以扫描下方CSDN官方认证二维码或者点击链接免费领取【保证100%免费】一、选题背景高考作为中国学生生涯中最为重要的事，在高考之后，选择一所…...

编程日记 2024/8/15 14:55:43

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2025/9/14 1:39:42

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/9/12 22:07:46

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/8/22 22:34:43

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。一、通道的基本分类类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

C#学习第29天：表达式树（Expression Trees）

目录什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写适用场景代码复杂性…...

编程新知 2025/7/21 4:21:36

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐：「storms…...

编程新知 2025/9/4 11:09:31

SpringAI实战：ChatModel智能对话全解

一、引言：Spring AI 与 Chat Model 的核心价值 🚀 在 Java 生态中集成大模型能力，Spring AI 提供了高效的解决方案 🤖。其中 Chat Model 作为核心交互组件，通过标准化接口简化了与大语言模型（LLM&#xff0…...

编程新知 2025/8/15 15:26:54

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库，用于数据验证和设置管理，通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发（如 FastAPI）、配置管理和数据解析，核心功能包括： 数据验证：通过…...

编程新知 2025/9/12 8:55:56

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤： 第一步： 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为： // 改为 v…...

编程新知 2025/8/11 12:42:01

demo演示

我们可以上传图片或者视频, 在编辑器中进行二次编辑, 同时它还支持多种媒体轨道, 也可以对音频进行编辑.

github地址: https://github.com/x007xyz/fly-cut

核心技术栈分析

我研究了一下这个项目的 github 代码, 和大家分享几个核心技术栈, 大家也可以基于他们应用在自己的项目中:

相关文章：