Question

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

仅在添加新流时才会调用onStreamAdded，但如何跟踪谁在说话。

此致 RAGHAV

Answer 1

看看Otalk hark github项目。

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

Answer 2

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>

多方视频聊天 - 检测同伴发言人

2 个答案: