Webrtc 多方视频聊天-检测对等扬声器

我已经实现了多方视频聊天（支持音频和视频），并且工作正常。我怎样才能知道哪个同伴在讲话，并突出显示该用户之外的绿色图标

onstreameded仅在添加新流时才被调用，但我如何跟踪 他目前正在发言

问候

---

Raghav

看看Otalk hark github项目

Hark是一个小型浏览器/commonJS模块，用于监听音频流，并发出事件指示用户是否在讲话。Hark使用webaudio API对音频流中的音频进行FFT（获取功率）。如果功率高于阈值，则确定为语音

您好，您可以使用下面的逻辑在页面上显示活动用户。
打字稿：-
类AudioListenerBase{
私有音频_进度：编号=0；
私有audioContext=新audioContext（）；
专用分析器：分析器节点；
专用话筒：MediaStreamAudioSourceNode；
私有javascriptNode:ScriptProcessorNode；
公共远程选择：任何；
建造师(
私人区域：NgZone，
私人cd:ChangeDetectorRef，
私有流：任何，
私人电话：有吗
) {
this.analyzer=this.audioContext.createAnalyzer（）；
this.micro=this.audioContext.createMediaStreamSource（流）；
this.javascriptNode=this.audioContext.createScriptProcessor（2048,1,1）；
此.Analyzer.smoothingTimeConstant=0.8；
this.analyzer.fftSize=1024；
该麦克风连接（该分析仪）；
this.analyzer.connect（this.javascriptNode）；
this.javascriptNode.connect（this.audioContext.destination）；
this.javascriptNode.onaudioprocess=（（）=>{
var阵列=新的UINT8阵列（此.analyzer.frequencyBinCount）；
此.analyzer.getByTefFrequencyData（阵列）；
var值=0；
var length=array.length；
对于（变量i=0；i5 | |平均值-this.audio_进度>5）
此.zone.run（（）=>{
这个.audio_进度=平均值；
this.cd.detectChanges（）；
audioProgressCallBack（this.audio\u progress，this.remotesElement）
});
});
归还这个；
}
}
组件上的用法：-
this.myAudioListener=新的AudioListenerBase（this.zone，this.changeDetectorRef，stream，（val，remotesElement）=>{
this.audio_progress=val；
});
关于组件Html：
{{item.username}
{{{item.audio\u progress>20？'speaking..'：'}

您可以使用AudioAPI实现一些神奇的功能。Hark很不错。然而，它的语音检测无法与Cohen的主要说话人（）这样的高级算法相媲美——这种技术需要服务器（包括支持），因为它们需要来自每个人的数据。

Hi you can use below logic to show active user on page.

Typescript:- 
        class AudioListenerBase {
          private audio_progress: number = 0;
          private audioContext = new AudioContext();
          private analyser: AnalyserNode;
          private microphone: MediaStreamAudioSourceNode;
          private javascriptNode: ScriptProcessorNode;

          public remotesElement: any;

      constructor(
        private zone: NgZone,
        private cd: ChangeDetectorRef,
        private stream: any,  
        private audioProgressCallBack: any
      ) {
        this.analyser = this.audioContext.createAnalyser();
        this.microphone = this.audioContext.createMediaStreamSource(stream);
        this.javascriptNode = this.audioContext.createScriptProcessor(2048, 1, 1);

        this.analyser.smoothingTimeConstant = 0.8;
        this.analyser.fftSize = 1024;

        this.microphone.connect(this.analyser);
        this.analyser.connect(this.javascriptNode);
        this.javascriptNode.connect(this.audioContext.destination);
        this.javascriptNode.onaudioprocess = (() => {
          var array = new Uint8Array(this.analyser.frequencyBinCount);
          this.analyser.getByteFrequencyData(array);
          var values = 0;

          var length = array.length;
          for (var i = 0; i < length; i++) {
            values += (array[i]);
          }
          var average = (values / length) * 10;


          if (this.audio_progress - average > 5 || average - this.audio_progress > 5)
            this.zone.run(() => {
              this.audio_progress = average;
              this.cd.detectChanges();
              audioProgressCallBack(this.audio_progress, this.remotesElement)

            });

        });

        return this;

      }
    }


usage on component :-

       this.myAudioListener = new AudioListenerBase(this.zone, this.changeDetectorRef, stream, (val, remotesElement) => {
                    this.audio_progress = val;
                  });

On component Html:

     <div> <p>{{item.username}}</p> <p style="font-size:10px">{{item.audio_progress>20?'speaking..':''}}</p></div>