可视化来自远程对等连接的媒体流 [英] visualize mediastream which is coming from a remote peer connection

问题描述

有些日子以来，我试图想象出一个来自webrtc的音频流。
我们已经编写了一些适用于普通本地流的视觉效果（webaudio麦克风使用）。

Since some days I`m trying to visualize an audiostream which is coming over webrtc. We already wrote some visuals which are working fine for the normal local stream (webaudio microphone usage).

然后我在 https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ 用于在不同浏览器之间传输麦克风输入。
我们需要这个来自前端所有客户端的一个后端的相同音频数据。

Then I found some really interesting things on https://github.com/muaz-khan/WebRTC-Experiment/tree/master/ for streaming the microphone input between different browsers. We need this to have the same audio data from one backend for all clients in the frontend.

一切正常，一些测试表明我们可以听到每个其他。所以我认为可视化输入流也不是问题。

Everything works fine and some tests showed that we can hear each other. So I thought that it is also not a problem to visualize the incoming stream.

但是：所有频率数据都是空的（零），即使我们可以互相听到。

But: all frequency data are empty (zero), even if we can hear each other.

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

Does anybody has a solution or hint for this? Thanks in advance!

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

This is my test for analysing the remote frequence data:

首先包含这些文件：

webrtc-experiment.com/firebase.js

webrtc-experiment.com/firebase.js

webrtc-experiment.com/one-to-many -audio-broadcasting / meeting.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');

推荐答案

我找到了一个简单的解决方案，至少对于下次：

I found a simple "solution" at least for the next time:

我已经在所有客户端插入了从麦克风到耳机的公/母音频线。然后我读了当地的麦克风流，这真是一个奇迹，我可以想象我听到的是什么。

I have plugged a male / male audio cable from microphone to headphone in all my clients. Then I read the local microphone stream and, what a miracle, i can visualize what Im hearing.

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

Not a good solution, but it`s doing the job..

一个问题：是否可以在javascript中重新获取目标作为流？然后我不需要音频线..

One Question: Is it possible to re-grab the destination as a stream in javascript? Then I would not need the audio cables..

这篇关于可视化来自远程对等连接的媒体流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！