使用 Rails 的 Twilio 视频聊天教程（第 1 部分）
想开发自己的视频聊天应用程序吗？但是，不确定从哪里开始？完全不用担心！我们在这里提供了一个教程，可以帮助您构建自己的视频聊天应用程序。不要限制自己，开始和我们一起探索吧！
在这里，我们将学习 Twilio 视频聊天示例，并使用 Twilio、Rails 和 Javascript 构建一对一视频聊天应用程序。使用此应用程序，您可以轻松地与家人和朋友进行视频聊天。
教程目标：Twilio 视频聊天示例
在使用 Rails 构建 Twilio 视频聊天应用程序之前，请观看下面的视频以大致了解该演示。视频聊天应用程序开发将包括三个主要部分：
使用 Javascript + HTML + CSS 进行 UI 设置
Twilio 基本设置
构建视频聊天应用程序的业务逻辑。
先决条件
Twilio 帐户
红宝石版本 2.6.2
节点版本 14.8.0
轨道版本 6
用于安装依赖项的捆绑器
安装依赖
在开始使用 Twilio 视频聊天示例之前，系统设置如下 -
红宝石版本：2.6.2
导轨版本：6.0.4.1
节点版本：14.8.0
使用以下命令创建一个新的 Rails 应用程序
rails 新的 twilio-video-examplecd twilio-video-example
然后，运行以下命令安装依赖项——bootstrap、jQuery 和 popper.js
纱线添加bootstrap@4.3.1 jquery popper.js
基本项目设置
在此之后，在 config/webpack/environment.js 文件中添加以下代码。
// 配置/webpack/environment.js 文件
const { environment } = require('@rails/webpacker')const webpack = require("webpack")environment.plugins.append("提供", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
波普尔：['popper.js'，'默认']}))module.exports = 环境
转到 app/assets/stylesheets/application.css 并在 require_tree 和 require_self 行上方添加以下行。
*= 需要引导程序
并在 application.js 中添加此代码
要求（“jquery”）从'jquery'导入$； 窗口.jQuery = $; 窗口。$ = $;
使用脚手架添加房间
现在，一旦我们有了基本设置，就可以使用脚手架创建模型、视图和控制器了。使用下面的命令来做同样的事情。
rails g scaffold 房间名称：string
之后，转到迁移文件并添加唯一名称和room_sid字段迁移。我们将来会用到它。现在您的迁移将如下所示。
类 CreateRooms <ActiveRecord::Migration[6.0]
定义更改
创建_表：房间做|t|
t.string :名称
t.string：唯一名称
t.string :room_sid
t.时间戳
结尾
结尾结尾
之后，使用迁移数据库。
轨道数据库：迁移
转到config/routes.rb 文件并为您的应用程序添加根路径。
根到：“rooms#index”
之后，转到此 URL http://localhost:3000/。
恭喜！如果您看到此屏幕，则您的应用正在运行。
正在寻找热情的 ROR 开发人员团队来塑造您的 Web 项目的愿景？
Bacancy 是定制应用程序开发的一站式解决方案。立即联系我们，为您的梦想项目聘请我们的Ruby on Rails 开发人员。
现在让我们创建随机字符串作为每个房间的唯一名称。将此代码添加到 room.rb 模型。
// 房间.rb
before_create :add_uniqe_namedef add_uniqe_name
除非 self.unique_name.present？
self.unique_name = (0...15).map { ('a'..'z').to_a[rand(26)] }.join
结尾结尾
这将为唯一名称每当生成新房间时。
继续学习使用 Twilio、Rails 和 JS 构建视频聊天应用程序的教程。到这里，我们创建了一个房间。现在，让我们设置一个 Twilio 帐户并存储其凭据。
添加 Twilio Gem 并创建 Twilio 帐户
为此，我们将使用 Twilio 可编程视频。为此，我们需要一个 Twilio 帐户。如果您没有帐户，请单击此处创建一个帐户。
将 Gem 添加到 gemfile
宝石'twilio-ruby'宝石'dotenv-rails'
运行包
捆绑安装
添加 Twilio 凭据
之后，转到您的 Twilio 仪表板并复制 ACCOUNT SID 和 AUTH TOKEN。
为了存储凭据，我们将使用 dotenv。在项目的根目录中创建一个 .env 文件。并在 config/application.rb 中添加以下行。
dotenv::Raltie.load
对于本教程，我将在twilio-video-call文件夹中创建该文件。如果你使用 git 进行版本控制，不要忘记在 gitignore 中添加这个文件。
转到 API密钥部分并单击红色加号以创建新的 API 密钥。在 Friendly Name 文本字段中为您的密钥指定一个代表您正在处理的项目的可识别名称，并保留 Key Type Standard。单击显示 Create API Key 的按钮。将这些密钥分配给 API_KEY_SID 和 API_KEY_SECRET。
在 .env 文件中添加这些凭据。
现在，是逻辑时间！让我们把我们的房间放在一起并编写一些逻辑代码。
使用 Twilio、Rails 构建视频聊天应用程序的业务逻辑
创建 Twilio 房间
使用以下代码更改 Show 操作的代码。
// 控制器/rooms_controller.rb高清秀
@client = Twilio::REST::Client.new(ENV['ACCOUNT_SID'], ENV['AUTH_TOKEN'])
除非@room.room_sid.present？
# 在 twilio 中创建房间
twilio_room = @client.video.rooms.create（类型：'点对点'，unique_name：@room.unique_name）
@room.update(room_sid: twilio_room.sid)
结尾
identity = (0...5).map { ('a'..'z').to_a[rand(26)] }.join
@room_name = @room.unique_name
#创建令牌以访问 Twilio 房间
@token = Twilio::JWT::AccessToken.new(ENV['ACCOUNT_SID'], ENV['API_KEY_SID'],ENV['API_KEY_SECRET'], 身份: 身份)
#create video grant 令牌
grant = Twilio::JWT::AccessToken::VideoGrant.new
grant.room = @room_name
@token.add_grant 授予
@token = @token.to_jwt
结尾
此代码将首先检查是否存在资料库（用于 Twilio 唯一房间的唯一 ID）在数据库中。如果不可用，它将在 Twilio 中生成房间并将 sid 存储在数据库中。
我们正在创建一个唯一的字符串作为 Twilio 房间的唯一标识符。（您可以使用登录用户的名称。）
它将创建 Twilio 令牌和视频授权。
用户界面：Twilio 视频聊天应用程序
要构建用户界面，请打开 views/rooms/show.html.erb 并使用以下代码。您可以根据需要更改样式部分。
// views/rooms/show.html.erb.
<div 类="行">
<div class="col-9">
<div id="远程视频">
</div>
</div>
<div class="col-3">
<div id="本地视频">
</div>
</div></div><div class="row buttons-panel mb-5">
<div class="col-12 d-flex justify-content-center align-items-center">
<button class="btn btn-danger p-3 rounded-circle d-none" id="call-end-btn>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-telephone-x-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643 l2 .457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065- 2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511zm9.261 1 .135a.5.5 0 0 1 .708 0L13 2.793l1.146-1.147a.5.5 0 0 1 .708.708L13.707 3.5l1.147 1.146a.5.5 0 0 1-.708.708L13 4.207l-1.146 1.147a.5.5 0 0 1-.708- .708L12.293 3.5l-1.147-1.146a.5.5 0 0 1 0-.708z"/>
</svg>
</按钮>
</div></div>
访问app/assets/stylesheets/rooms.scss为您的应用程序设置样式。
连接 Twilio 房间
让我们编写连接 Twilio 房间的代码。
在show.html.erb文件中包含 Twilio js
<%= javascript_include_tag 'https://media.twiliocdn.com/sdk/js/video/releases/2.3.0/twilio-video.min.js' %>
在 javascript/packs 文件夹中创建一个video_call.js文件，并从 application.js 中包含该文件。并在该文件中添加以下代码。
// video_call.js
window.joinRoom = async function(room, token){
const Video = Twilio.Video;
const localTracks = await Video.createLocalTracks({
音频：真实，
视频：{ height: 1080, frameRate: 24, width: 1980 },
});
尝试 {
room = await Video.connect(token, {
名称：房间，
曲目：本地曲目，
带宽配置文件：{
视频： {
模式：'协作'，
最大曲目数：10，
dominantSpeakerPriority: '高',
渲染维度：{
高：{高度：1080，宽度：1980}，
标准：{高度：720，宽度：1280}，
低：{高度：176，宽度：144}
}
}
},
主讲人：是的，
最大音频比特率：16000，
preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
网络质量：{本地：1，远程：4}
});
} 赶上（错误）{
控制台日志（错误）；
}
const localMediaContainer = document.getElementById("本地视频");
localTracks.forEach((localTrack) => {
localMediaContainer.appendChild(localTrack.attach());
});
// 显示其他已经加入的参与者的视频/音频
room.participants.forEach（onParticipantConnected）；
room.on("participantConnected", onParticipantConnected);
room.on("participantDisconnected", onParticipantDisconnected);
$("#call-end-btn").removeClass("d-none");
$("#call-end-btn").on("点击",function() {
onLeaveButtonClick（房间）；
})};window.onParticipantConnected = 函数（参与者）{
var remote_div = document.getElementById('远程视频');
const participantDiv = document.createElement('div');
participantDiv.id = 参与者.sid;
const trackSubscribed = (track) => {
participantDiv.appendChild(track.attach());
};
participant.on("trackSubscribed", trackSubscribed);
participant.tracks.forEach((publication) => {
如果（publication.isSubscribed）{
trackSubscribed(publication.track);
}
});
remote_div.appendChild(participantDiv);
const trackUnsubscribed = (track) => {
track.detach().forEach((element) => element.remove());
};
participant.on("trackUnsubscribed", trackUnsubscribed);};window.onParticipantDisconnected = 函数（参与者）{
const participantDiv = document.getElementById(participant.sid);
participantDiv.parentNode.removeChild(participantDiv);};window.onLeaveButtonClick = 函数（房间）{
room.localParticipant.tracks.forEach((publication) => {
const track = publication.track;
跟踪停止（）；
const 元素 = track.detach();
elements.forEach((element) => element.remove());
});
房间断开连接（）；
window.location = '/';};
此功能将生成本地视频和音频轨道，并使用令牌将其发布到特定房间的 Twilio 云中。并在 DOM 中显示您的本地视频。它将对同一房间的其他远程用户执行相同的操作，并在您的 DOM 中显示远程用户的视频。
当您单击断开连接按钮时，它将在本地和 Twilio 房间中删除您的视频，并将您重定向到索引页面。
现在从房间的显示页面调用此函数。在 views/rooms/show.html.erb 添加以下代码
现在转到您的根路径并创建一个房间。之后，转到该房间的显示页面并等待 3-4 秒，同时从 CDN 加载 Twilio js。复制该 URL 并将其粘贴到隐身选项卡中，我们开始吧。您的视频通话应用已准备就绪。
Github 存储库：Twilio 视频聊天示例
完整的源代码可在此处获得：twilio-video-chat-app。随意克隆 repo 并使用它。
结论
我希望 Twilio 视频聊天教程对您有所帮助，并且您已决定使用 Twilio、Rails 和 JS 构建您的视频聊天应用程序。如果您是 ROR 爱好者，那么 ROR 教程页面适合您！访问 Ruby on Rails 教程页面并开始使用 Bacancy 学习。如果您有任何问题或建议，请写信给我们。
有时您需要经验丰富且技术娴熟的开发人员来为您处理需求和瓶颈。你想减少你的挣扎吗？您是否正在寻找熟练的 ROR 开发人员来轻松开发应用程序？那么现在联系我们并聘请 ROR 开发人员。
还没有评论，来说两句吧...