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

Question

我正在使用一个 MediaStream 并使用 Canvas 和 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
// https://stackoverflow.com/questions/42138545/webrtc-mix-local-and-remote-audio-steams-and-record
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 上，所有声音都会快速连续播放。 “play()”的“when”参数在Android上被忽略。 (audiocontext.currentTime 随着时间的推移继续增加...... - 这不是重点)。

我的解决方案类似于 Jacob 于 18 年 9 月 2 日 7:41 发表的评论:
我创建并连接了一个 48,000 Hz 听不见的正弦波振荡器，它在录音期间永久地在音频流中播放。显然，这会导致正确的时间进度。