使用JavaScript和Twilio在9分钟内构建和部署视频应用

2020-05-29 19:59:03

由于我们中的许多人现在都在远程工作,视频聊天现在非常流行。以下是如何使用Twilio可编程视频工具和JavaScript格式的Twilio无服务器工具包,在9分钟内启动并运行视频聊天室。

将API密钥保存在某个位置以便很快使用它们,然后通过运行以下命令通过Twilio CLI安装Twilio无服务器工具包(如果您尚未安装。

将{insert-project-name}替换为您的项目名称--我调用了我的tfvideo。该命令完成后,将在当前目录下创建一个具有项目名称的目录。

项目目录中包含一些现成的文件夹。在函数中,添加一个名为video-token.js的文件,在资源中添加两个文件:Video.html和index.js。在.env中设置环境变量。您可以不使用包含ACCOUNT_SID和AUTH_TOKEN的前两行。在它们下面,添加您的帐户SID、API密钥和API密钥:

在函数/video-token.js中,添加以下代码以生成访问令牌。在这里,我们设置环境变量、固定的房间名称和ACCESS_TOKEN_IDENTITY,这对于每个用户都是不同的。所有用户都将被授予对房间TF的访问权限。此代码是从此页面修改的,该页面还包含有关访问令牌的更多信息。

出口。处理程序=Function(Context,Event,Callback){const Twilio_Account_SID=Context。Twilio_Account_SID;Const Twilio_API_Key=上下文。Twilio_API_Key;Const Twilio_API_SECRET=上下文。Twilio_API_Secure;Const Access_Token_Identity=Math。随机()。toString(36)。子串(2,15)+数学。随机()。toString(36)。substring(2,15);//随机客户端名称const room_name=';tf';;//固定房间名称const AccessToken=Twilio。JWT。AccessToken;const VideoGrant=AccessToken。VideoGrant;//参与房间只提供Token//创建一个Video Grant让客户端可以使用Video,只对这个房间const VideoGrant=new VideoGrant({room:room_name});//创建一个访问令牌,将我们刚刚创建的权限const accessToken=new AccessToken(Twilio_Account_SID,Twilio_API_Key,Twilio_API_Secret);accesToken签名并返回给客户端,我们刚刚创建的权限const accessToken=new AccessToken(Twilio_Account_SID,Twilio_API_Key,Twilio_API_Secret);accessToken。addGrant(VideoGrant);//将授权添加到Token accessToken中。IDENTITY=ACCESS_TOKEN_IDENTITY;callback(NULL,{Token:accessToken.。toJwt()//将令牌序列化为JWT字符串});};

现在打开您创建的空白资产/Video.html文件。我们将编写一些基本的HTML,包括进入和离开房间的按钮、将自动显示用户相机预览的视频标签、Axios和Twilio Video.js库以及我们即将通过脚本标签创建的资源/index.js文件:

<;!DOCTYPE html>;<;html>;<;head>;<;meta charset=";utf-8";>;<;meta http-equv=";X-UA兼容";>;<;meta name=";viewport";content=";width=device-width,initial-scale=。/title>;<;/head>;<;body>;<;div id=";房间控制";>;<;video id=";video";autoplay muted=";true";width=";320";high=";240";>;<;/video>;<;按钮ID。>;加入房间<;/BUTTON&><;BUTTON id=";BUTTON-LEVE";/BUTTON&><;/BUTTON&><;/div&>t;<;script src=";//media.twiliocdn.com/sdk/js/video/releases/2.3.0/twilio-video.min.js";>;<;/script>;<;script src=";https://unpkg.com/[email protected]/dist/axios.min.js";>;<;/script>;<;script src=";index.js";>;<;/script>;<;/BODY>;<;/html>;

将无服务器域名(这将是基本URL)设置为您使用CLI模板对项目进行的任何命名。

当用户进入房间时,通过axios调用函数/video-token.js文件生成访问令牌。

通过附加事件侦听器来订阅或取消订阅远程参与者的曲目到TF会议室,从而显示远程参与者的视频。如果他们已经在房间中,我们迭代现有参与者并将事件侦听器附加到trackSubscribed。

最后,如果更改房间名称,还必须更改生成的令牌。

(()=>;{';使用严格的;const Twilio_domain=location。主机;//用户独有,将是视频应用程序const room_name=';tf';;const Video=Twilio访问的网站。video;let VideoRoom,localStream;const video=document。getElementById(";video";);//预览屏幕导航器。媒体设备。getUserMedia({VIDEO:TRUE,AUDIO:TRUE})。然后(VID=>;{视频。srcObject=vid;localStream=vid;})//按钮常量联合RoomButton=document。getElementById(";button-Join";);const leaveRoomButton=document。getElementById(";button-Leave";);var site=`https://${Twilio_domain}/video-token`;console。log(`Site${site}`);joinRoomButton。onClick=()=>;{//获取访问令牌axios。get(`https://${Twilio_domain}/video-token`)。则(Async(Body)=>;{Const Token=Body。数据。令牌;控制台。log(Token);//接入房间视频。connect(Token,{name:room_name})。那么((房间)=>;{控制台。日志(`已连接到房间${room。name}`);VideoRoom=房间;房间。参与者。for Each(ParticipantConnected);房间。在(";ParticipantConnected";,ParticipantConnected);房间上。在(";参与人断开连接";,参与人断开连接);房间上。一次(";断开";,(错误)=>;房间。参与者。forEach(ArticipantDisconnected));joinRoomButton。Disabled=true;leaveRoomButton。Disabled=false;});});};//离开房间leveRoomButton。onClick=()=>;{VideoRoom。断开连接();控制台。log(`与房间${VideoRoom断开连接。name}`);joinRoomButton。Disabled=false;leaveRoomButton。Disabled=true;};})();//连接参与者常量ParticipantConnected=(Participant)=>;{Console。日志(`Participant${Participant。标识}已连接';`);const div=文档。createElement(';div';);//为新参与者div创建div。ID=参与者。SID;参与者。在(';trackSubscribed';,Track=>;trackSubscribed(div,Track));参与者上。在(';trackUnscribed';,trackUnscribed);参与者上。脚印。forEach(发布=>;{IF(发布。isSubscribed){trackSubscribed(div,Publication.。音轨);}});文档。身体。appendChild(Div);}Const ParticipantDisconnected=(Participant)=>;{Console.。日志(`Participant${Participant。Identity}已断开连接。`);文档。getElementById(参与者。SID)。Remove();}const trackSubscribed=(div,Track)=>;{div.。appendChild(轨迹。Attach());}const trackUnscribed=(跟踪)=>;{跟踪。分离()。forEach(元素=>;元素。Remove());}。

在命令行上,运行Twilio Serverless:Deploy。CLI将祝贺您成功部署了无服务器项目以及其他一些部署细节。抓取Assets下的Assets/Video.html URL,与您的朋友分享,然后Tada!当您需要快速视频通话时,您可以使用和共享您自己的视频室。

这个应用程序非常简单,但考虑到没有CSS编写,它绝对不错,对吧?完整的代码可以在GitHub上找到。

Twilio的无服务器工具包可以方便地托管应用程序,并使其快速启动和运行。接下来,你可以编写更多的CSS来美化应用程序,添加可编程的聊天功能,或者更多的Twilio视频功能,获得用户的名字并在他们聊天时显示他们,等等。请在网上或评论中让我知道您正在构建什么。