使用 Web Audio API 和 Wrtc 进行远程音频处理

Posted 2023-02-19

【中文标题】使用 Web Audio API 和 Wrtc 进行远程音频处理

【英文标题】：Remote Audio Processing using Web Audio API and Wrtc

【发布时间】：2021-08-08 14:04:26

【问题描述】：

我正在尝试处理来自服务器的媒体流对象的远程音频。我得到多个媒体流对象，这些对象被传递给video element srcObject 然后静音。（如视频会议） 每个媒体流对象都被传递给一个单独的组件，该组件具有唯一的video 元素并附加到它上面。 我想分别处理每个媒体流对象的音频并相应地处理它以显示必要的视觉效果。 问题是，假设通话中有 5 个用户并且任何随机用户说话，分析器仅适用于第一个媒体流对象（添加到通话中的第一个）。如何检查音频来自哪个特定媒体流？以及为什么分析器适用于单个媒体流？ 从媒体流对象分析音频的代码在这里提到如下

const context = new AudioContext();
const track = context.createMediaStreamSource(this.mediaStreamObj);
const gainNode = context.createGain();
const analyzer = context.createAnalyser();
track.connect(gainNode);
track.connect(analyzer);
gainNode.gain.value = 0;
track.connect(context.destination);
const bufferLength = analyzer.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

dataArray 进一步用于获取音频级别的平均值并应用必要的 css。 我找到了一个来源，其中提到这是一个 chrome 错误，请查看此链接 - Proper way to get the remote audio levels of a media stream in order to display audio levels visually? 有多个来源提到了本地音频的步骤，但我找不到与远程音频相关的任何内容。任何形式的帮助将不胜感激。

【问题讨论】：

您需要展示更多代码，例如您如何分析 5 个 usrers 流。

媒体流对象在parent中以对象数组的形式接收。然后将每个对象传递给子组件并附加到那里的video 标签。在每个子组件中，我都尝试使用我的问题中提到的 sn-p(Web Audio API) 来分析它们各自的媒体流对象。该过程包括，创建源节点->将媒体流对象传递给源节点->创建分析器节点->将源连接到目标。

它仅适用于单个媒体流，即仅第一个媒体流。当以与上述相同的方式传递新的媒体流对象时，分析器只为第一个媒体流对象提供音频信号电平，而其余对象除外。

感谢您的解释。我会在答案中发布我认为的问题。

【参考方案1】：

最后，我能够找出问题所在。分析器节点对所有媒体 Streams 都运行良好。该问题与正在应用CSS 的元素的id 有关。事实证明 id 对于每个包含它自己的媒体流对象的子组件都是唯一的。但是，由于父组件包含所有子组件，因此必须应用css 的所有元素都具有相同的id。这就是样式被应用到单个id 的原因。因此，我确保元素具有不同的 id，即使它们位于不同的子组件中，并且现在一切正常！

【参考方案2】：

基于 cmets，我认为问题在于 MediaStreamSourceNode 只有一个轨道，即使流有很多。使用的曲目是“第一首”，有点不确定。

您可以使用多个MediaStreamTrackAudiosourceNodes 来访问每个曲目。然后为每个这些添加一个分析器，以便您可以衡量正在发生的事情。

（注意：Chrome 尚未实现此功能。请参阅https://crbug.com/679813）

【讨论】：

那么，根据您的说法，源节点仅在单个源上工作？它与“createMediaStreamTrackSource()”有何不同？它的实现方式与问题中的 sn-p 中提到的方式相同？

从您的 cmets 看来，this.mediaStreamObj 似乎是一个包含许多音轨的视频。如果是这样，那么createMediaStreamTrackSource 将允许您准确选择您想要的音轨并使用它。 createMediaStreamSource 选择“第一个”曲目。这基本上就是两者之间的区别。

不不，实际上每个媒体流对象是指单个用户的流，由 2 个轨道组成（即该特定用户的音频和视频轨道）。每个用户都有自己的媒体流对象。因此，我从服务器获取了一组对象，其中每个对象都指向一个单独的用户流。

好的，很抱歉。那我看不出你的代码有什么问题。也许更完整的示例会有所帮助，尤其是我可以从 jsfiddle 或 codepen 等运行的东西。

很抱歉，由于我正在从远程服务器获取媒体流对象，因此我无法展示工作演示。