extendable-media-recorder

一个可扩展的原生 MediaRecorder 替代品。

这个包提供了MediaStream Recording规范中定义的(部分) MediaRecorder API。如果可能，它将使用原生实现。

此外，这个包还允许定义自定义编码器。这些编码器可用于渲染目前任何浏览器都不支持的文件。目前这仅适用于音频编码器。

使用方法

extendable-media-recorder 可在 npm 上获取，可以按常规方式安装。

npm install extendable-media-recorder

它导出 MediaRecorder 构造函数。可以像原生实现一样使用。以下示例将使用浏览器定义的默认编码器。

import { MediaRecorder } from 'extendable-media-recorder';

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);

使用自定义编码器

extendable-media-recorder 还导出了一个 register() 函数，可用于定义自定义编码器。一个预定义的编码器可作为 extendable-media-recorder-wav-encoder 包使用。可以如下所示使用。

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

await register(await connect());

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });

设置采样率

MediaRecoder 无法直接修改采样率。它使用给定 MediaStream 的 sampleRate。您可以像这样读取正在使用的值：

const { sampleRate } = stream.getAudioTracks()[0].getSettings();

要修改录音的采样率，您需要更改 MediaStream 的 sampleRate。但这也是不可能的。因此，最可靠的方法是使用所需 sampleRate 的 AudioContext 来进行重采样。

const audioContext = new AudioContext({ sampleRate: 16000 });
const mediaStreamAudioSourceNode = new MediaStreamAudioSourceNode(audioContext, { mediaStream: stream });
const mediaStreamAudioDestinationNode = new MediaStreamAudioDestinationNode(audioContext);

mediaStreamAudioSourceNode.connect(mediaStreamAudioDestinationNode);

const mediaRecorder = new MediaRecorder(mediaStreamAudioDestinationNode.stream);

内部工作原理

在内部使用两种不同的技术来启用自定义编码器。在 Chrome 中，使用原生 MediaRecorder 将流编码为带有 pcm 编码音频的 webm 文件。然后使用 ts-ebml 的最小版本来解析该 pcm 数据并将其传递给编码器。在其他浏览器中，使用 Web Audio API 获取录制音频的 pcm 数据。