Twilio视频SDK和访问令牌的纯javascript文档？

Question

我正在尝试做一个视频应用程序使用JS，但不使用节点。根据我的理解，我需要做的第一件事是创建一个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 helper JS (https://www.twilio.com/docs/voice/client/javascript/device#method-reference))，因为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请求，并将名称和会议PIN作为用户的输入。

步骤2:在Asp.Net MVC4.7中使用REST API生成基于会议Pin的令牌

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

​

我确实尝试了尽可能多的收录，让我知道这是否有帮助。