❌

阅读视图

发现新文章，点击刷新页面。
☑️ ⭐

借助mediabunny纯JS实现视频水印、剪裁、合成等功能

✇张鑫旭-鑫空间-鑫生活
张 鑫旭

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12166
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、推荐使用mediabunny

大约2年前，我更新了大量的音视频处理的文章，不过里面的技术实现大都使用原生代码和WebCodecs API手搓的实现。

因为那个时候，WebCodecs API刚出来，技术还不成熟。

自然而然，就陆续出现了不少基于WebCodecs API封装的音视频处理框架。

经过这些年的发展，有一个媒体工具包异军突起，那就是mediabunny！

项目地址：https://github.com/Vanilagy/mediabunny

mediabubby logo

2个月前，我在微博介绍过的MP4/MOV视频转WebM格式在线工具就使用了此项目。

视频转格式截图

mediabunny的能力不仅仅在于视频格式转换与压缩，添加水印、时长剪裁等都不在话下，本文就通过我跑通的demo给大家看下这类需求该如何实现。

二、给视频添加水印

话不多说，先直接上手体验。

您可以狠狠地点击这里：纯前端实现视频添加水印效果demo

选择视频和需要的水印图片，就可以得到最终的效果了，如下截图所示：

水印合成效果示意

其中，最关键的合成就是下面这部分代码：

let ctx = null;
const conversion = await Conversion.init({
    input,
    output,
    video: {
        process: (sample) => {
            if (!ctx) {
                // 创建canvas
                const canvas = new OffscreenCanvas(
                    sample.displayWidth,
                    sample.displayHeight
                );
                ctx = canvas.getContext('2d');
            }

            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            sample.draw(ctx, 0, 0);
            ctx.drawImage(watermark, 80, 80 * watermark.naturalHeight / watermark.naturalWidth);

            return ctx.canvas;
        }
    }
});

使用Conversion.init解码视频的每一帧(sample)，然后使用canvas将画面和水印图重新绘制，再返回当前canvas即可。

其实不仅是水印合成，任何画面特效，字幕添加，遮罩，尺寸设置都可以使用此方法实现，原理都是一样的，都是对图像进行处理。

三、Video视频前后剪裁

同样的，先看实现效果。

您可以狠狠地点击这里：纯前端实现视频首尾剪裁demo

选择任意的视频，然后拖选滑竿选择需要的视频片段，点击红色的剪裁按钮，就可以看到被剪裁后的视频了：

剪裁demo示意

实际生产环境，拖拽的应该是缩列图的左右两个小翅膀，这里为了简化使用，使用了LuLu UI的双滑块模拟。

其核心实现代码极为简单：

const input = new Input({
    formats: ALL_FORMATS,
    source: new BlobSource(videoFile),
});
const output = new Output({
    format: new Mp4OutputFormat(), // The format of the file
    target: new BufferTarget(),
});

const eleRange = range.querySelector('input');  
const conversion = await Conversion.init({
    input,
    output,
    trim: {
        start: eleRange.from,
        end: eleRange.to,
    },
});

await conversion.execute();

使用trim参数，指定起止时间就可以了。

完整代码可以访问演示页面。

四、多音频和画面的视频合成

一例胜千言，您可以狠狠地点击这里：纯前端实现画面加音频的视频合成demo

默认提供了字幕、背景图、台词，背景音乐可选，用户可以自己上传，可以合成最终的视频：

视频合成demo截图

我查了下API，mediabunny中似乎缺少AudioBuffer处理方法，当然，也可能有，我自己没找到。

这里的AudioBuffer剪裁和合并用的是我自己之前手搓的方法。

相关源码在页面左侧（移动端在下方）有完整展示，基本上相关的视频合成都可以实现了。

这里提供下核心实现部分：

// 定义一个视频合成输出
const output = new Output({
    format: new Mp4OutputFormat(), 
    target: new BufferTarget(),
});

// 添加视频轨道，画面源自canvas
const videoSource = new CanvasSource(canvas, {
    codec: 'avc',
    bitrate: QUALITY_HIGH,
});
output.addVideoTrack(videoSource);

