add audio controls

signalwire · Jun 24, 2024 · 4ba90ca · 4ba90ca
1 parent fcb722a
commit 4ba90ca
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 4 deletions.
diff --git a/internal/e2e-js/templates/blank/sdk_v2.min.js b/internal/e2e-js/templates/blank/sdk_v2.min.js
diff --git a/internal/e2e-js/templates/blank/v2vanilla.html b/internal/e2e-js/templates/blank/v2vanilla.html
@@ -9,8 +9,8 @@
  <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 
  <!-- Include the SignalWire Relay JS SDK -->
- <script type="text/javascript" src="https://unpkg.com/@signalwire/js@^1"></script>
- <!-- <script type="text/javascript" src="index.min.js"></script> -->
+ <!-- script type="text/javascript" src="https://unpkg.com/@signalwire/js@^1.4.0"></script -->
+ <script type="text/javascript" src="sdk_v2.min.js"></script>
 
  <!-- To style up the demo a little -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
@@ -94,6 +94,14 @@ <h5>Remote Video</h5>
  </div>
  <button id="startCall" class="btn btn-primary px-5 mt-4" onClick="makeCall()" disabled="true">Call</button>
  <button id="hangupCall" class="btn btn-danger px-5 mt-4 d-none" onClick="hangup()" disabled="true">Hang up</button>
+ <div class="form-group">
+ <button id="btnAutoGainControlOn" class="btn btn-primary px-5 mt-4 d-none" onClick="autoGainControlOn()">autoGainControl on</button>
+ <button id="btnAutoGainControlOff" class="btn btn-primary px-5 mt-4 d-none" onClick="autoGainControlOff()">autoGainControl off</button>
+ <button id="btnEchoCancellationOn" class="btn btn-primary px-5 mt-4 d-none" onClick="echoCancellationOn()">echoCancellationOn on</button>
+ <button id="btnEchoCancellationOff" class="btn btn-primary px-5 mt-4 d-none" onClick="echoCancellationOff()">echoCancellationOn off</button>
+ <button id="btnNoiseSuppressionOn" class="btn btn-primary px-5 mt-4 d-none" onClick="noiseSuppressionOn()">noiseSuppressionOn on</button>
+ <button id="btnNoiseSuppressionOff" class="btn btn-primary px-5 mt-4 d-none" onClick="noiseSuppressionOff()">noiseSuppressionOff off</button>
+ </div>
  <div class="form-group" id="dtmfKeys" hidden="false">
  <button id="dtmf_1" class="btn btn-primary px-2 mt-4" onClick="dtmf()">1</button>
  <button id="dtmf_2" class="btn btn-primary px-2 mt-4" onClick="dtmf()">2</button>
@@ -133,9 +141,10 @@ <h4>Troubleshooting</h4>
  <script type="text/javascript">
  var client;
  var currentCall = null;
+ window.__host = 'relay.swire.io'
 
- var project = localStorage.getItem('relay.example.project') || '';
- var token = localStorage.getItem('relay.example.token') || '';
+ var project = localStorage.getItem('relay.example.project') || '5b4b11d6-0824-4a66-b3f9-d5aabdf6ab8e';
+ var token = localStorage.getItem('relay.example.token') || 'PT5e107a634c77cf9da772bb0e75d23b41df6c6ac01611dd25';
  var number = localStorage.getItem('relay.example.number') || '';
  var numberFrom = localStorage.getItem('relay.example.numberFrom') || '';
  var audio = localStorage.getItem('relay.example.audio') || '1';
@@ -279,12 +288,21 @@ <h4>Troubleshooting</h4>
  case 'active': // Call has become active
  startCall.classList.add('d-none');
  hangupCall.classList.remove('d-none');
+ btnAutoGainControlOff.classList.remove('d-none')
+ btnEchoCancellationOff.classList.remove('d-none')
+ btnNoiseSuppressionOff.classList.remove('d-none')
  hangupCall.disabled = false;
  dtmfKeys.hidden=false;
  break;
  case 'hangup': // Call is over
  startCall.classList.remove('d-none');
  hangupCall.classList.add('d-none');
+ btnAutoGainControlOff.classList.add('d-none')
+ btnEchoCancellationOff.classList.add('d-none')
+ btnNoiseSuppressionOff.classList.add('d-none')
+ btnAutoGainControlOn.classList.add('d-none')
+ btnEchoCancellationOn.classList.add('d-none')
+ btnNoiseSuppressionOn.classList.add('d-none')
  hangupCall.disabled = true;
  dtmfKeys.hidden=true;
  break;
@@ -370,6 +388,53 @@ <h4>Troubleshooting</h4>
  }
  }
 
+ function setAudioConstraints(options) {
+ const {autoGainControl, echoCancellation, noiseSuppression
+ } = currentCall.options.localStream.getAudioTracks()[0].getSettings();
+ currentCall.applyMediaConstraints({mediaParams: {audio: {
+ autoGainControl,
+ echoCancellation,
+ noiseSuppression,
+ ...options
+ }}})
+ }
+
+ function autoGainControlOn() {
+ btnAutoGainControlOn.classList.add("d-none")
+ btnAutoGainControlOff.classList.remove("d-none")
+ setAudioConstraints({autoGainControl: true})
+ }
+
+ function autoGainControlOff() {
+ btnAutoGainControlOff.classList.add("d-none")
+ btnAutoGainControlOn.classList.remove("d-none")
+ setAudioConstraints({autoGainControl: false})
+ }
+
+ function echoCancellationOn() {
+ btnEchoCancellationOn.classList.add("d-none")
+ btnEchoCancellationOff.classList.remove("d-none")
+ setAudioConstraints({echoCancellation: true})
+ }
+
+ function echoCancellationOff() {
+ btnEchoCancellationOff.classList.add("d-none")
+ btnEchoCancellationOn.classList.remove("d-none")
+ setAudioConstraints({echoCancellation: false})
+ }
+
+ function noiseSuppressionOn() {
+ btnNoiseSuppressionOn.classList.add("d-none")
+ btnNoiseSuppressionOff.classList.remove("d-none")
+ setAudioConstraints({noiseSuppression: true})
+ }
+
+ function noiseSuppressionOff() {
+ btnNoiseSuppressionOff.classList.add("d-none")
+ btnNoiseSuppressionOn.classList.remove("d-none")
+ setAudioConstraints({noiseSuppression: false})
+ }
+
  /**
  * Hangup the currentCall if present
  */