可视化来自远程对等连接的媒体流答案

【问题标题】：visualize mediastream which is coming from a remote peer connection可视化来自远程对等连接的媒体流
【发布时间】：2013-11-25 21:16:27
【问题描述】：

自从几天以来，我一直在尝试可视化来自 webrtc 的音频流。我们已经编写了一些在正常本地流（网络音频麦克风使用）中运行良好的视觉效果。

然后我在https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ 上发现了一些非常有趣的东西，用于在不同浏览器之间传输麦克风输入。我们需要这样才能为前端的所有客户端从一个后端获取相同的音频数据。

一切正常，一些测试表明我们可以听到对方的声音。所以我认为可视化传入的流也不是问题。

但是：所有频率数据都是空的（零），即使我们能听到对方的声音。

有人对此有解决方案或提示吗？提前致谢！

这是我分析远程频率数据的测试：

首先包含这些文件：

webrtc-experiment.com/firebase.js

webrtc-experiment.com/one-to-many-audio-broadcasting/meeting.js

        var meeting = new Meeting('test');
        var audioContext = new window.webkitAudioContext();
        var analyser = audioContext.createAnalyser();

        // on getting local or remote streams
        meeting.onaddstream = function(e) {
            console.log(e.type);
            console.log(e.audio);
            console.log(e.stream);

            if(e.type === 'local')
            {
                //try it with the local stream, it works!
            }
            else
            {

                var source = audioContext.createMediaStreamSource(e.stream);

                source.connect(analyser);
                analyser.connect(audioContext.destination);

                console.log(analyser.fftSize);
                console.log(analyser.frequencyBinCount);

                analyser.fftSize = 64;
                console.log(analyser.frequencyBinCount);

                var frequencyData = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(frequencyData);

                function update() {
                    requestAnimationFrame(update);

                    analyser.getByteFrequencyData(frequencyData);

                    console.log(frequencyData);
                };

                update();
            }
        };

        meeting.check();
        meeting.setup('test');

【问题讨论】：

我已经找到了一个匹配的问题：code.google.com/p/chromium/issues/detail?id=241543

标签： javascript stream webrtc microphone web-audio-api

【解决方案1】：

请注意，分析远程流应该适用于 Firefox，并且已知不适用于 Chrome，请参阅http://code.google.com/p/chromium/issues/detail?id=241543

一种可能的解决方法是使用 WebRTC 统计 API 获取远程音频电平值。

如果您转到 chrome://webrtc-internals/ 然后选择播放远程流的页面，则 ssrc_XXXX_recv 之一将包含您可以使用的动态变化的 audioOutputLevel 值。

您可以使用 Chrome PeerConnection 的统计 API 访问该值，特别是 getStats() 方法。

一个可能的缺点是，这是用户从视频/音频元素听到的实际声音的值，因此如果用户静音或更改媒体元素的音量，则会影响 audioOutputLevel 值。

祝你好运！ :-)

【讨论】：

听起来是个机会！我将在接下来的几周内尝试这个 - 在此先感谢 :)

【解决方案2】：

至少下次我找到了一个简单的“解决方案”：

我已在所有客户端中插入了从麦克风到耳机的公/公音频线。然后我读取了本地麦克风流，真是奇迹，我可以想象我听到的内容。

不是一个好的解决方案，但它正在完成这项工作..

一个问题：是否可以在 javascript 中将目标重新抓取为流？那我就不需要音频线了..

【讨论】：