0

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

如果我使用 CDN 文件，则基于以下文档（https://media.twiliocdn.com/sdk/js/video/releases/2.7.2/docs/），我通过执行初始化我的 JS

const Video = Twilio.Video;

代替

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

但是，要获得 JWT 令牌，似乎我需要加载另一个 CDN 文件？（似乎还有一个 Twilio 助手 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;
4

1 回答 1

0

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

第 1 步：使用 ajax 发送一个帖子请求，其中名称和会议 PIN 作为用户的输入。

第 2 步：在 Asp.Net MVC 4.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 成功的前端，我将令牌保存在 localstorage 中并重定向到一个新页面，我在其中包含了这个 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);

我确实尝试尽可能多地包括在内，如果有帮助，请告诉我。

于 2021-01-13T07:50:39.680 回答