RecordRTC 录制 Canvas 时音频断续？试试这个解决方案！

2024-07-13 18:54:08

使用 RecordRTC 进行 Canvas 录制时如何解决音频断续问题

在网页应用中，使用 canvas 元素录制屏幕并添加音频是一项常见的需求，例如录制在线会议、游戏直播等场景。RecordRTC 是一款强大的 JavaScript 库，可以简化音视频录制的过程。然而，当我们使用 RecordRTC 对 canvas 进行录制时，经常会遇到音频断续的问题，这极大地影响了录制质量。本文将深入分析这个问题的产生原因，并提供一种基于 MediaStreamTrackProcessor 和 MediaStreamTrackGenerator 的解决方案，帮助你实现流畅、高质量的音视频录制体验。

音频断续的根源

在理解解决方案之前，我们先来探究一下为什么使用 RecordRTC 录制 canvas 会导致音频断续。根本原因在于 canvas 元素本身并不能直接捕获音频数据。为了将视频和音频合并录制，我们需要创建一个新的 MediaStream，并将 canvas 的视频轨道和麦克风的音频轨道添加到其中。

然而，canvas 绘制和音频捕获是两个相对独立的进程，它们之间缺乏同步机制。canvas 绘制通常依赖于 requestAnimationFrame 方法，以浏览器刷新频率进行画面更新；而音频捕获则是持续进行的。这种同步的缺失导致最终录制的音频数据无法与视频画面精确对应，从而出现音频断续的现象。

利用 `MediaStreamTrackProcessor` 和 `MediaStreamTrackGenerator` 解决问题

为了解决音频断续问题，我们需要引入 WebRTC 中的 MediaStreamTrackProcessor 和 MediaStreamTrackGenerator API。MediaStreamTrackProcessor 允许我们访问和处理媒体流的原始数据，而 MediaStreamTrackGenerator 则可以创建自定义的媒体轨道。

我们可以利用这两个 API 精细地控制音频数据的生成和插入，使其与视频画面同步，具体步骤如下：

创建 MediaStreamTrackProcessor 和 MediaStreamTrackGenerator 实例:

首先，我们需要为音频轨道创建一个 MediaStreamTrackProcessor 和一个 MediaStreamTrackGenerator。MediaStreamTrackProcessor 用于捕获麦克风的原始音频数据，而 MediaStreamTrackGenerator 则用于生成新的、与视频同步的音频轨道。
```
const audioTrack = camera.getAudioTracks()[0];
const audioProcessor = new MediaStreamTrackProcessor(audioTrack);
const audioGenerator = new MediaStreamTrackGenerator({ kind: 'audio' });
```
处理音频数据:

通过监听 MediaStreamTrackProcessor 的 ondataavailable 事件，我们可以实时获取到原始的音频数据。在事件处理函数中，我们将音频数据传递给 MediaStreamTrackGenerator 的 queue 方法，将其添加到新的音频轨道中。
```
audioProcessor.ondataavailable = (event) => {
  audioGenerator.queue(event.data);
};
```

将新的音频轨道添加到 MediaStream:

最后，将 MediaStreamTrackGenerator 生成的音频轨道添加到 MediaStream 中，并将该 MediaStream 传递给 RecordRTC 进行录制。

const audioPlusCanvasStream = new MediaStream();
audioPlusCanvasStream.addTrack(audioGenerator);
canvasStream.getVideoTracks().forEach((track) => {
  audioPlusCanvasStream.addTrack(track);
});

const recorder = RecordRTC(audioPlusCanvasStream, {
  type: 'video',
});

代码示例

以下是完整的代码示例，展示了如何使用 MediaStreamTrackProcessor 和 MediaStreamTrackGenerator 解决 RecordRTC 在 canvas 录制过程中出现的音频断续问题：

const videoPreview = document.getElementById('video-preview');
const logoImage = document.getElementById('logo-image');

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(async (camera) => {
    // 创建 canvas 元素用于绘制
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = 320;
    canvas.height = 240;
    document.body.appendChild(canvas);

    // 创建 video 元素用于显示摄像头画面
    const video = document.createElement('video');
    video.autoplay = true;
    video.playsinline = true;
    video.srcObject = camera;

    // 获取 canvas 视频流
    const canvasStream = canvas.captureStream(15);

    // 创建 MediaStreamTrackProcessor 和 MediaStreamTrackGenerator
    const audioTrack = camera.getAudioTracks()[0];
    const audioProcessor = new MediaStreamTrackProcessor(audioTrack);
    const audioGenerator = new MediaStreamTrackGenerator({ kind: 'audio' });

    // 处理音频数据
    audioProcessor.ondataavailable = (event) => {
      audioGenerator.queue(event.data);
    };

    // 创建新的 MediaStream 并添加音频和视频轨道
    const audioPlusCanvasStream = new MediaStream();
    audioPlusCanvasStream.addTrack(audioGenerator);
    canvasStream.getVideoTracks().forEach((track) => {
      audioPlusCanvasStream.addTrack(track);
    });

    // 使用 RecordRTC 进行录制
    const recorder = RecordRTC(audioPlusCanvasStream, {
      type: 'video',
    });

    recorder.startRecording();

    // 将 canvas 视频流设置为 videoPreview 的源
    videoPreview.srcObject = canvasStream;

    // 绘制 canvas
    (function looper() {
      if (!recorder) return;

      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      context.drawImage(logoImage, 10, 10, 32, 32);

      requestAnimationFrame(looper);
    })();

    // 停止录制
    setTimeout(() => {
      recorder.stopRecording(() => {
        const blob = recorder.getBlob();
        recorder = null;
        camera.stop();

        videoPreview.srcObject = null;
        videoPreview.src = URL.createObjectURL(blob);
      });
    }, 10 * 1000);
  })
  .catch((error) => {
    console.error('无法捕获摄像头:', error);
  });

常见问题解答

为什么我的代码仍然存在音频断续问题？

检查 MediaStreamTrackGenerator 的 queue 方法是否在 MediaStreamTrackProcessor 的 ondataavailable 事件处理函数中被调用。确保音频数据被正确地传递到新的音频轨道。
我可以使用其他方法解决音频断续问题吗？

可以尝试使用 Web Audio API 来处理音频数据，并使用 ScriptProcessorNode 将音频数据写入 MediaStream。
如何提高录制视频的质量？

可以通过调整 canvas.captureStream() 方法的帧率参数来提高视频质量。更高的帧率可以带来更流畅的视频画面，但也会增加文件大小。
RecordRTC 还支持哪些录制格式？

RecordRTC 支持录制 video/webm、video/mp4、audio/wav、audio/ogg 等多种格式。
如何将录制的视频保存到服务器？

可以使用 AJAX 技术将录制的视频 Blob 数据上传到服务器。