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
// 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);
}

AudioMixer.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在18年9月2日7:41发表的评论：我创建并连接了一个无法听见的48,000 Hz的正弦波振荡器，在录制过程中它会在音频流中永久播放。显然，这可以导致正确的时间进度。

Answer 2

Chrome中存在一个错误，即使以48000编码（会导致间隙和视频不同步），它也会播放44100KHz的缓冲媒体流音频。所有其他浏览器似乎都可以正常运行。您可以选择将编解码器更改为支持44.1KHz编码的编解码器，或将来自Web链接的文件作为源播放（这样Chrome可以正常播放）

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

2 个答案: