前言
对于前端工程师来说，npm 绝对是一个离不开的工具，因为它提供了各种各样的第三方包，让我们的工作效率得到了很大提高。今天，我们来介绍一个适用于音视频方面的 npm 包 mhm，帮助我们在前端快速创建音视频 Web 应用程序。
mhm 简介
mhm 是一套 JavaScript 库，它可以在浏览器端轻松地进行音频/视频的处理，包括静态音频、实时音频（麦克风输入、媒体流输入等）、静态视频和实时视频。mhm 提供了非常多的功能，如音频增益、混音、聚合、剥离、降噪、静音和重复重放，以及视频的加速和减速、裁剪、翻转和检测等等，让 Web 应用程序的音视频处理变得非常简单。
mhm 安装
要使用 mhm，首先需要在本地项目中进行安装。可以通过以下两种方式进行安装：
使用 npm 安装：
npm install @mediapipe/mhm
使用 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/mhm"></script>
mhm 使用
mhm 的使用分为三个主要步骤：初始化、启动和停止。以下是一个简单的例子，演示了如何使用 mhm 捕获麦克风输入并将它们显示在网页上。
-- -------------------- ---- -------
--------- -----
------
------
------ --------------- -------- --------------
------- -----------------------------------------------------------
--------
-- --- ---
----- --- - --- ------
------------------------ -- -
-- -----
----- ----------- - ----- -------------------------------------
------ -----
------ -----
---
----- ------------ - --------------------------------------
---------------------- - ------------
----- --------------------
----- -----------------------
---
---------
-------
-------上面的代码演示了如何初始化 mhm 并启动本地视频流。这里，我们首先使用 navigator.mediaDevices.getUserMedia() 获取麦克风和摄像头资源，并将它们分别添加到文档中。然后，我们调用 mhm.start() 来启动麦克风输入流，并将其绑定到 mhm 实例中。最后，在视频流上调用 play()，开始播放该视频流。
mhm 功能演示
mhm 的功能非常丰富，包括音频和视频方面的功能。以下是一些示例代码，演示如何使用 mhm 进行一些常见的音视频操作。
音频增益
在以下代码中，我们使用 mhm 对麦克风输入的音频进行增益处理，增加 10 分贝的音量。
const mhm = new MHM();
const localStream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
await mhm.initialize();
const audioProcessor = await mhm.createAudioProcessor();
audioProcessor.addGain(10);
await mhm.start(localStream);音频聚合
在以下代码中，我们使用 mhm 对来自两个麦克风的音频进行聚合，然后将该音频发送回服务器。
-- -------------------- ---- -------
----- --- - --- ------
----- ---------------- - ----- -------------------------------------
------ -
--------- - ------ ---------- --
--
---
----- ----------------- - ----- -------------------------------------
------ -
--------- - ------ ----------- --
--
---
----- -----------------
----- --------------- - ----- ---------------------------
----- --------------- - ----- ---------------------------
---------------------------------- -- -
-------------------------------
---
---------------------------------- -- -
-----------------------
---
----- ----------------------------
----- -----------------------------音频剥离
在以下代码中，我们使用 mhm 对某个音频中的人声进行剥离。
-- -------------------- ---- ------- ----- --- - --- ------ ----- ----------- - ----- ------------------------------------- ------ ----- --- ----- ----------------- ----- -------------- - ----- --------------------------- --------------------------------- ----- -----------------------
视频加速
在以下代码中，我们使用 mhm 对来自摄像头的视频进行加速处理，将其速度增加至两倍。
-- -------------------- ---- ------- ----- --- - --- ------ ----- ----------- - ----- ------------------------------------- ------ ----- ------ ----- --- ----- ----------------- ----- -------------- - ----- --------------------------- ---------------------------------- ----- -----------------------
总结
mhm 是一个功能强大的 npm 包，可帮助开发人员实现各种音视频操作。在本文中，我们简要介绍了 mhm 的基本用法，并演示了一些常见的操作。如果您的项目需要进行音视频操作，那么 mhm 可能非常适合您。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f72