html5播放声画不同步,javascript - 附加到SourceBuffer的HTML 5视频和音频变得不同步 - 堆栈内存溢出...

我正在使用Media Source Extensions API捕获具有音频的桌面/应用程序/ chrome选项卡，并通过Socket.io将数据流式传输到多个客户端。

我使用的是MediaRecorder，它通常每10毫秒记录一次流，将每个10毫秒的块发送到我的服务器，该服务器将其中继回每个客户端，以附加到SourceBuffer上，该SourceBuffer附加到附加到视频标签的MediaSource上。 音频和视频都可以通过视频标签成功发送，接收和显示，但是，在很短的时间之后，音频会先于视频，然后逐渐分开。

let videoMimeType = 'video/webm;codecs="vp9,opus"';

let player = document.getElementById("player");

let mediaSource = new MediaSource();

player.src = window.URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', function(e) {

if (videoBuffer == null) {

videoBuffer = mediaSource.addSourceBuffer(videoMimeType);

videoBuffer.mode = 'sequence'

}

});

navigator.mediaDevices.getDisplayMedia({

v