WebRTC 视频/音频流不同步（MediaStream -> MediaRecorder -> MediaSource -> Video Element）

Question

我正在使用一个 MediaStream 并使用画布和 WebAudio API 合并两个单独的轨道（视频和音频）。MediaStream 本身似乎并没有失去同步，但是在将其读入 MediaRecorder 并将其缓冲到视频元素中后，音频似乎总是比视频早得多这是似乎存在问题的代码：

let stream = new MediaStream();

// Get the mixed sources drawn to the canvas
this.canvas.captureStream().getVideoTracks().forEach(track => {
  stream.addTrack(track);
});

// Add mixed audio tracks to the stream
// /sf/ask/2949698181/
this.audioMixer.dest.stream.getAudioTracks().forEach(track => {
  stream.addTrack(track);
});

// stream = stream;
let mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=opus,vp8' });

let mediaSource = new MediaSource();
let video = document.createElement('video');
video.src = URL.createObjectURL(mediaSource);
document.body.appendChild(video);
video.controls = true;
video.autoplay = true;

// Source open
mediaSource.onsourceopen = () => {
  let sourceBuffer = mediaSource.addSourceBuffer(mediaRecorder.mimeType);

  mediaRecorder.ondataavailable = (event) => {

    if (event.data.size > 0) {
      const reader = new FileReader();
      reader.readAsArrayBuffer(event.data);
      reader.onloadend = () => {
        sourceBuffer.appendBuffer(reader.result);
        console.log(mediaSource.sourceBuffers);
        console.log(event.data);
      }
    }
  }
  mediaRecorder.start(1000);
}

混音器.js

export default class AudioMixer {

  constructor() {
    // Initialize an audio context
    this.audioContext = new AudioContext();

    // Destination outputs one track of mixed audio
    this.dest = this.audioContext.createMediaStreamDestination();

    // Array of current streams in mixer
    this.sources = [];
  }

  // Add an audio stream to the mixer
  addStream(id, stream) {
    // Get the audio tracks from the stream and add them to the mixer
    let sources = stream.getAudioTracks().map(track => this.audioContext.createMediaStreamSource(new MediaStream([track])));
    sources.forEach(source => {

      // Add it to the current sources being mixed
      this.sources.push(source);
      source.connect(this.dest);

      // Connect to analyser to update volume slider
      let analyser = this.audioContext.createAnalyser();
      source.connect(analyser);
      ...
    });
  }

  // Remove all current sources from the mixer
  flushAll() {
    this.sources.forEach(source => {
      source.disconnect(this.dest);
    });

    this.sources = [];
  }

  // Clean up the audio context for the mixer
  cleanup() {
    this.audioContext.close();
  }
}

我认为这与如何将数据推送到 MediaSource 缓冲区有关，但我不确定。我在做什么使流不同步？

Answer 1

对旧帖子的迟回复，但它可能对某人有帮助......

我遇到了完全相同的问题：我有一个视频流，应该辅以音频流。在音频流中，不时地播放短声音（AudioBuffer）。整个过程都是通过 MediaRecorder 记录的。Chrome 上一切正常。但在 Android 版 Chrome 上，所有声音都会快速连续播放。Android 上忽略了“play()”的“when”参数。（audiocontext.currentTime 随着时间的推移继续增加...... - 这不是重点）。

我的解决方案类似于 Jacob 在 2018 年 9 月 2 日 7:41 发表的评论：我创建并连接了一个听不见的 48,000 Hz 的正弦波振荡器，该振荡器在录制期间在音频流中永久播放。显然这会带来适当的时间进展。