使用 Rails 的 Twilio 視頻聊天教程（第 1 部分）
想開(kāi)發(fā)自己的視頻聊天應(yīng)用程序嗎？但是，不確定從哪里開(kāi)始？完全不用擔(dān)心！我們?cè)谶@里提供了一個(gè)教程，可以幫助您構(gòu)建自己的視頻聊天應(yīng)用程序。不要限制自己，開(kāi)始和我們一起探索吧！
在這里，我們將學(xué)習(xí) Twilio 視頻聊天示例，并使用 Twilio、Rails 和 Javascript 構(gòu)建一對(duì)一視頻聊天應(yīng)用程序。使用此應(yīng)用程序，您可以輕松地與家人和朋友進(jìn)行視頻聊天。
教程目標(biāo)：Twilio 視頻聊天示例
在使用 Rails 構(gòu)建 Twilio 視頻聊天應(yīng)用程序之前，請(qǐng)觀看下面的視頻以大致了解該演示。視頻聊天應(yīng)用程序開(kāi)發(fā)將包括三個(gè)主要部分：
使用 Javascript + HTML + CSS 進(jìn)行 UI 設(shè)置
Twilio 基本設(shè)置
構(gòu)建視頻聊天應(yīng)用程序的業(yè)務(wù)邏輯。
先決條件
Twilio 帳戶(hù)
紅寶石版本 2.6.2
節(jié)點(diǎn)版本 14.8.0
軌道版本 6
用于安裝依賴(lài)項(xiàng)的捆綁器
安裝依賴(lài)
在開(kāi)始使用 Twilio 視頻聊天示例之前，系統(tǒng)設(shè)置如下 -
紅寶石版本：2.6.2
導(dǎo)軌版本：6.0.4.1
節(jié)點(diǎn)版本：14.8.0
使用以下命令創(chuàng)建一個(gè)新的 Rails 應(yīng)用程序
rails 新的 twilio-video-examplecd twilio-video-example
然后，運(yùn)行以下命令安裝依賴(lài)項(xiàng)——bootstrap、jQuery 和 popper.js
紗線(xiàn)添加bootstrap@4.3.1 jquery popper.js
基本項(xiàng)目設(shè)置
在此之后，在 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'，'默認(rèn)']}))module.exports = 環(huán)境
轉(zhuǎn)到 app/assets/stylesheets/application.css 并在 require_tree 和 require_self 行上方添加以下行。
*= 需要引導(dǎo)程序
并在 application.js 中添加此代碼
要求（“jquery”）從'jquery'導(dǎo)入$； 窗口.jQuery = $; 窗口。$ = $;
使用腳手架添加房間
現(xiàn)在，一旦我們有了基本設(shè)置，就可以使用腳手架創(chuàng)建模型、視圖和控制器了。使用下面的命令來(lái)做同樣的事情。
rails g scaffold 房間名稱(chēng)：string
之后，轉(zhuǎn)到遷移文件并添加唯一名稱(chēng)和room_sid字段遷移。我們將來(lái)會(huì)用到它?，F(xiàn)在您的遷移將如下所示。
類(lèi) CreateRooms <ActiveRecord::Migration[6.0]
定義更改
創(chuàng)建_表：房間做|t|
t.string :名稱(chēng)
t.string：唯一名稱(chēng)
t.string :room_sid
t.時(shí)間戳
結(jié)尾
結(jié)尾結(jié)尾
之后，使用遷移數(shù)據(jù)庫(kù)。
軌道數(shù)據(jù)庫(kù)：遷移
轉(zhuǎn)到config/routes.rb 文件并為您的應(yīng)用程序添加根路徑。
根到：“rooms#index”
之后，轉(zhuǎn)到此 URL http://localhost:3000/。
恭喜！如果您看到此屏幕，則您的應(yīng)用正在運(yùn)行。
正在尋找熱情的 ROR 開(kāi)發(fā)人員團(tuán)隊(duì)來(lái)塑造您的 Web 項(xiàng)目的愿景？
Bacancy 是定制應(yīng)用程序開(kāi)發(fā)的一站式解決方案。立即聯(lián)系我們，為您的夢(mèng)想項(xiàng)目聘請(qǐng)我們的Ruby on Rails 開(kāi)發(fā)人員。
現(xiàn)在讓我們創(chuàng)建隨機(jī)字符串作為每個(gè)房間的唯一名稱(chēng)。將此代碼添加到 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
結(jié)尾結(jié)尾
這將為唯一名稱(chēng)每當(dāng)生成新房間時(shí)。
繼續(xù)學(xué)習(xí)使用 Twilio、Rails 和 JS 構(gòu)建視頻聊天應(yīng)用程序的教程。到這里，我們創(chuàng)建了一個(gè)房間?，F(xiàn)在，讓我們?cè)O(shè)置一個(gè) Twilio 帳戶(hù)并存儲(chǔ)其憑據(jù)。
添加 Twilio Gem 并創(chuàng)建 Twilio 帳戶(hù)
為此，我們將使用 Twilio 可編程視頻。為此，我們需要一個(gè) Twilio 帳戶(hù)。如果您沒(méi)有帳戶(hù)，請(qǐng)單擊此處創(chuàng)建一個(gè)帳戶(hù)。
將 Gem 添加到 gemfile
寶石'twilio-ruby'寶石'dotenv-rails'
運(yùn)行包
捆綁安裝
添加 Twilio 憑據(jù)
之后，轉(zhuǎn)到您的 Twilio 儀表板并復(fù)制 ACCOUNT SID 和 AUTH TOKEN。
為了存儲(chǔ)憑據(jù)，我們將使用 dotenv。在項(xiàng)目的根目錄中創(chuàng)建一個(gè) .env 文件。并在 config/application.rb 中添加以下行。
dotenv::Raltie.load
對(duì)于本教程，我將在twilio-video-call文件夾中創(chuàng)建該文件。如果你使用 git 進(jìn)行版本控制，不要忘記在 gitignore 中添加這個(gè)文件。
轉(zhuǎn)到 API密鑰部分并單擊紅色加號(hào)以創(chuàng)建新的 API 密鑰。在 Friendly Name 文本字段中為您的密鑰指定一個(gè)代表您正在處理的項(xiàng)目的可識(shí)別名稱(chēng)，并保留 Key Type Standard。單擊顯示 Create API Key 的按鈕。將這些密鑰分配給 API_KEY_SID 和 API_KEY_SECRET。
在 .env 文件中添加這些憑據(jù)。
現(xiàn)在，是邏輯時(shí)間！讓我們把我們的房間放在一起并編寫(xiě)一些邏輯代碼。
使用 Twilio、Rails 構(gòu)建視頻聊天應(yīng)用程序的業(yè)務(wù)邏輯
創(chuàng)建 Twilio 房間
使用以下代碼更改 Show 操作的代碼。
// 控制器/rooms_controller.rb高清秀
@client = Twilio::REST::Client.new(ENV['ACCOUNT_SID'], ENV['AUTH_TOKEN'])
除非@room.room_sid.present？
# 在 twilio 中創(chuàng)建房間
twilio_room = @client.video.rooms.create（類(lèi)型：'點(diǎn)對(duì)點(diǎn)'，unique_name：@room.unique_name）
@room.update(room_sid: twilio_room.sid)
結(jié)尾
identity = (0...5).map { ('a'..'z').to_a[rand(26)] }.join
@room_name = @room.unique_name
#創(chuàng)建令牌以訪問(wèn) 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
結(jié)尾
此代碼將首先檢查是否存在資料庫(kù)（用于 Twilio 唯一房間的唯一 ID）在數(shù)據(jù)庫(kù)中。如果不可用，它將在 Twilio 中生成房間并將 sid 存儲(chǔ)在數(shù)據(jù)庫(kù)中。
我們正在創(chuàng)建一個(gè)唯一的字符串作為 Twilio 房間的唯一標(biāo)識(shí)符。（您可以使用登錄用戶(hù)的名稱(chēng)。）
它將創(chuàng)建 Twilio 令牌和視頻授權(quán)。
用戶(hù)界面：Twilio 視頻聊天應(yīng)用程序
要構(gòu)建用戶(hù)界面，請(qǐng)打開(kāi) views/rooms/show.html.erb 并使用以下代碼。您可以根據(jù)需要更改樣式部分。
// views/rooms/show.html.erb.
<div 類(lèi)="行">
<div class="col-9">
<div id="遠(yuǎn)程視頻">
</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>
訪問(wèn)app/assets/stylesheets/rooms.scss為您的應(yīng)用程序設(shè)置樣式。
連接 Twilio 房間
讓我們編寫(xiě)連接 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 文件夾中創(chuàng)建一個(gè)video_call.js文件，并從 application.js 中包含該文件。并在該文件中添加以下代碼。
// video_call.js
window.joinRoom = async function(room, token){
const Video = Twilio.Video;
const localTracks = await Video.createLocalTracks({
音頻：真實(shí)，
視頻：{ height: 1080, frameRate: 24, width: 1980 },
});
嘗試 {
room = await Video.connect(token, {
名稱(chēng)：房間，
曲目：本地曲目，
帶寬配置文件：{
視頻： {
模式：'協(xié)作'，
最大曲目數(shù)：10，
dominantSpeakerPriority: '高',
渲染維度：{
高：{高度：1080，寬度：1980}，
標(biāo)準(zhǔn)：{高度：720，寬度：1280}，
低：{高度：176，寬度：144}
}
}
},
主講人：是的，
最大音頻比特率：16000，
preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
網(wǎng)絡(luò)質(zhì)量：{本地：1，遠(yuǎn)程：4}
});
} 趕上（錯(cuò)誤）{
控制臺(tái)日志（錯(cuò)誤）；
}
const localMediaContainer = document.getElementById("本地視頻");
localTracks.forEach((localTrack) => {
localMediaContainer.appendChild(localTrack.attach());
});
// 顯示其他已經(jīng)加入的參與者的視頻/音頻
room.participants.forEach（onParticipantConnected）；
room.on("participantConnected", onParticipantConnected);
room.on("participantDisconnected", onParticipantDisconnected);
$("#call-end-btn").removeClass("d-none");
$("#call-end-btn").on("點(diǎn)擊",function() {
onLeaveButtonClick（房間）；
})};window.onParticipantConnected = 函數(shù)（參與者）{
var remote_div = document.getElementById('遠(yuǎn)程視頻');
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 = 函數(shù)（參與者）{
const participantDiv = document.getElementById(participant.sid);
participantDiv.parentNode.removeChild(participantDiv);};window.onLeaveButtonClick = 函數(shù)（房間）{
room.localParticipant.tracks.forEach((publication) => {
const track = publication.track;
跟蹤停止（）；
const 元素 = track.detach();
elements.forEach((element) => element.remove());
});
房間斷開(kāi)連接（）；
window.location = '/';};
此功能將生成本地視頻和音頻軌道，并使用令牌將其發(fā)布到特定房間的 Twilio 云中。并在 DOM 中顯示您的本地視頻。它將對(duì)同一房間的其他遠(yuǎn)程用戶(hù)執(zhí)行相同的操作，并在您的 DOM 中顯示遠(yuǎn)程用戶(hù)的視頻。
當(dāng)您單擊斷開(kāi)連接按鈕時(shí)，它將在本地和 Twilio 房間中刪除您的視頻，并將您重定向到索引頁(yè)面。
現(xiàn)在從房間的顯示頁(yè)面調(diào)用此函數(shù)。在 views/rooms/show.html.erb 添加以下代碼
現(xiàn)在轉(zhuǎn)到您的根路徑并創(chuàng)建一個(gè)房間。之后，轉(zhuǎn)到該房間的顯示頁(yè)面并等待 3-4 秒，同時(shí)從 CDN 加載 Twilio js。復(fù)制該 URL 并將其粘貼到隱身選項(xiàng)卡中，我們開(kāi)始吧。您的視頻通話(huà)應(yīng)用已準(zhǔn)備就緒。
Github 存儲(chǔ)庫(kù)：Twilio 視頻聊天示例
完整的源代碼可在此處獲得：twilio-video-chat-app。隨意克隆 repo 并使用它。
結(jié)論
我希望 Twilio 視頻聊天教程對(duì)您有所幫助，并且您已決定使用 Twilio、Rails 和 JS 構(gòu)建您的視頻聊天應(yīng)用程序。如果您是 ROR 愛(ài)好者，那么 ROR 教程頁(yè)面適合您！訪問(wèn) Ruby on Rails 教程頁(yè)面并開(kāi)始使用 Bacancy 學(xué)習(xí)。如果您有任何問(wèn)題或建議，請(qǐng)寫(xiě)信給我們。
有時(shí)您需要經(jīng)驗(yàn)豐富且技術(shù)嫻熟的開(kāi)發(fā)人員來(lái)為您處理需求和瓶頸。你想減少你的掙扎嗎？您是否正在尋找熟練的 ROR 開(kāi)發(fā)人員來(lái)輕松開(kāi)發(fā)應(yīng)用程序？那么現(xiàn)在聯(lián)系我們并聘請(qǐng) ROR 開(kāi)發(fā)人員。