webrtc - createMediaElementSource 播放但 getByteFrequencyData 返回全 0

Question

我正在尝试可视化来自网页元素的音频。该元素的来源是通过 sip.js 连接到 Asterisk 调用的 WebRTC 流。音频按预期工作。

但是，当我尝试使用网络音频 api 获取频率数据时，它返回一个全为 0 的数组，即使音频正在工作。这似乎是 createMediaElementSource 的问题。如果我调用 getUserMedia 并使用 createMediaStreamSource 将我的麦克风连接到输入，我确实得到了返回的频率数据。

这在 Chrome 40.0 和 Firefox 31.4 中都尝试过。在我的搜索中，我发现 Android Chrome 出现了类似的错误，但我的桌面版 Chrome 和 Firefox 似乎应该可以正常运行。到目前为止，我感觉错误可能是由于音频播放器从 sip.js 中的另一个 AudioContext 获取音频，或者与 CORS 有关。我尝试过的所有演示都可以正常工作，但仅使用 createMediaStreamSource 获取麦克风音频，或使用 createMediaElementSource 播放文件(而不是流式传输到元素)。

我的代码:

var context = new (window.AudioContext || window.webkitAudioContext)();

    var analyser = context.createAnalyser();
    analyser.fftSize = 64;
    analyser.minDecibels = -90;
    analyser.maxDecibels = -10;
    analyser.smoothingTimeConstant = 0.85;

    var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    var visualisation = $("#visualisation");
    var barSpacingPercent = 100 / analyser.frequencyBinCount;
    for (var i = 0; i < analyser.frequencyBinCount; i++) {
            $("<div/>").css("left", i * barSpacingPercent + "%").appendTo(visualisation);
    }
    var bars = $("#visualisation > div");
    function update() {
            window.requestAnimationFrame(update);
            analyser.getByteFrequencyData(frequencyData);
            bars.each(function (index, bar) {
                    bar.style.height = frequencyData[index] + 'px';
                    console.debug(frequencyData[index]);
            });
    };

$("audio").bind('canplay', function() {
    source = context.createMediaElementSource(this);
    source.connect(analyser);
    update();
});

任何帮助是极大的赞赏。

Answer 1

Chrome 不支持 RTCPeerConnection 输出流(远程流)的 WebAudio 处理；见 this question .他们的错误是here .
编辑:他们现在在 Chrome 50 中支持此功能

请参阅作为此错误的一部分即将登陆的 Firefox 的测试代码:
Bug 1081819 .此错误将在 Firefox 中将 webaudio 输入添加到 RTCPeerConnections；我们已经对输出 MediaStreams 进行了一段时间的 WebAudio 处理。那里的测试代码测试双方；请注意，它在很大程度上取决于测试框架，因此只需将其用作连接到 webaudio 的指南。