使用 Twilio、Rails 和 JS 教程创建视频聊天应用程序（第 2 部分）
介绍
在上一个教程中，我们使用 Twilio、Rails和 Javascript 构建了一个具有基本通话功能的视频聊天应用程序。确保您已访问第 1 部分并已按照指示配置视频聊天应用程序。因为，在本指南中，我们将讨论同一个演示应用程序。因此，在继续本指南之前，不要跳过最后一个教程。
我们都非常清楚，仅添加基本的呼叫功能是不够的。视频聊天应用程序应具有音频静音/取消静音、打开/关闭视频和屏幕共享等功能。
因此，这里是分步指南，让您清楚我们如何将此类功能添加到您的视频聊天应用程序中。
教程目标：使用 Twilio、Rails 和 JS 构建视频聊天应用程序
让我们讨论一下我们将在本教程中做什么。这些是我们将在演示应用程序中实现的新功能 -
音频静音和取消静音
视频开启和关闭
屏幕共享
请参阅下面的视频，了解最终输出的用户界面和功能。
如何使用 Twilio 在视频聊天应用程序中静音和取消静音音频？
第一步是生成用户界面。为此，打开下面的文件并将按钮添加到我们的视图以用于静音和取消静音音频。每个参与者都会有一个可点击的按钮、切换按钮或其他元素来使自己静音和取消静音。
//视图/房间/show.htm.erb
<button class="btn btn-success p-3 rounded-circle d-none m-3" id="call-mute-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-mic-fill" viewBox="0 0 16 16">
<路径 d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/>
<路径 d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
</svg>
</按钮>
<button class="btn btn-danger p-3 rounded-circle d-none m-3" id="call-unmute-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-mic-mute-fill" viewBox="0 0 16 16">
<路径 d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212 -.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a 4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z"/>
<路径 d="M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"/>
</svg>
</按钮>
要处理逻辑部分，请使用以下代码。
// javascript/packs/video_call.js
window.onMuteAudioButton = 功能（房间）{
room.localParticipant.audioTracks.forEach（函数（audioTrack）{
audioTrack.track.disable();
});
$("#call-mute-btn").addClass("d-none");
$("#call-unmute-btn").removeClass("d-none");};window.onUnMuteAudioButton = 功能（房间）{
room.localParticipant.audioTracks.forEach（函数（audioTrack）{
audioTrack.track.enable();
});
$("#call-mute-btn").removeClass("d-none");
$("#call-unmute-btn").addClass("d-none");};
LocalAudioTrack处理特定房间的LocalParticipant的音频。disable ()方法用于使麦克风静音。这将停止向房间发布音轨。要取消静音，您可以使用enable()方法开始发布LocalAudioTrack。
现在，在joinRoom函数中添加以下代码。
$("#call-mute-btn").removeClass("d-none");$("#call-mute-btn").on("点击",function() {
onMuteAudioButton（房间）；})$("#call-unmute-btn").on("点击",function() {
onUnMuteAudioButton（房间）；})
onMuteAudioButton和onUnMuteAudioButton函数将处理音频静音和取消静音的逻辑。当用户点击call-mute-btn和call-unmute-btn 按钮时，将调用这些函数。
这就是音频静音和取消静音功能。
正在寻找帮助来构建功能丰富且性能提高 05 倍的应用程序？
从我们这里聘请 RoR 开发人员，通过有意义的 CX 取悦您的最终用户。
在 Twilio 视频聊天应用程序中实现视频开/关
使用以下代码将这些视频打开和关闭按钮添加到我们的视图中。
//视图/房间/show.htm.erb
<button class="btn btn-success p-3 rounded-circle d-none m-3" id="video-disable-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-camera-video-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406 .913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"/>
</svg>
</按钮>
<button class="btn btn-danger p-3 rounded-circle d-none m-3" id="video-enable-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-camera-video-off-fill" viewBox= “0 0 16 16”>
<path fill-rule="evenodd" d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l -3.111 1.382A2 2 0 0 0 9.5 3H4.272l6.69 9.365zm-10.114-9A2.001 2.001 0 0 0 0 5v6a2 2 0 0 0 2 2h5.728L.847 3.366zm9.746 11。 925-10-14 .814- .58 10 14-.814.58z"/>
</svg>
</按钮>
为了处理业务逻辑，将此代码添加到 javascript/packs/video_call.js
// javascript/packs/video_call.js
window.onDisableVideoButton = 功能（房间）{
room.localParticipant.videoTracks.forEach(函数(videoTrack) {
videoTrack.track.disable();
});
$("#video-disable-btn").addClass("d-none");
$("#video-enable-btn").removeClass("d-none");};window.onEnableVideoButton = 功能（房间）{
room.localParticipant.videoTracks.forEach(函数(videoTrack) {
videoTrack.track.enable();
});
$("#video-disable-btn").removeClass("d-none");
$("#video-enable-btn").addClass("d-none");};
逻辑类似于音频静音和取消静音功能。在这里，LocalVideoTrack 的工作方式类似于LocalAudioTrack。您可以使用disable()和enable()方法来禁用和启用视频轨道。
现在在joinRoom函数中添加以下代码。
$("#video-disable-btn").removeClass("d-none");$("#video-disable-btn").on("点击",function() {
onDisableVideoButton（房间）；})$("#video-enable-btn").on("点击",function() {
onEnableVideoButton（房间）；})
我们将该代码绑定到onDisableVideoButton和onEnableVideoButton函数中。单击video-disable-btn和video-enable-btn按钮时必须调用此函数。
当用户禁用视频时，它应该停止从远程参与者的视图中流式传输它。为此，我们将使用trackDisabled和trackEnabled跟踪事件。
在onParticipantConnected()函数中添加以下代码。
participant.on('trackDisabled', track => {
如果（track.kind ==“视频”）{
$("#remote-video video:first").addClass("d-none");
}
});
participant.on('trackEnabled', track => {
如果（track.kind ==“视频”）{
$("#remote-video video:first").removeClass("d-none");
}
});
所以，这是关于视频开和关功能。进入房间的展示页面进行测试。
将屏幕共享添加到 Twilio 视频聊天应用程序
现在，是时候使用 Twilio、Rails和 JS在我们的视频聊天应用程序中实现最后一个功能，即屏幕共享。像上面的会话一样，在我们的视图中添加屏幕共享和取消共享按钮。
//视图/房间/show.htm.erb
<button class="btn btn-success p-3 rounded-circle d-none m-3" id="screen-share-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-cast" viewBox="0 0 16 16" >
<路径 d="m7.646 9.354-3.792 3.792a.5.5 0 0 0 .353.854h7.586a.5.5 0 0 0 .354-.854L8.354 9.354a.5.5 0 0 0-.708 0z"/>
<路径 d="M11.414 11H14.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h3.086l-1 1H1.5A1.5 1.5 0 0 1 0 10.5v-7A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-2.086 l-1-1z"/>
</svg>
</按钮>
<button class="btn btn-danger p-3 rounded-circle d-none m-3" id="stop-screen-share-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi-cast" viewBox="0 0 16 16" >
<路径 d="m7.646 9.354-3.792 3.792a.5.5 0 0 0 .353.854h7.586a.5.5 0 0 0 .354-.854L8.354 9.354a.5.5 0 0 0-.708 0z"/>
<路径 d="M11.414 11H14.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h3.086l-1 1H1.5A1.5 1.5 0 0 1 0 10.5v-7A1.5 1.5 0 0 1 1.5 2h13A1.5 1.5 0 0 1 16 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-2.086 l-1-1z"/>
</svg>
</按钮>
使用以下代码捕获屏幕。
// javascript/packs/video_call.js
window.createScreenTrack=函数（高度，宽度）{
const Video = Twilio.Video;
if (typeof navigator === 'undefined'
|| !navigator.mediaDevices
|| !navigator.mediaDevices.getDisplayMedia) {
return Promise.reject(new Error('不支持 getDisplayMedia'));
}
返回导航器.mediaDevices.getDisplayMedia({
视频： {
身高：身高，
宽度：宽度
}
}).then(函数(流){
返回新的 Video.LocalVideoTrack(stream.getVideoTracks()[0]);
});}
该功能将发布您捕获的屏幕。并将为您显示一个小预览。
window.PublishedTracks =函数（房间，轨道）{
room.localParticipant.publishTrack（轨道）；
让 localMediaContainer = document.getElementById("local-video");
localMediaContainer.appendChild(track.attach());
$("#stop-screen-share-btn").on("点击",function() {
onStopScreenShareButton（房间，轨道）；
})}
以下功能将停止发布您捕获的屏幕。并将删除您的屏幕共享预览。
window.StopTracks =函数（房间，轨道）{
room.localParticipant.unpublishTrack（轨道）；
跟踪停止（）；
跟踪=空；
让 localMediaContainer = document.getElementById("local-video");
localMediaContainer.removeChild(localMediaContainer.lastChild);}
当您单击共享屏幕按钮时，将调用以下函数。
window.onScreenShareButton = 异步函数（房间）{
让 screenTrack = await createScreenTrack(700, 700);
PublishedTracks（房间，屏幕轨道）；
$("#screen-share-btn").addClass("d-none");
$("#stop-screen-share-btn").removeClass("d-none");}
当您单击停止共享屏幕按钮时，将调用以下函数。
window.onStopScreenShareButton = function(room,track){
StopTracks（房间，轨道）；
$("#screen-share-btn").removeClass("d-none");
$("#stop-screen-share-btn").addClass("d-none");}
从joinRoom()函数调用所有这些函数。
$("#screen-share-btn").removeClass("d-none");$("#screen-share-btn").on("点击",function() {
onScreenShareButton（房间）；
})
当您共享屏幕时，它应该优先显示给远程参与者。
为此，在 onParticipantConnected() 函数中添加以下代码。
participant.on("trackPublished", (publication) =>{
$("#remote-video video:first").addClass("d-none");
});
participant.on("trackUnpublished", (publication) =>{
$("#remote-video video:first").removeClass("d-none");
});
现在转到您的根路径并创建一个房间。之后，转到该房间的显示页面并等待 3-4 秒，同时从 CDN 加载 Twilio js。复制该 URL 并将其粘贴到隐身选项卡中，我们开始吧。您的功能可以使用了。
完整的源代码可以在这里找到：twilio-video-chat-app
结论
因此，这是关于使用 Twilio、Rails 和 JS 构建一个视频聊天应用程序，然后向应用程序添加音频和视频静音/取消静音、共享屏幕等功能。我希望你已经有了想法并开始实施它！我们随时欢迎您提出建议/反馈/查询；请随时与我们联系。您可以访问 Rails 教程页面并探索更多此类Ruby on Rails 教程。
还没有评论，来说两句吧...