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

Question

I am working on integrating easyrtc on my system. Currently I am able to make audio and video calls. But after some time I can hear my own voice and there is a significant delay. I checked in chrome with chrome:webrtc-internals, and there seems to be no input in echo cancellation technology. How can I enable it? Thank you. If there is anything more required

Our integration code :

<%@ 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);

score 2 · Accepted Answer · answered Jul 17 '17 at 18:41

"Noise cancellation" and "Can hear my own voice" are different things.

The first is known as Noise Suppression. The latter is known as AEC (acoustic echo cancellation).

In Chrome you can set them by specifying mediaConstraints, but i think that they are turned on by default:

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

In Firefox you need to use the "moz" prefix instead of "goog".

Kyle Baker · Answer 2 · 2020-08-06T17:54:03.177

To expand on the given answer, which helped as a starting point but doesn't explain implementation within easyrtc:

I've started an issue to talk about a pull request on open-easyrtc, but for now I've hacked my own fork with a one-line update:

(Note that I've posted the whole function here, but the actual change is tiny, as illustrated by comment--look for '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;
    };

This is a short term way to patch this in. Ideally open-easyrtc will get a way to arbitrarily add in feature flags like this in the future.

If you aren't going to implement your own fork of open-easyrtc, you'll need to instead use self._presetMediaConstraints. That, however, will exclude all the logic in this function, and exclude using functions like easyrtc.enableAudio, etc., if I'm not mistaken, requiring you to do all that yourself, or just copy/paste this code and have that mess floating around (as you see in this answer, this code might change in the future, and you wouldn't see or benefit from those updates). Longer term, that's probably the route I'd go, but I have a limited time/budget to work with for the client, and already have existing logic that works with the default code path in easyrtc, so I don't want to start making a mess for myself to rewrite all of that.

If you were to go that path, though, you'd do something like

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

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

2 Answers2