diff --git a/README.md b/README.md index a627251..81f0065 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ This is where we initialise a new Plivo object by passing `options` as `plivoWeb plivoWebSdk.client.on('onMediaPermission', onMediaPermission); plivoWebSdk.client.on('mediaMetrics',mediaMetrics); plivoWebSdk.client.on('audioDeviceChange',audioDeviceChange); + plivoWebSdk.client.on('onConnectionChange', onConnectionChange); + plivoWebSdk.client.on('volume', volume); plivoWebSdk.client.setRingTone(true); plivoWebSdk.client.setRingToneBack(true); console.log('initPhone ready!') @@ -425,4 +427,18 @@ $('#sendFeedback').click(function(){ plivoWebSdk.client.sendQualityFeedback(lastCallid,score,comment); customAlert('Quality feedback ',lastCallid); }); -``` \ No newline at end of file +``` + +### Real-time volume indicator on UI +Display user real-time volume of mic and speaker. +'volume' event handler will be invoked 60 times per second. The handler receives inputVolume and outputVolume as percentages of maximum volume represented by a floating point number between 0.0 and 1.0, inclusive. This value represents a range of relative decibel values between -100dB and -30dB. +![plivo-websdk-2.0-example](img/volume.png) + +```js +function volume(audioStats){ + inputVolume = audioStats.inputVolume; + outputVolume = audioStats.outputVolume; + inputVolumeBar.style.width = Math.floor(inputVolume * 400) + ‘px’; + outputVolumeBar.style.width = Math.floor(outputVolume * 400) + ‘px’; +} +``` diff --git a/img/volume.png b/img/volume.png new file mode 100644 index 0000000..ab5ec1b Binary files /dev/null and b/img/volume.png differ diff --git a/webApp-plivo/public/js/customclient.js b/webApp-plivo/public/js/customclient.js index 9a6bb39..1a4bb2d 100644 --- a/webApp-plivo/public/js/customclient.js +++ b/webApp-plivo/public/js/customclient.js @@ -636,7 +636,7 @@ function tokenGenFunc(){ } -function onVolume(audioStats){ +function volume(audioStats){ inputVolume = audioStats.inputVolume; outputVolume = audioStats.outputVolume; inputVolumeBar.style.width = Math.floor(inputVolume * 400) + 'px'; @@ -1043,7 +1043,7 @@ function initPhone(username, password){ plivoWebSdk.client.on('audioDeviceChange',audioDeviceChange); plivoWebSdk.client.on('onPermissionNeeded', onPermissionNeeded); plivoWebSdk.client.on('onConnectionChange', onConnectionChange); // To show connection change events - plivoWebSdk.client.on('volume', onVolume); + plivoWebSdk.client.on('volume', volume); // Methods plivoWebSdk.client.setRingTone(true);