【发布时间】：2021-09-13 21:53:50
【问题描述】：
我正在使用一个 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 缓冲区的方式有关，但我不确定。我在做什么使流不同步？
【问题讨论】：
-
当您将录制的文件作为一个整体播放而不是将其块作为 MSE 的缓冲区播放时，它是否也会不同步？
-
我根本不记录流，我只是使用 MediaRecorder 对象读取块以便稍后发送。我刚刚将它通过管道传输到一个文件并尝试它，它似乎仍然不同步。
-
还要注意这个小提琴：jsfiddle.net/nthyfgvs 似乎保持同步，但这是使用单个 getUserMedia 调用，而不是我用来填充画布/audioMixer 的许多单独调用。
-
;-) 你正在录制它。你不保存块是另一回事。现在我们发现 MSE 不是问题所在。因此，暂时不要使用它，直到您找到真正导致问题的原因。如果您只将流作为
<video>的 srcObject 传递（即没有记录）怎么办？如果你对你的录音机强制使用一个常量 bitsPerSecond 怎么办？ -
@JacobGreenway 你能提供你的解决方案的代码 sn-p 吗？
标签： webrtc web-audio-api media-source mediastream web-mediarecorder