Question

我正在尝试使用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;

Answer 1

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

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

Twilio视频SDK和纯JavaScript中的访问令牌-文档？

1 个答案: