# Get started To get started, install [the Probe SDK package](https://npmjs.com/package/@zoom/probesdk) into your project. ```shell 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: ```javascript // 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. ```javascript // 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. ```javascript // 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. ```javascript // 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 `` 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`. ```javascript // 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. ```javascript // 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](https://marketplacefront.zoom.us/sdk/probe/index.html) 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](/support/) to troubleshoot any issues discovered.