Twilio视频SDK和简单javascript中的访问令牌-文档

Question

我正在尝试使用JS做一个视频应用程序，但不使用node。根据我的理解，我需要做的第一件事就是创建JWT令牌。

基于以下文件(https://media.twiliocdn.com/sdk/js/video/releases/2.7.2/docs/)如果我使用CDN文件，我会通过初始化JS

const Video = Twilio.Video;

而不是

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

然而，要获得JWT令牌，我似乎需要加载另一个CDN文件？(似乎还有一个Twilio助手JS(https://www.twilio.com/docs/voice/client/javascript/device#method-参考((，因为twilio的例子用来获得令牌加载了一个不同的库，但我在的任何地方都找不到这个JS文件

我的问题是，我可以使用CDN文件生成jwt令牌吗？或者我也需要加载一个不同的文件？

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

以及如何在纯js而不是(节点版本(中初始化const AccessToken

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

Answer 1

@Manza，正如您在评论中所问的，我正在分享我所做的示例代码。

步骤1：使用ajax发送一个post请求，并将Name和Meeting PIN作为用户输入。

步骤2：在Asp.Net MVC 4.7 中使用REST API生成基于会议Pin的Token

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);
}

步骤3：在ajax成功的前端，我将令牌保存在本地存储中，并重定向到一个新页面，在那里我包含了这个JS SDK，以从客户端完成所有工作

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

步骤4：使用令牌创建一个新的连接，我使用了以下代码

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);

我确实尽可能多地加入，如果有帮助的话，请告诉我。