Twilio video SDK and access token in plain javascript - documentation?

Question

I am trying to do a video app using JS but not using node. From my understanding the first thing that i need to do is to create a JWT token.

Based on the following documentation (https://media.twiliocdn.com/sdk/js/video/releases/2.7.2/docs/) if i use the CDN file, I initialize my JS by doing

const Video = Twilio.Video;

instead of

const Video = require('twilio-video');

However, to obtain the JWT token it seems that I need to load another CDN file? (it seems there is also a Twilio helper JS perhaps (https://www.twilio.com/docs/voice/client/javascript/device#method-reference)) as the examples of twilio are using to get the token loads a different library, but I cant find this JS file anywhere

My question is, can I generate a jwt token using the CDN file? in their documentation or I need to load a different file too?

<script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.2/twilio-video.min.js"></script>

and how can I initialize the const AccessToken in plain js instead of (node version)

const AccessToken = require('twilio').jwt.AccessToken;

If the requirement is to make a app run with only JavaScript runtime, why not write the script using using nodeJs and then bundle it using browserify so that it can run in browser /JavaScript runtime? — Ayush v, Oct 21 '20 at 03:36
In my all the previous use cases what we did was to generate JWT tokens using Rest API & it works great. You can give it a try. — Bilal Mehrban, Jan 12 '21 at 09:19
@BilalMehrban do you have an example on how you did it, as I said in the question, i have the impression that i need to link another JS file that is not in the documentation — Manza, Jan 12 '21 at 22:58

score 0 · Answer 1 · answered Jan 13 '21 at 07:50

@Manza, as you have asked in the comments I am sharing the sample code of what I did.

Step 1: sent a post request using ajax with the Name and Meeting PIN as an input from user.

Step 2: Generating Token based on the meeting Pin using REST API in Asp.Net MVC 4.7

public JsonResult GenerateToken(string userName,int pin)
    {
      int ExpiryDuration = 120;
      var grants = new HashSet<IGrant>();
      var videoGrant = new VideoGrant();
      var roomName = Guid.NewGuid().ToString();
      videoGrant.Room = roomName;
      grants.Add(videoGrant);
      DateTime expireTime = DateTime.Now.AddMinutes(ExpiryDuration);
      var token = new Token(
                twilioAccountAccountSid,
                twilioAccountApiKey,
                twilioAccountApiSecret,
                userName,
                grants: grants,
                expiration: expireTime).ToJwt();
     return Json(new { token , roomName  }, JsonRequestBehavior.AllowGet);
    }

Step 3: On the frontend side on ajax success I save the token in localstorage and redirect to a new page where I included this JS SDK to do all the work from client side

 <script src="//media.twiliocdn.com/sdk/js/video/releases/2.7.2/twilio-video.min.js"></script>

Step 4: To create a new connection with using the token I used following code

const ID_TOKEN = "BEARER_DETAILS";
// ConnectOptions settings for a video web application.
const connectOptions = {
    // Available only in Small Group or Group Rooms only. Please set "Room Type"
    // to "Group" or "Small Group" in your Twilio Console:
    // https://www.twilio.com/console/video/configure
    bandwidthProfile: {
        video: {
            mode: 'collaboration',
            trackSwitchOffMode: 'predicted',
            dominantSpeakerPriority: 'high',
            maxTracks: 3,
            renderDimensions: {
                high: { width: 1080, height: 720 },
                standard: { width: 640, height: 480 },
                low: { width: 320, height: 240 }
            }
        }
    },
    networkQuality: {
        local: 1, // LocalParticipant's Network Quality verbosity [1 - 3]
        remote: 2 // RemoteParticipants' Network Quality verbosity [0 - 3]
    },


    // Available only in Small Group or Group Rooms only. Please set "Room Type"
    // to "Group" or "Small Group" in your Twilio Console:
    // https://www.twilio.com/console/video/configure
    dominantSpeaker: true,
    // Comment this line to disable verbose logging.
    logLevel: 'debug',

    // Comment this line if you are playing music.
    maxAudioBitrate: 16000,

    // VP8 simulcast enables the media server in a Small Group or Group Room
    // to adapt your encoded video quality for each RemoteParticipant based on
    // their individual bandwidth constraints. This has no utility if you are
    // using Peer-to-Peer Rooms, so you can comment this line.
    preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],

    // Capture 720p video @ 24 fps.
    video: { height: 720, frameRate: 24, width: 1280 }
};

// For mobile browsers, limit the maximum incoming video bitrate to 2.5 Mbps.
if (isMobile) {
    connectOptions
        .bandwidthProfile
        .video
        .maxSubscriptionBitrate = 2500000;
}
data = JSON.parse(window.localStorage.getItem(ID_TOKEN));
const token = await data.Token;
connectOptions.name = data.RoomName;
// Join to the Room with the given AccessToken and ConnectOptions.
const room = await Twilio.Video.connect(token, connectOptions);

I did try to include as much as I could, let me know if it helps.

Twilio video SDK and access token in plain javascript - documentation?

1 Answers1