EasyRTC：噪音消除不起作用，可以听到我自己的声音

Question

我正在努力将 easyrtc 集成到我的系统中。目前我可以进行音频和视频通话。但是一段时间后我可以听到自己的声音并且有明显的延迟。我用chrome:webrtc-internals签入了chrome，回声消除技术好像没有输入。 How can I enable it? 谢谢。如果还有什么需要的话

我们的集成代码：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ page session="true" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="de">
<head>
    <jsp:include page="../common/meta.jsp"/>
    <title>&nbsp;<spring:message code="meta.title.videochat"/></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/easyrtc.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/jquery-ui.css">
</head>
<body class="stream-view">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        if (typeof jQuery == 'undefined') {
            document.write(unescape("%3Cscript src='/resources/js/plugins/jquery-2.1.4.min.js' type='text/javascript'%3E%3C/script%3E"));
        }
    </script>
    <script type="text/javascript" src="https://www.OUR_APP.com:PORT/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/easyrtc/easyrtc.js?version=${appVersionNumber}"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/easyrtc/easyrtc_rates.js?version=${appVersionNumber}"></script>
  var activeBox = -1;  // nothing selected
    var aspectRatio = 4/3;  // standard definition video aspect ratio
    var maxCALLERS = 5;
    var numVideoOBJS = maxCALLERS;
    var layout;
    var microphone = true;
    var camera = true;

    var getURLParameter = function(name){
        if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
            return decodeURIComponent(name[1]);
    };

    var personal = getURLParameter("p");
    var group = getURLParameter("g");

    easyrtc.setSocketUrl("https://www.OUR_APP.com:PORT");
    easyrtc.dontAddCloseButtons(true);

Answer 1

"Noise cancellation" 和 "Can hear my own voice" 是不同的东西。

第一个称为噪声抑制。后者称为 AEC（声学回声消除）。

在 Chrome 中，您可以通过指定 mediaConstraints 来设置它们，但我认为它们是默认打开的：

var mediaConstraints = {
    audio: {
        echoCancellation: { exact: true },
        googEchoCancellation: { exact: true},
        googAutoGainControl: { exact: true},
        googNoiseSuppression: { exact: true},
    }
}

在 Firefox 中，您需要使用 "moz" 前缀而不是 "goog"。

Answer 2

扩展给定的答案，这有助于作为一个起点，但没有解释 easyrtc 中的实现：

我已经开始讨论 open-easyrtc 上的拉取请求，但现在我已经通过单行更新破解了我自己的分支：

（请注意，我在这里发布了整个函数，但实际变化很小，如评论所示——查找 'START FORK'）

self.getUserMediaConstraints = function() {
        var constraints = {};
        //
        // _presetMediaConstraints allow you to provide your own constraints to be used
        // with initMediaSource.
        //
        if (self._presetMediaConstraints) {
            constraints = self._presetMediaConstraints;
            delete self._presetMediaConstraints;
            return constraints;
        }  else if (!self.videoEnabled) {
            constraints.video = false;
        }
        else {

            // Tested Firefox 49 and MS Edge require minFrameRate and maxFrameRate 
            // instead max,min,ideal that cause GetUserMedia failure.
            // Until confirmed both browser support idea,max and min we need this.
            if (
                adapter && adapter.browserDetails &&
                    (adapter.browserDetails.browser === "firefox" || adapter.browserDetails.browser === "edge")
            ) {
                constraints.video = {};
                if (self._desiredVideoProperties.width) {
                    constraints.video.width = self._desiredVideoProperties.width;
                }
                if (self._desiredVideoProperties.height) {
                    constraints.video.height = self._desiredVideoProperties.height;
                }
                if (self._desiredVideoProperties.frameRate) {
                    constraints.video.frameRate = { 
                        minFrameRate: self._desiredVideoProperties.frameRate,
                        maxFrameRate: self._desiredVideoProperties.frameRate
                    };
                }
                if (self._desiredVideoProperties.videoSrcId) {
                    constraints.video.deviceId = self._desiredVideoProperties.videoSrcId;
                }

            // chrome and opera
            } else { 
                constraints.video = {};
                if (self._desiredVideoProperties.width) {
                     constraints.video.width = { 
                        max: self._desiredVideoProperties.width,
                        min : self._desiredVideoProperties.width,
                        ideal : self._desiredVideoProperties.width 
                     };
                }
                if (self._desiredVideoProperties.height) {
                    constraints.video.height = {
                        max: self._desiredVideoProperties.height,
                        min: self._desiredVideoProperties.height,
                        ideal: self._desiredVideoProperties.height
                    };
                }
                if (self._desiredVideoProperties.frameRate) {
                    constraints.video.frameRate = {
                        max: self._desiredVideoProperties.frameRate,
                        ideal: self._desiredVideoProperties.frameRate
                    };
                }
                if (self._desiredVideoProperties.videoSrcId) {
                    constraints.video.deviceId = self._desiredVideoProperties.videoSrcId;
                }
                // hack for opera
                if (Object.keys(constraints.video).length === 0 ) {
                    constraints.video = true;
                }
            }
        }

        if (!self.audioEnabled) {
            constraints.audio = false;
        }
        else {
            // START FORK FOR ECHO CANCELLATION
            // 
            //
            // see: https://github.com/open-easyrtc/open-easyrtc/issues/47

            // constraints.audio = {};
            constraints.audio = {
                sampleSize: 8,
                echoCancellation: true,
            };
            //
            // END FORK
            //
    
            if (self._desiredAudioProperties.audioSrcId) {
            //    constraints.audio.deviceId = {exact: self._desiredAudioProperties.audioSrcId};
             constraints.audio.deviceId = self._desiredAudioProperties.audioSrcId;
            }
        }
        console.log("CONSTRAINTS", constraints)
        return constraints;
    };

这是修补它的短期方法。理想情况下，open-easyrtc 将来会得到一种任意添加这样的功能标志的方法。

如果您不打算实现自己的 open-easyrtc 分支，则需要改用 self._presetMediaConstraints。但是，这将排除此函数中的所有逻辑，并排除使用 easyrtc.enableAudio 等函数，如果我没记错的话，要求您自己完成所有操作，或者只是 copy/paste 这个代码并让那些乱七八糟的东西四处飘荡（正如您在此答案中看到的那样，此代码将来可能会更改，并且您不会看到这些更新或从这些更新中受益）。从长远来看，这可能是我要走的路线，但我有一个有限的 time/budget 可以为客户端工作，并且已经有与 easyrtc 中的默认代码路径一起工作的现有逻辑，所以我不想开始把自己弄得一团糟，重写所有这些。

不过，如果你要走那条路，你会做类似的事情

easyrtc._presetMediaConstraints = {
    audio: {
      sampleSize: 8,
      echoCancellation: true
    }
  }

EasyRTC：噪音消除不起作用，可以听到我自己的声音

EasyRTC : Noice cancellation not working, can hear my own voice

javascript

webrtc

easyrtc