// 添加音轨
const audioSource = new AudioBufferSource({
    codec: 'aac',
    bitrate: QUALITY_HIGH,
});
output.addAudioTrack(audioSource);

await output.start();

// 获取音频文件
const duration = audioFile.duration;

// 每秒30帧
for (let frame = 0; frame < 30 * duration; frame++) {
    draw(frame);
    await videoSource.add(frame / 30, 1 / 30);
}

// 获取音频的 audioBuffer……（代码略），然后添加
await audioSource.add(audioBuffer);

await output.finalize();

五、广告时间

推荐下我几年前在掘金上更新的人文类课程《技术写作指南》。

技术写作指南

既是关于写作，也是关注个人成长！

OK，就说这么多，如果你觉得本文内容对你的工作与学习有所帮助，欢迎转发，点赞！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12166

（本篇完）

🔲 ⭐

Rust 还没进前十，TIOBE 就开始唱衰了？

✇Tony Bai
bigwhite

本文永久链接 – https://tonybai.com/2026/04/17/tiobe-ranking-and-the-decline-of-rust-hype

大家好，我是Tony Bai。

过去几年，技术圈最热门的“猜谜游戏”之一，就是预测 Rust 什么时候能杀入 TIOBE 排行榜的前十。

这门被誉为“天选之子”的语言，连续多年霸榜 Stack Overflow“最受喜爱”的宝座，被微软、亚马逊等巨头奉为重写底层基础设施的“银弹”。所有人都觉得，它冲进前十，只是时间问题。

但就在最近，TIOBE 指数发布了 2026 年 4 月的最新排名。

榜单本身平平无奇，Rust 的排名甚至还从去年同期的 18 位微升到了 今年的16 位。

然而，TIOBE 的 CEO Paul Jansen 亲自撰写的一篇社论，却像一盆冷水，劈头盖脸地浇在了所有 Rustacean（Rust 开发者）的头上。

Paul Jansen 用极其明确的措辞，给这门甚至还没来得及摸到前十门槛的语言，提前下了一份“病危通知书”：

“Rust 的崛起显示出放缓的迹象。……它进入前十的梦想，现在看来比以前更加遥远了。”

这篇社论，瞬间引爆了全网的讨论。

无数 Rust 开发者感到匪夷所思，甚至有些愤怒：我们还没真正发力，你怎么就开始唱衰了？

这背后，到底是 TIOBE 对技术趋势的精准预判，还是这把统治了我们十几年的“认知标尺”，已经彻底失灵了？

今天，我们就来扒开这张榜单的底裤，看看在喧嚣的数据背后，Rust 的真实处境，究竟是怎样的。

官方的“诊断书”：Rust 的“阿喀琉斯之踵”

我们先来看看 TIOBE CEO Paul Jansen 的“诊断报告”。

他指出，Rust 在今年年初曾一度冲到历史最高排名第 13 位，但仅仅三个月后，就又跌回了第 16 位。

他给出的解释是：

“一个可能的解释是，尽管 Rust 能够生产出高效和安全的代码，但对于非专家程序员来说，它仍然难以学习。虽然专家们愿意投入时间去掌握这门语言，但更广泛的主流采用似乎面临着更大的挑战。”

这段话，精准地戳中了 Rust 社区最敏感、也最引以为傲的那根神经——陡峭的学习曲线。

为了追求极致的内存安全，Rust 发明了极其复杂的“所有权（Ownership）”和“借用检查（Borrow Checker）”系统。这套系统像一个极其严苛的导师，在你编译代码的每一个环节，都对你进行着灵魂拷问。

无数新手在入门 Rust 时，都会经历一段被称为“与编译器搏斗”的痛苦时期。

TIOBE 的观点很明确：这种“精英主义”的设计哲学，正在成为 Rust “出圈”的最大障碍。

榜单的原罪：用“百度指数”去衡量火箭科学

TIOBE 的诊断听起来似乎很有道理。但我们必须先问一个更底层的问题：TIOBE 指数，到底是个什么东西？

TIOBE 的排名，本质上是一个基于“搜索引擎查询量”的指标。它在全球 25 个主流搜索引擎上，统计包含 +” programming” 关键词的页面数量。

看懂了吗？这套诞生于 十多年前的评判标准，在 2026 年的今天，已经变得极其荒谬。

它衡量的是一门语言在公网上的“话题度”和“声量”，而不是它的“真实价值”和“商业应用”。

这就像用“微博热搜”的次数，去评判一位科学家的学术贡献一样可笑。

用这把“旧尺子”去衡量现代编程语言，会产生几个致命的认知偏差：

1. 越是难学、坑越多的语言，排名越高。

这恰恰是 TIOBE 逻辑最诡异的地方。Paul Jansen 一边抱怨 Rust 太难学，一边却忽视了，正是因为“难学”，新用户才会频繁地去 Google 搜索“Rust a lifetime that lives long enough”、“the trait Borrow is not implemented for String”这些令人抓狂的报错信息。

每一次“救命”的搜索，都在为 Rust 的 TIOBE 排名，贡献着宝贵的 KPI。

2. 越是成熟、生态完善的语言，排名越吃亏。

随着一门语言的成熟，它的文档会越来越完善，社区的最佳实践会沉淀下来。开发者遇到的问题，更多地会在官方文档、IDE 提示、或者小圈子的 Slack/Discord 里被解决，而不会产生大量的公开搜索。

没有问题，就没有搜索。没有搜索，就没有 TIOBE 排名。

3. TIOBE 无法衡量“生态位”的价值。

Rust 的江山在哪里？在 Linux 内核里(注：最近发布的Linux Kernel 7.0里，Rust已经正式转正了！)，在 Windows 的系统组件里，在 Cloudflare 的边缘网络里，在 Figma 的渲染引擎里，在那些对性能和安全要求达到极致的底层基础设施里。

这些领域的开发者，是金字塔尖的系统程序员。他们讨论问题，是在 GitHub Issue、Zulip 频道，而不是在 CSDN 上问“我的 &mut 为什么传不进去”。

Rust 的价值，深藏在那些不会产生大量公开搜索记录的、高壁垒的硬核场景里。而 TIOBE 的爬虫，可能永远也爬不到那里。

真实的版图：Rust 正在经历一场“青春期的烦恼”

扒开 TIOBE 的“障眼法”，我们该如何客观看待 Rust 在 2026 年的真实处境？

Rust 并没有“增长放缓”，它只是在经历一场必然的“出圈阵痛”。

任何一门新技术的发展，都会经历两个阶段：

  1. 从 0 到 1 的“深耕期”：吸引最硬核、最狂热的一批早期用户，在特定的垂直领域里，将自己的核心优势打磨到极致。Rust 在“系统编程”领域，已经完美地完成了这个阶段。
  2. 从 1 到 N 的“出圈期”：试图将自己的影响力，扩展到更广阔的领域，吸引更多的主流开发者。

Rust 现在正处于从阶段一向阶段二过渡的关键时期。它那套为系统编程量身打造的、极致安全的内存管理哲学，在 Web 开发、数据科学、GUI 应用等场景下，确实给很多开发者带来了巨大的心智负担。

Rust 社区内部，关于是否应该为了“易用性”而牺牲部分“极致性”的争论，也从未停止。比如，关于异步运行时的分裂（Tokio vs async-std）、关于标准库的精简与扩充，都反映了这种“青春期的烦恼”。

Rust 没有停滞，它只是在“成长的十字路口”，在思考自己到底想成为谁。

我们真正应该关注什么？

作为身处一线的工程师，我们应该如何看待 TIOBE 的这份“诊断书”？

第一，永远不要把“流行度”作为技术选型的唯一标准。

JavaScript 很流行，但你不会用它去写操作系统内核。COBOL 极其冷门，但全球的银行系统依然跑在它上面，顶级 COBOL 程序员的薪资高得吓人。

