Giter VIP home page Giter VIP logo

rtc-diagnostics's Introduction

RTC Diagnostics SDK

The RTC Diagnostics SDK provides functions to test input and output devices (microphone, speaker, camera) as well as functionality to confirm that you meet the network bandwidth requirements required to make a voice call or join a video room.

This SDK requires the use of Twilio NTS or your own STUN/TURN servers to perform the network tests. Using Twilio NTS will mirror how Twilio uses STUN/TURN in Programmable Video when connecting to a Twilio Video Room and will incur charges as per NTS pricing.

Features

  • Input audio device tests
  • Input video device tests
  • Output audio device tests
  • Bandwidth requirements tests

Prerequisites

  • Node.js v12+
  • NPM v6+ (comes installed with newer Node versions)

Installation

Building the project locally

# Clone repository
git clone [email protected]:twilio/rtc-diagnostics.git
cd rtc-diagnostics

# Install dependencies
npm install

# Build the artifacts under dist folder
npm run build

In order to run integration tests, you'll need to copy over the credentials.example.json file to credentials.json in the same folder, and replace the empty fields with valid values.

NPM

You can install directly from npm.

npm install @twilio/rtc-diagnostics --save

Or install from a local directory.

npm install /local-path-to-repo/rtc-diagnostics

Using this method, you can import rtc-diagnostics like so:

import { testMediaConnectionBitrate } from '@twilio/rtc-diagnostics';

Script tag

You can also include rtc-diagnostics.js directly in your web app using a <script> tag.

<script src="https://my-server-path/rtc-diagnostics.js"></script>

Using this method, rtc-diagnostics.js will set a browser global:

const { testMediaConnectionBitrate } = Twilio.Diagnostics;

Usage

The following are examples for running tests. For more information, please refer to the API Docs

MediaConnectionBitrateTest Example

import { testMediaConnectionBitrate } from '@twilio/rtc-diagnostics';

const mediaConnectionBitrateTest = testMediaConnectionBitrate({
 iceServers: [{
   credential: 'bar',
   username: 'foo',
   urls: 'turn:global.turn.twilio.com:3478?transport=udp',
 }],
});

mediaConnectionBitrateTest.on('bitrate', (bitrate) => {
 console.log(bitrate);
});

mediaConnectionBitrateTest.on('error', (error) => {
 console.log(error);
});

mediaConnectionBitrateTest.on('end', (report) => {
 console.log(report);
});

setTimeout(() => {
 mediaConnectionBitrateTest.stop();
}, 10000);

See MediaConnectionBitrateTest.Options for more information for how to obtain the urls values

AudioInputTest Example

import { testAudioInputDevice, AudioInputTest } from '@twilio/rtc-diagnostics';

const audioInputDeviceTest = testAudioInputDevice({
  deviceId: ...,
});

audioInputDeviceTest.on(AudioInputTest.Events.Volume, (volume) => {
  console.log(volume);
});

audioInputDeviceTest.on(AudioInputTest.Events.Error, (error) => {
  console.error(error);
});

audioInputDeviceTest.on(AudioInputTest.Events.End, (report) => {
  console.log(report);
});

setTimeout(() => {
  audioInputDeviceTest.stop();
}, 10000);

VideoInputTest Example

import { testVideoInputDevice, VideoInputTest } from '@twilio/rtc-diagnostics';

const videoInputDeviceTest = testVideoInputDevice({ element: videoElement });

videoInputDeviceTest.on(VideoInputTest.Events.Error, (error) => {
  console.error(error);
});

videoInputDeviceTest.on(VideoInputTest.Events.End, (report) => {
  console.log(report);
});

setTimeout(() => {
  videoInputDeviceTest.stop();
}, 10000);

AudioOutputTest Example

import { testAudioOutputDevice, AudioOutputTest } from '@twilio/rtc-diagnostics';

const audioOutputDeviceTest = testAudioOutputDevice({
  deviceId: ...,
});

audioOutputDeviceTest.on(AudioOutputTest.Events.Volume, (volume) => {
  console.log(volume);
});

