EasyRTC:Noice取消不起作用,可以听到我自己的声音

时间:2017-07-12 10:53:06

标签: javascript webrtc easyrtc

我正在努力将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);

2 个答案:

答案 0 :(得分:1)

“噪音消除”和“可以听到我自己的声音”是不同的事情。

第一种被称为噪音抑制。 后者称为AEC(声学回声消除)。

在Chrome中,您可以通过指定mediaConstraints来设置它们,但我认为它们默认情况下处于启用状态:

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

在Firefox中,您需要使用“moz”前缀而不是“goog”。

答案 1 :(得分:0)

要扩展给定的答案,这是一个起点,但没有解释easyrtc中的实现:

我已经开始讨论open-easyrtc上的拉取请求,但是现在我通过单行更新来破解自己的fork:

(请注意,我已经在此处发布了整个功能,但是实际的更改很小,如注释所示-寻找“ 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之类的函数,要求您自己完成所有操作,或者仅复制/粘贴此代码,然后乱七八糟(如您在此答案中看到的那样,此代码将来可能会更改,并且您不会看到这些更新或从中受益)。从长远来看,这可能是我要走的路,但是我为客户使用的时间/预算有限,并且已经具有与easyrtc中默认代码路径一起使用的现有逻辑,因此我不想开始弄乱自己重写所有这些内容。

如果要走那条路,你会做类似的事情

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