如何使用 Daily API 向 TalkJS 聊天添加音频和视频通话

2025-06-07

如何使用 Daily API 向 TalkJS 聊天添加音频和视频通话

在本文中，我们将探讨如何在 TalkJS 聊天中添加视频通话功能。随着远程办公的日益普及，视频通话的需求也日益高涨，并被认为是许多聊天应用的必备功能。我们将使用Daily video API，它能帮助我们快速上手！

设置简单的 TalkJS 聊天

首先，我们将建立一个简单的对话。请按照此入门指南进行操作。您可能还想将photoUrl每个用户的 更改为实际的图片地址。您可以在这里找到免费图片，用作用户的头像。

在本教程中，我们将使用聊天框（单个对话）来代替收件箱，以便您在对话之间切换。您可以点击此处了解更多关于 TalkJS 聊天框的信息。请确保从入门指南中将以下代码从以下内容中修改：

const inbox = session.createInbox({selected: conversation});
inbox.mount(document.getElementById("talkjs-container"));
Enter fullscreen mode Exit fullscreen mode

聊天框的新代码：

var chatbox = session.createChatbox(conversation);
chatbox.mount(document.getElementById("talkjs-container"));
Enter fullscreen mode Exit fullscreen mode

运行你的应用程序，它看起来应该像这样：

聊天截图

完美！接下来，我们在聊天标题栏添加一个按钮，这样我们就可以进行视频通话了。

在 TalkJS 聊天中添加视频通话按钮

我们想在聊天标题中添加一个视频通话按钮。我们将使用该按钮来切换是否显示视频通话对话框。遗憾的是，我们无法使用聊天框自带的 ChatHeader 组件。TalkJS 不允许为该按钮添加点击处理程序。为了解决这个问题，我们可以使用自定义标题，如文档中所述。这篇博文也详细描述了整个过程。

让我们开始吧！

在 TalkJS 中使用自定义聊天头

首先，更改我们的聊天框代码以不使用默认聊天标头。

更改代码：

var chatbox = session.createChatbox(conversation);
Enter fullscreen mode Exit fullscreen mode

对于不使用默认标头的新版本：

var chatbox = session.createChatbox(conversation, {showChatHeader: false});
Enter fullscreen mode Exit fullscreen mode

将 div合并talkjs-container到如下所示的结构中。如您所见，我们用一个 div 来表示整个聊天框，并用另一个 div 来表示标题。我们还有一个 div，button-container用于添加视频通话按钮。

<!-- Container element for all TalkJS UI elements -->
   <div class="chatbox-container">

    <!-- Custom TalkJS chat header -->
    <div id="chatbox-header">

        <div id="header-bg"></div>
         <div id="user-avatar"></div>
         <p id="header-subject"><span id="header-username"> Username</span></p>


        <div class="button-container">
            <div class="call-button">
                <!--input type="checkbox" name="notificationToggle" class="toggle-checkbox" id="toggle"-->
                <input type="image" name="videoCallButton" id="videocall" src="https://img.icons8.com/material-sharp/24/ffffff/video-call--v1.png"/> 
            </div>
        </div>
    </div>

    <!-- container element in which TalkJS will display a chat UI -->
    <div id="talkjs-container" style="width: 100%;  height: 500px"><i>Loading chat...</i></div>

</div>
Enter fullscreen mode Exit fullscreen mode

向 TalkJS 自定义聊天头添加用户名和图片

添加以下代码以将用户的姓名和个人资料图片合并到自定义标题中：

// Add the participant user's name and photo to the custom header
var headerUsername = document.getElementById('header-username');
headerUsername.textContent = other.name;      
document.getElementById('user-avatar').style.backgroundImage = "url(" + other.photoUrl + ")";
Enter fullscreen mode Exit fullscreen mode

在 TalkJS 中设置自定义聊天标题的样式

最后，我们将添加一些基本的 CSS，以便子元素chatbox-container水平居中并缩放其宽度，类似于默认聊天框。

<style>
/* Container for everything TalkJS*/
.chatbox-container {
    width: 420px;
    max-width: 100%; 
    margin: auto;
}

/* Custom header for the chatbox*/
#chatbox-header {
    height: 110px;
    position: relative;
    background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* Slightly curve the top of the header */
    border-radius: 10px 10px 0 0;
    margin-bottom: -3px;
    padding: 10px;
    position: relative;
}

#header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: inherit;
  opacity: 0.6;
}

#user-avatar {
  position: absolute;
  height: 50px;
  width: 50px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  border: 2px solid #eee;
}

#chatbox-header p {
  font-family: "Helvetica", sans-serif;
  color: #eee;
  margin: 0;
}

#header-subject {
  position: absolute;
  font-size: 32px;
  left: 70px;
  top: 7px;
}

