Get started

To get started, install the Probe SDK package into your project.

npm install @zoom/probesdk --save

Import Prober class

Some modules and components are defined in the Probe SDK. To quickly build the diagnostic page, import the Prober class from the Probe SDK. For example, in your index.js file:

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();

Invoke the Prober() constructor directly to create an instance of it. Next, you can access any capability of the prober.

The Prober provides the following capabilities:

  1. Request media permission then request media devices.
  2. Diagnose audio and video.
  3. Start a comprehensive diagnostic test to diagnose the network and report the basic information and supported features.

Request media permission and devices

Invoke requestMediaDevicePermission to request media permission. In most cases, the SDK will request the permission of audio and video devices. It returns a promise that wraps a MediaPermissionResult object which has an error field and MediaStream field. You can handle the MediaStream in any way you like and handle the error if there are any exceptions.

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();
// request media permission
function getMediaPermission() {
    prober
        .requestMediaDevicePermission({ audio: true, video: true })
        .then((result) => {
            console.log(
                `stream=${result.stream?.id}, error:${result.error?.message}`,
            );
        });
}

Request media devices

To request media devices, call requestMediaDevices. The SDK returns exceptions in a MediaDeviceResult, which includes a list of devices and an error object with any exceptions. Each device is an instance of MediaDeviceInfo, which is a standard Javascript API.

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();
// request media devices
function getMediaDevices() {
    prober.requestMediaDevices().then((result) => {
        console.log(`error:${result.error}, devices=${result.devices}`);
    });
}

Diagnose audio and video

Prober provides the capability to diagnose or check whether the audio devices and video devices work or not. Invoke diagnoseAudio and diagnoseVideo to complete the audio and video diagnostic tests.

Add audio diagnostic test

For the audio diagnostic test, you must prepare two constraints. One for audio input and one for audio output. For example, the audio input might be the microphone and the audio output might be the speaker. This API requires an indication of which input and output devices to diagnose. Provide the deviceId of the audio input and output devices as the constraints. It returns a DiagnosticResult, which indicates whether the diagnostic has successfully started or not.

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();
// start an audio diagnostic
function startToDiagnoseAudio() {
    const audioInputConstraint = {
        audio: { deviceId: "default" },
        video: false,
    };
    const audioOutputConstraint = {
        audio: { deviceId: "xxxxxxxxxxxxxxxx" },
        video: false,
    };
    const duration = 5000; // how long you want to record the sound, milliseconds
    const diagnoseResult = prober.diagnoseAudio(
        audioInputConstraint,
        audioOutputConstraint,
        duration,
    );
    console.log(diagnoseResult);
}

Once you've invoked the audio test on your diagnostic page, you can add some icons or animations on the page to show that the recording or playback is running. After about five seconds, you should hear the playback on your speaker.

Add video diagnostic test

For the video diagnostic test, you also must prepare some parameters before calling diagnoseVideo.

  • The first parameter is a constraint, like the audio constraint, to indicate which camera device to diagnose. For example, select one of your connected cameras and use its deviceId.
  • The second parameter is the video options. This is a required parameter that you must pass to the function. You must indicate to the Probe SDK how to render a video stream on a target by setting a type field and a target field.

The Probe SDK supports four different type fields that correspond to the following numeric values:

  1. video-tag
  2. WebGL
  3. WebGL2
  4. WebGPU

Pass the numeric value of the type along with a target type. The video-tag type requires a <video-tag> element, and WebGL, WebGL2,and WebGPU require a Canvas or OffscreenCanvas element. If the rendering method you pass is not supported, the SDK throws an error in the DiagnosticResult.

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();
// start a video diagnostic
function startToDiagnoseVideo(canvas) {
    const constraint = {
        video: {
            deviceId: "default",
        },
    };
    const options = {
        type: 2, // WebGL
        target: canvas,
    };
    prober.diagnoseVideo(constraint, options).then((diagnosticResult) => {
        console.log(diagnosticResult);
    });
}

Using this example, you'll see that the video stream captured from the selected camera is rendered on the screen. If it failed, check the result to see if you got an error.

Start a comprehensive network diagnostic test

You can make one call to perform a comprehensive network diagnostic test. This method requires some optional URLs and a listener.

The Probe SDK uses default JavaScript and WASM files to perform the diagnostic tests, but you can also host these files elsewhere and supply the URLs in the API. To use the defaults, pass an empty string for each value.

The test requires that you pass a listener called networkStatsListener. This listener observes the statistics coming from a network diagnostic. Once a network diagnostic is running successfully, the SDK triggers the listener and sets the statistics. You can use the statistics to do some specific work, like showing them on a chart, doing some calculations, or other work.

This comprehensive diagnostic requires the network diagnostic. Therefore, once called, a network diagnostic is launched. It runs for about two minutes, then returns a Promise that wraps a DiagnosticReport object with the results. In addition to the network diagnostic results, the report includes information from the basic module and supported features.

// index.js
import { Prober } from "@zoom/probesdk";
// create a new instance of Prober
const prober = new Prober();
function startToDiagnose() {
    // 1. you can ignore the URLs, so the default URLs that deployed in the ProbeSDK will be used
    const jsUrl = "";
    const wasmUrl = "";
    const config = { probeDuration: 120 * 1000, connectTimeout: 20 * 1000 };
    prober
        .startToDiagnose(jsUrl, wasmUrl, config, (stats) => {
            console.log(stats);
        })
        .then((report) => {
            // a DiagnosticReport has main 3 structures we need to handle
            console.log(report.networkDiagnosticResult);
            console.log(report.basicInfo);
            console.log(report.supportedFeatures);
        });
    // 2. you can pass the URLs if you have
    const jsUrl = "https://xxxxx/x/prober.js";
    const wasmUrl = "https://xxxxx/x/wasm.js";
    prober
        .startToDiagnose(jsUrl, wasmUrl, config, (stats) => {
            console.log(stats);
        })
        .then((report) => {
            // a DiagnosticReport has main 3 structures we need to handle
            console.log(report.networkDiagnosticResult);
            console.log(report.basicInfo);
            console.log(report.supportedFeatures);
        });
}

Once the diagnostic is finished, the SDK returns a diagnostic report.

Congratulations! The methods described on this page are the minimum you need to build a diagnostics web page. See the Probe SDK reference for more details.

Appendix: Diagnostic report format

The diagnostic report is a JSON file that lists the following browser attributes values as they relate to supported features.

  • Browser Name
  • Browser Version
  • OS
  • User Agent
  • Hardware Concurrency
  • GPU Vendor
  • GPU Renderer
  • VideoFrame API
  • OffscreenCanvas API
  • SIMD
  • WebCodec
  • Hardware Acceleration
  • Graphics Acceleration
  • Suggested Minimum Browser Version

Work with Zoom Developer Support to troubleshoot any issues discovered.