技术的价值，永远取决于它在特定场景下，解决了多大规模、多高难度的商业问题。

第二，警惕“易用性”的陷阱。

Go、Python 很简单。但这种简单，可能是以牺牲“运行时安全保证”（比如Python 的动态类型、Go的Nil指针等）为代价的。

Rust 的“难”，恰恰是把所有可能在深夜引发线上雪崩的风险，全部前置到了编译阶段。它用“编译时的痛苦”，换取了“运行时的安宁”。

这种设计哲学，对于金融交易、底层基础设施、航空航天等“不容有失”的领域来说，是无价之宝。

第三，对自己的成长负责，而不是对榜单负责。

与其每个月焦虑地刷新 TIOBE 的排名，不如去问自己几个更本质的问题：

  • 我所处的行业，未来 3-5 年最核心的技术瓶颈是什么？
  • 为了解决这些瓶颈，我需要掌握哪些不可替代的底层能力？
  • 哪门语言的生态和哲学，与这个方向最契合？

你的技术护城河，从来不是由 TIOBE 的排名决定的，而是由你所处行业以及要解决问题的深度决定的。

小结：你的价值，与榜单无关

TIOBE 的这份榜单，与其说是一份严肃的技术报告，不如说是一场成功的“引流狂欢”。

它用一个看似客观的数据，精准地挑动了每个程序员心中最敏感的那根“身份焦虑”神经。

但作为身处一线的工程师，我们必须保持清醒。

衡量一门技术价值的唯一标准，从来不是它在搜索引擎上的热度，而是它在真实的商业世界里，解决了多大、多复杂、多有价值的问题。

当你在用 Rust 构建着下一代安全操作系统，或者用它重写着公司最核心的交易引擎时，你根本无需关心 TIOBE 上的排名是 16 还是 60。

因为你正在创造的价值，早已不是这些过时的“声量指标”所能衡量的。

你的技术栈没有背叛你，但你的认知，可能会。

今日互动探讨：

你觉得 TIOBE 对 Rust“增长放缓”的判断准确吗？你认为 Rust 陡峭的学习曲线，是它最大的优势，还是最大的障碍？

欢迎在评论区分享你的看法！

还在为“复制粘贴喂AI”而烦恼？我的新专栏 《AI原生开发工作流实战》 将带你：

  • 告别低效，重塑开发范式
  • 驾驭AI Agent(Claude Code)，实现工作流自动化
  • 从“AI使用者”进化为规范驱动开发的“工作流指挥家”

扫描下方二维码，开启你的AI原生开发之旅。

原「Gopher部落」已重装升级为「Go & AI 精进营」知识星球，快来加入星球，开启你的技术跃迁之旅吧！

我们致力于打造一个高品质的 Go 语言深度学习 与 AI 应用探索 平台。在这里，你将获得：

  • 体系化 Go 核心进阶内容: 深入「Go原理课」、「Go进阶课」、「Go避坑课」等独家深度专栏，夯实你的 Go 内功。
  • 前沿 Go+AI 实战赋能: 紧跟时代步伐，学习「Go+AI应用实战」、「Agent开发实战课」、「Agentic软件工程课」、「Claude Code开发工作流实战课」、「OpenClaw实战分享」等，掌握 AI 时代新技能。
  • 星主 Tony Bai 亲自答疑: 遇到难题？星主第一时间为你深度解析，扫清学习障碍。
  • 高活跃 Gopher 交流圈: 与众多优秀 Gopher 分享心得、讨论技术，碰撞思想火花。
  • 独家资源与内容首发: 技术文章、课程更新、精选资源，第一时间触达。

衷心希望「Go & AI 精进营」能成为你学习、进步、交流的港湾。让我们在此相聚，享受技术精进的快乐！欢迎你的加入！

img{512x368}

商务合作方式：撰稿、出书、培训、在线课程、合伙创业、咨询、广告合作。如有需求，请扫描下方公众号二维码，与我私信联系。

© 2026, bigwhite. 版权所有.

❌