/* Notification toggle */
.button-container {
    text-align: right;
    position: absolute;
    bottom: 15px;
    right: 10px;
}

.button-container p {
    display: inline;
    font-size: 10px;
    padding-right: 10px;
    vertical-align: middle;
}
.call-button {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width: 51px;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
    user-select: none;
    height: 18px;
}
    </style>
Enter fullscreen mode Exit fullscreen mode

完成这些更改后，您的聊天应该类似于以下屏幕截图：

自定义 UI 聊天截图

哇，我们进展顺利！您可以看到我们新的视频按钮，但它目前还没有任何功能。

是时候连接每日 API 并使用此按钮打开视频通话对话框了。

设置每日 API

在此注册 Daily API 。他们的免费计划允许您立即开始构建和制作原型，无需任何形式的付款！

按照本指南创建每日聊天室。每个每日聊天室都有一个关联的 URL，我们需要它来进行视频通话。

为了将我们的按钮连接到 Daily API，我们必须在当前代码中添加两处内容：

只需将这些脚本标签添加到您的 html 页面即可：

<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>

添加以下代码，确保使用我们在此处设置的您自己的房间 URL

```javascript
var callButton = document.getElementById('videocall');

    callButton.addEventListener('click', function() {
        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,
        });
        callFrame.join({ url: 'https://talkjstest.daily.co/{your-video-call-room-id}' })
    });

```
Enter fullscreen mode Exit fullscreen mode

您可以看到我们传递了一些额外的属性，例如showLeaveButton和showFullscreenButton。查看本指南，了解更多关于如何使用预制 Daily UI 的信息。

让我们运行该应用程序并检查我们全新的视频通话功能！

视频通话截图

完美！注意，如果你想更改视频通话对话框的行为，请尝试更改你的“房间设置”。

向 TalkJS 聊天添加常规音频通话

我们还会添加另一个按钮，用于常规音频通话。主要区别在于，用户将直接进入通话，而不会看到设置麦克风和摄像头的选项。

返回您的 Daily API信息中心并创建一个新房间。选择一些常规调用的典型设置，例如：

  • 关闭加入前 UI
  • 默认关闭视频
  • 默认关闭屏幕共享。

以下是我选择的设置：
每日房间设置截图

现在我们的房间已经设置好了，让我们添加实际的呼叫按钮图标。将我们的button-containerdiv 更新为以下内容：

<div class="button-container">
            <div class="call-button">
                <input type="image" name="videoCallButton" id="videocall" src="https://img.icons8.com/material-sharp/24/ffffff/video-call--v1.png"/> 
            </div>
            <div class="call-button">
                <input type="image" name="audioCallButton" id="audiocall" src="https://img.icons8.com/material-rounded/24/ffffff/phone-disconnected.png"/>
            </div>
</div>
Enter fullscreen mode Exit fullscreen mode

这会将呼叫图标添加到我们的自定义聊天标题面板，但该按钮没有任何功能。让我们按照与之前类似的步骤添加功能。确保新代码如下所示：

var callButton = document.getElementById('videocall');
    var audioCallButton = document.getElementById('audiocall');

    var callFrame; 

    callButton.addEventListener('click', function() {
        if(callFrame != null){
            callFrame.destroy();
        }
        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,
        });


        callFrame.join({ url: 'https://talkjstest.daily.co/{your-video-call-room-id}' })
    });

    //audio button listener
        audioCallButton.addEventListener('click', function() {


        if(callFrame != null)
        {
            callFrame.destroy();
        }

        callFrame = window.DailyIframe.createFrame({
            showLeaveButton: true,
            showFullscreenButton: true,

        });
        callFrame.join({ url: 'https://talkjstest.daily.co/{your-audio-call-room-id}' })
    });
Enter fullscreen mode Exit fullscreen mode

您可以看到，callFrame每次按下按钮时，我们都会销毁聊天框架，并根据点击的按钮继续加载新的音频或视频 UI。这将确保每次只显示一帧。

试用新的音频通话按钮。您应该可以直接进入通话，无需设置麦克风或摄像头。这应该类似于在 Microsoft Teams、Slack 或 Facebook Messenger 上通话。

音频通话截图

好了，音频和视频通话都集成在 TalkJS 聊天框中了！别担心，继续探索这个项目。TalkJS 的这个JSFiddle 项目，以及Daily 的这个示例项目，都是很棒的资源，可以让你了解更多功能。

文章来源：https://dev.to/talkjs/how-to-add-audio-and-video-calls-to-a-talkjs-chat-by-using-the-daily-api-5961
Devto 翻译
PREV
我应该使用哪种数据结构？Elixir 速查表 Elixir 数据类型速查表
NEXT
如何使用 TalkJS API 构建类似 WhatsApp 的聊天应用程序