Zero to one with Zoom Video SDK

The Video SDK allows you to seamlessly integrate Zoom technology into your application. Starting from ground 0, this quick guide will help you add video and audio to your Javascript project.

Prerequisites:

Step 1: Install the Zoom Video SDK package

Using npm or yarn, install the Video SDK package into your project directory and import it into your component where you want to use it.

import ZoomVideo from "@zoom/videosdk";

Step 2: Initialize a Video SDK session

Before you can join a session or add video, you need to initialize the Video SDK package. To do so, you’ll need to:

Create your Zoom Video SDK client and store to a variable

Const client = ZoomVideo.createClient()

Call the init function on your created client, passing in two necessary parameters: your preferred language as the first, and the deployment path for your dependent assets as the second.

```js
client.init(‘en-US’, CDN)
```

The init function is a promise, and therefore needs to resolve before the session can be joined and manipulated. To ensure this happens, you can either add logic to catch errors, or add an await operator.

client.init(‘en-US’, CDN).then(() => {
}).catch(err) => {
console.log(err)
})

await client.init(‘en-US’, CDN)

Step 3: Generate your Video SDK JWT

The Video SDK uses JSON Web Tokens, or JWTs, for authorizing users. To generate this necessary JWT, you’ll need to use your Video SDK app credentials. Once you’ve accessed and saved those for use, you’ll need to create logic on the server-side of your application to generate a JWT. JWTs consist of three main parts: header, payload, and signature. More information on each of those can be found here, but it should be known that your payload requires these key pieces:

  • App_key – your Video SDK Key
  • Role_type – the user role. 1 specifies host or co-host, while 0 specifies participant
  • Tpc – The Video SDK Session name
  • Version – set to 1
  • Iat – token issue timestamp
  • Exp – token expiration timestamp

For more information on generating your JWT, please review our authorization documentation. Below is sample code for generating a JWT.

const KJUR = require("jsrsasign");
// https://www.npmjs.com/package/jsrsasign
function generateSignature(
    sdkKey,
    sdkSecret,
    sessionName,
    role,
    sessionKey,
    userIdentity,
) {
    const iat = Math.round(new Date().getTime() / 1000) - 30;
    const exp = iat + 60 * 60 * 2;
    const oHeader = { alg: "HS256", typ: "JWT" };
    const oPayload = {
        app_key: sdkKey,
        tpc: sessionName,
        role_type: role,
        session_key: sessionKey,
        user_identity: userIdentity,
        version: 1,
        iat: iat,
        exp: exp,
    };
    const sHeader = JSON.stringify(oHeader);
    const sPayload = JSON.stringify(oPayload);
    const sdkJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, sdkSecret);
    return sdkJWT;
}
console.log(
    generateSignature(
        process.env.ZOOM_VIDEO_SDK_KEY,
        process.env.ZOOM_VIDEO_SDK_SECRET,
        "Cool Cars",
        1,
        "session123",
        "user123",
    ),
);

Step 4: Start a session

To start your first Video Session, you’re going to use your created client variable and call the join function on it. This function has three required parameters to start a session:

  • topic – A session name of your choice or the name of the session you are joining (must match the SDK JWT tpc value)
  • token — Your generated Video SDK JWT
  • userName – a name for the participant

Note: A password is an optional parameter, but if it is set by the host, it then becomes required for users to join the session.

When starting your session, you also want to capture the incoming media stream to gain access to video and audio. This works best with a global variable, so you’ll wan to declare one before calling the join function. In the example below, the variable is named stream, & is declared outside of any function.

Let stream;
client.join(topic, token, userName).then(() => {
  stream = client.getMediaStream()
}).catch((error) => {
  console.log(error)
})

As seen above, the function getMediaStream is called on our client, and the output is saved to the stream variable. Client.join() is also a promise, so error catching logic has been chained on.

Step 5: Add in video and audio functionality

To gain access to the video stream from your device, you’ll make use of the stream variable from our step above, and use the startVideo function. This will prompt the browser to ask you for permission to turn on your camera.

stream.startVideo();

To see your video displayed on the page, you’ll call one or two functions, dependant on the output of calling stream.isRenderSelfViewWithVideoElement():

stream.startVideo() – use only this function if the ouput is true, meaning you need to render your video on an HTML Video element stream.renderVideo() – You’ll need to additionally use this function if the output is false, meaning you need to render your video on HTML Canvas Element

For demonstration purposes, we’re going to assume the output is false, and walk through what it looks like to call both functions. Since the startVideo function is a promise, we’ll want to attach our call of renderVideo to it’s successful resolve. Additionally, renderVideo has a few required parameters:

  • The id of the HTML element we’re rendering the video onto
  • The user’s UserId
  • Video Width
  • Video Height
  • X-axis position
  • Y-axis position
  • Video Quality

All together, this is is what the video function call looks like:

stream.startVideo().then(() => {
   stream.renderVideo(document.querySelector('#my-self-view-canvas'), client.getCurrentUserInfo().userId, 1920, 1080, 0, 0, 2)
})
<canvas id="my-self-view-canvas" width="1920" height="1080"></canvas>

To add in audio, you’ll use the startAudio function on your client.

client.startAudio();

Conclusion

At this point, you should have successfully integrated video, with self-view, and audio into your application. This is just the beginning of what you can do with the Video SDK!