twilio-api - 纯javascript中的Twilio视频SDK和访问令牌-文档?
问题描述
我正在尝试使用 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;
解决方案
@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);
我确实尝试尽可能多地包括在内,如果有帮助,请告诉我。
推荐阅读
- javascript - 是否可以防止 prisma 中每个查询的新连接数?
- sas - 对 SAS 非常陌生
- autodesk-forge - 根据内容自动调整 Forge 文本标记框大小
- sql - SQL Multiple NOT LIKE 来自数据库数据
- reactjs - 将 React 类组件转换为 React 函数式组件
- swagger - 无法访问 SwaggerUIBundle url 列表中的 Azure blob SAS uri
- sql - 在访问查询中使用 VBA 函数
- google-cloud-firestore - 删除用户时撤销 Firebase 身份验证并退出
- firefox - 如何调试 CSP(包括 CSP 缓存)
- bash - Bash:解析shell命令字符串