audioOutputDeviceTest.on(AudioOutputTest.Events.Error, (error) => {
  console.error(error);
});

audioOutputDeviceTest.on(AudioOutputTest.Events.End, (report) => {
  console.log(report);
});

setTimeout(() => {
  audioOutputDeviceTest.stop();
}, 10000);

Related

Testing Voice and Video calling readiness

Applications using Diagnostics and Preflight tests

Voice and Video JS SDKs

Connectivity requirements

License

See LICENSE.md

rtc-diagnostics's People

Contributors

aymenn avatar charliesantos avatar mhuynh5757 avatar pikajoyce avatar ryan-rowland avatar twilio-ci avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rtc-diagnostics's Issues

networktest.twilio.com

The UI for rtc-diagnostics is complementary and necessary to actually run the diagnostics. Are there plans to open source the javascipt code for the web site at networktest.twilio.com, which is needed to host and run these diagnostics?

Dependecies issues when building from source

When I try to npm install I get:

**npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @twilio/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typedoc
npm ERR! dev typedoc@"0.15.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typedoc@">=0.7.0 <0.15.0" from [email protected]
npm ERR! node_modules/typedoc-plugin-external-module-name
npm ERR! dev typedoc-plugin-external-module-name@"3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users//.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users//.npm/_logs/2023-01-24T21_27_42_265Z-debug.log**

Then if I downgrade typedoc and try again

**@rtc-diagnostics % npm install
npm WARN deprecated @types/[email protected]: This is a stub types definition. handlebars provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: 2.x is no longer supported. Please upgrade to 4.x or higher.
npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (debug-js/debug#797)
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: 1.x is no longer supported. Please upgrade to 3.x or higher.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm WARN deprecated [email protected]: 4.x is no longer supported. Please upgrade to 6.x or higher.
npm WARN deprecated [email protected]: This module is no longer maintained, try this instead:
npm WARN deprecated npm i nyc
npm WARN deprecated Visit https://istanbul.js.org/integrations for other alternatives.
npm WARN deprecated [email protected]: Version no longer supported. Upgrade to @latest
npm ERR! code 6
npm ERR! git dep preparation failed
npm ERR! command /usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users//.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! > [email protected] prepublish
npm ERR! > npm run build
npm ERR!
npm ERR!
npm ERR! > [email protected] build
npm ERR! > npm run clean && npm run grunt
npm ERR!
npm ERR!
npm ERR! > [email protected] clean
npm ERR! > rimraf bin
npm ERR!
npm ERR!
npm ERR! > [email protected] grunt
npm ERR! > grunt
npm ERR!
npm ERR! Running "copy:plugin" (copy) task
npm ERR! Copied 1 file
npm ERR!
npm ERR! Running "copy:themeDefault" (copy) task
npm ERR! Copied 36 files
npm ERR!
npm ERR! Running "copy:themeDefault2Minimal" (copy) task
npm ERR! Copied 23 files
npm ERR!
npm ERR! Running "copy:themeMinimal" (copy) task
npm ERR! Copied 4 files
npm ERR!
npm ERR! Running "sass:themeDefault" (sass) task
npm ERR! Warning:
npm ERR! You need to have Ruby and Sass installed and in your PATH for this task to work.
npm ERR! More info: https://github.com/gruntjs/grunt-contrib-sass
npm ERR! Use --force to continue.
npm ERR!
npm ERR! Aborted due to warnings.
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm ERR! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! npm WARN deprecated [email protected]: "Please update to latest v2.3 or v2.2"
npm ERR! npm WARN deprecated [email protected]: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm WARN using --force Recommended protections disabled.
npm ERR! npm ERR! code 6
npm ERR! npm ERR! path /Users//.npm/_cacache/tmp/git-clonepnX7HZ
npm ERR! npm ERR! command failed
npm ERR! npm ERR! command sh -c npm run build
npm ERR!
npm ERR! npm ERR! A complete log of this run can be found in:
npm ERR! npm ERR! /Users//.npm/_logs/2023-01-24T21_29_30_790Z-debug.log

npm ERR! A complete log of this run can be found in:
npm ERR! /Users//.npm/_logs/2023-01-24T21_29_38_592Z-debug.log**

And same if I try with --force

Question: Credentails for bitrate test

Hi,

For Bitrate test, From where can we get credentials in Twilio control panel ? I tried Combination of SID, Key & Secret but none of them work.

const mediaConnectionBitrateTest = testMediaConnectionBitrate({ iceServers: [{ credential: "?????", username: "?????", urls: ["turn:global.turn.twilio.com:3478?transport=tcp", "stun:global.stun.twilio.com:3478?transport=tcp"], }], });

Thanks

Getting DOMError while doing ng serve in angular

Describe the bug

Getting DOMError while doing ng serve in angular.

Error: node_modules/@twilio/rtc-diagnostics/es5/lib/errors/DiagnosticError.d.ts:10:15 - error TS2304: Cannot find name 'DOMError'.

10 domError: DOMError | DOMException | undefined;
~~~~~~~~
Error: node_modules/@twilio/rtc-diagnostics/es5/lib/errors/DiagnosticError.d.ts:27:28 - error TS2304: Cannot find name 'DOMError'.

27 constructor(domError?: DOMError | DOMException, message?: string);

ร— Failed to compile.

To Reproduce
Install the @twilio/rtc-diagnostics and then do ng serve in angular.

Expected behavior
It should build the project without any error.

Environment

  • OS: Windows 11 Pro
  • Browser: chrome Version 115.0.5790.110 (Official Build) (64-bit)
  • Node.js version: v18.16.0
  • [email protected]
    "@twilio/rtc-diagnostics": "^1.0.1",

Wrong package tags

Describe the bug
Currently, 1.0.0-preview3 has the latest tag. This is clearly wrong, as 1.0.0-beta2 should be tagged as such.

To Reproduce
N/A

Expected behavior
After installing the package using npm install @twilio/rtc-diagnostics or yarn add @twilio/rtc-diagnostics I get the latest version of the code.

Screenshots
N/A

Environment (please complete the following information):
N/A

Additional context
N/A

Speaker check for FireFox is unaware that all speakers are disabled

Describe the bug
On Microsoft Windows, all speakers can be disabled at the system level. Nevertheless, when the speaker check is run within Firefox, we detect that the speaker test is emitting volume events as if thee were a speaker available.

To Reproduce
We have a progress bar that proceeds on the reception of non-zero volume events. Alternatively one could enable a listener and record the reception of volume events in the browser console. So to begin, go to Windows control for sound devices and disable all, including the headphone jack. Execute the speaker test within Firefox and note that volume events are emitted as if the tones were actually being generated.

Expected behavior
We would expect that there would be some recognition, either an exception thrown or just a lack of non-zero volume events emitted.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: [e.g. Ubuntu 18.04]
  • Browser: [e.g. Chrome 80, Firefox 72]
  • App Version: [e.g. 0.1.0]
  • SDK Version: [e.g 2.1.0]
  • Node.js version: [e.g. 12.14.1]

Additional context
Add any other context about the problem here.

Error TS2339: Property 'AudioContext' does not exist on type 'Window'.

I am importing AudioInputTest and getting the following error:

ERROR in node_modules/@twilio/rtc-diagnostics/es5/lib/AudioInputTest.d.ts(272,45): error TS2339: Property 'AudioContext' does not exist on type 'Window'.
node_modules/@twilio/rtc-diagnostics/es5/lib/AudioOutputTest.d.ts(177,45): error TS2339: Property 'AudioContext' does not exist on type 'Window'.
node_modules/@twilio/rtc-diagnostics/es5/lib/recorder/audio.d.ts(47,9): error TS1086: An accessor cannot be declared in an ambient context.

I am using the latest SDK version (1.0.0) with the following environment:

  • Node 12.9.1
  • NPM 6.14.8
  • Angular 7.2.4
  • TypeScript 3.2.4

Dependencies are very strict

Describe the bug

The dependencies in package.json are strict:

  • precisely 3.0.0 of events
  • precisely 12.12.11 of @types/node

Is it really necessary for them to be strict down to the patchlevel? Surely not.

This means that I have these extra packages in my build now. In particular, events 3.0.0 dates from 2018, which just seems like it's asking for trouble.

Expected behavior

I haven't tried, but I guess events@^3 or events@^3.3 is sufficient.

I see lots of people are using @types/node@*, which seems totally reasonable.

Request: Avoid exact versions in package dependencies

What is the feature that you would like to see in the SDK? Please describe.
Would it be possible to avoid using exact version matchers in the dependencies of this package? This may cause bundling in multiple versions of the same package into a final users app packages.

Is your feature request related to a problem? Please describe.
Rationale explained above.

Describe alternatives you've considered

  dependencies: {
    '@types/events': '3.0.0',
    '@types/node': '12.12.11',
    events: '3.0.0'
  },

could be replaced by:

  dependencies: {
    '@types/events': '^3.0.0',
    '@types/node': '^12.12.11',
    events: '^3.0.0'
  },

to avoid bundling in multiple versions of the same package.

Additional context
N/A

Error TS2717: Subsequent property declarations must have the same type error

I have an Angular application where I use @twilio/video-processors package and decided to add some @twilio/rtc-diagnostics features, but unfortunately getting the Subsequent property declarations must have the same type error during the build.

To Reproduce

  1. Install packages into the application:
"@twilio/video-processors": "~1.0.2",
"@twilio/rtc-diagnostics": "~1.0.0"
  1. Try to build it

Screenshots
image

Environment:

  • OS: Windows 10
  • Browser: Chrome 107.0.5304.88
  • SDK Version: 1.0.0
  • Node.js version: 16.13.1

'No Audio Detected' on video-diagnostics.twilio.com app using newest version of MacOs(Ventura), IpadOs (16)

We are using video-diagnostics.twilio.com to test audio/video quality.
On the "Test your audio test" after pressing "Record" then 'Play back' button we see the error 'No Audio Detected' and we can't hear any sound.
This happens only on new versions of MacOs(Ventura), IpadOs (16).

Previous versions were working well

Steps to reproduce the behavior.

  • Go to diagnostic app https://video-diagnostics.twilio.com/
  • Go through the steps till "Test your audio test"
  • Press "Record" button
  • Press 'Play back' button
  • Error 'No Audio Detected' should appear without any sound.

Environment:

  • OS: MacOs(Ventura), IpadOs (16)
  • Browser: [Chrome, Safari]

iPhone 12 and above not able to detect audioOutput

Describe the bug
I utilized the "testAudioOutputDevice" function provided by the "@twilio/rtc-diagnostics" package to examine the audio output. This involved playing back a recorded audio input using the "testAudioInputDevice" function on Chrome and Safari browsers, specifically on iPhone 12 and newer models.

Just to give you some context, I developed a function called "playBack" that incorporates the "testAudioOutputDevice" function, as well as a "readAudioInput" function that uses the "testAudioInputDevice" function.

readAudioInput function:

const readAudioInput = useCallback(
  (options) => {
    if (audioInputTest) {
      audioInputTest.stop();
    }

    log.debug("AudioInputTest running");

    const duration = options.enableRecording
      ? RECORD_DURATION
      : INPUT_TEST_DURATION;
    options = { duration, ...options };
    audioInputTest = testAudioInputDevice(options);

    setIsAudioInputTestRunning(true);
    if (options.enableRecording) {
      log.debug("Recording audio");
      setTestEnded(false);
      setIsRecording(true);
      setWarning("");
      setError("");
    }

    audioInputTest.on(AudioInputTest.Events.Volume, (value) => {
      setInputLevel(getAudioLevelPercentage(value));
    });

    audioInputTest.on(AudioInputTest.Events.End, (report) => {
      if (playbackURI && report.recordingUrl) {
        URL.revokeObjectURL(playbackURI);
      }

      if (report.recordingUrl) {
        setPlaybackURI(report.recordingUrl);
      }

      setIsRecording(false);
      setIsAudioInputTestRunning(false);

      log.debug("AudioInputTest ended", report);
    });

    audioInputTest.on(AudioInputTest.Events.Error, (diagnosticError) => {
      log.debug("audioInputTest error", diagnosticError);
      setError(getErrorMessage(diagnosticError));
    });
    audioInputTest.on(AudioInputTest.Events.Warning, (name) => {
      log.debug("warning", name);
    });
    audioInputTest.on(AudioInputTest.Events.WarningCleared, (name) => {
      log.debug("warning-cleared", name);
    });
  },
  [playbackURI]
);

playBack function:

const playAudio = useCallback(
    (options) => {
      log.debug("AudioOutputTest running");

      options = { doLoop: false, duration: RECORD_DURATION, ...options }; // Set duration (which works as timeout) explicitly since testAudioOutputDevice is not ended in rare cases (i.e. iOS/Safari)
      const audioOutputTest = testAudioOutputDevice(options);

      setIAudioOutputTestRunning(true);
      setTestEnded(false);
      setWarning("");
      setError("");

      audioOutputTest.on(AudioOutputTest.Events.Volume, (value) => {
        setOutputLevel(getAudioLevelPercentage(value));
      });

      audioOutputTest.on(AudioOutputTest.Events.End, (report) => {
        setIAudioOutputTestRunning(false);
        setTestEnded(true);
        setOutputLevel(0);

        const stdDev = getStandardDeviation(report.values);

        if (stdDev === 0) {
          setError(translate("page.twilio.rtc.test.audio.error.title"));
        } else if (stdDev < AUDIO_LEVEL_STANDARD_DEVIATION_THRESHOLD) {
          setWarning(translate("page.twilio.rtc.test.audio.warning.title"));
        }

        log.debug("AudioOutputTest ended", report);
      });

      audioOutputTest.on(AudioOutputTest.Events.Error, (diagnosticError) => {
        log.debug("audioOutputTest error", diagnosticError);

        setError(getErrorMessage(diagnosticError));
      });
    },
    [translate]
  );

When I execute the "testAudioInputDevice" function, it successfully runs the audio input test and returns a report. Upon inspecting the report object, I observe the recordingUrl and an array of values containing numerical data. I store this recordingUrl as a React state and pass it to the "playBack" function when initiating the playback process.

However, when I examine the report generated by the "testAudioOutputDevice" function, it consistently returns a value array filled with zeros. As a result, this array of zeros signifies the absence of actual audio, leading to detection of "no audio".

Please refer to the report object screenshots below.

This works perfectly fine on iPhone 11 but it doesn't seem to work for iPhone 12 and above.

To Reproduce

  1. Initiate the readAudioInput function, which uses "testAudioInputDevice" function from "@twilio/rtc-diagnostics" to record the audio input. This will set recordingUrl as the React State.

  2. Initiate the playBack function, which uses "testAudioOutputDevice" function from "@twilio/rtc-diagnostics" by passing recordingUrl React State.

Expected behavior
The report object that is returned by "testAudioOutputDevice" function should contain a value array with numbers.
That way, we can successfully play back the recorded audio input to the user.

Screenshots
Screenshot #1: audio input test report object
image

Screenshot #2: audio output test report object
image

Environment (please complete the following information):
iPhone 12

  • OS: 15.7
  • Browser: Safari 15, Chrome 114.0.5735.124

iPhone 14

  • OS: 16.5.1
  • Browser Safari 16, Chrome 114.0.5735.124

SDK Version: "@twilio/rtc-diagnostics": "^1.0.0"

unable to find DOMError on using @twilio/rtc-diagnostics

Describe the bug
using a typescript version of 4.8.4
angular : v15

To Reproduce
on using "AudioInputTest" from @twilio/rtc-diagnostics compiler unable to find DOMError

Error: node_modules/@twilio/rtc-diagnostics/es5/lib/errors/DiagnosticError.d.ts:27:28 - error TS2304: Cannot find name 'DOMError'.

DOMError has been deprecated and replaced to DOMException in higher version

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: [e.g. Ubuntu 18.04]
  • Browser: [e.g. Chrome 80, Firefox 72]
  • App Version: [e.g. 0.1.0]
  • SDK Version: [e.g 2.1.0]
  • Node.js version: [e.g. 12.14.1]

Additional context
Add any other context about the problem here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.