Twilio通话中麦克风无法静音及状态更新异常的技术求助

架构老林

2026-4-8

大家好，我目前正在开发一个基于Twilio Voice服务的网页通话界面，现在已经实现了基础的通话接通和挂断功能，但遇到了两个棘手的问题：

静音按钮（Silenciar）完全没有响应，点击后无法切换麦克风的静音状态
通话状态显示（#estado_llamada）只能从初始的“Desconectado（已断开）”更新到“En llamada（通话中）”，后续的状态变化比如通话结束、静音切换都无法同步更新到页面上

我已经检查了前端的按钮绑定函数（toggleMute()、状态更新逻辑），但暂时没找到问题所在。下面是我的完整前端代码（注：拨号盘部分原粘贴内容有截断，我补充了完整的拨号盘结构，不影响核心逻辑排查）：

<?php include 'php/conexion.php'; 
/**Validacion de Session**/ 
session_start(); 
if(!isset($_SESSION['user']['ID_Usuario'])){ 
    header("Location: ../"); 
} 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <?php include_once 'include/head.php';?> 
    <!--<script src="js/funciones.js"></script>--> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
    <script src="js/toast.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> 
    <!-- <script src="https://media.twiliocdn.com/sdk/js/voice/releases/2.13.0/twilio-voice.min.js"></script> --> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> 
    <title>Llamadas en linea</title> 
    <style> 
        #contenido_cliente table td { 
            vertical-align: top; 
            padding: 0.25rem 0.5rem; 
        } 
        #contenido_cliente td { 
            padding: 4px 8px; 
            vertical-align: top; 
        } 
    </style> 
</head> 
<?php include_once 'include/navbar.php'; ?> 
<!-- Modal de espera --> 
<div class="container-fluid"> 
    <div class="row"> 
        <?php include_once 'include/slide.php'; ?> 
        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> 
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> 
                <h1 class="h2 fw-bold"> Llamadas en linea </h1> 
            </div> 
            <div class="card mt-4"> 
                <div class="card-header bg-info text-white"> 
                    <h5 class="mb-0">Llamadas Telefónicas</h5> 
                </div> 
                <div class="card-body"> 
                    <div class="row"> 
                        <!-- COLUMNA IZQUIERDA: Teléfono + Dialpad --> 
                        <div class="col-md-4"> 
                            <!-- Input + Botones --> 
                            <div class="mb-3"> 
                                <label for="numero_llamar" class="form-label">Número a llamar</label> 
                                <input type="text" class="form-control" id="numero_llamar" placeholder="(000) 000 0000"> 
                            </div> 
                            <div class="mb-3"> 
                                <button class="btn btn-success me-2" id="llamar" onclick="realizarLlamada()">Llamar</button> 
                                <button class="btn btn-danger me-2" id="colgar" onclick="colgarLlamada()">Colgar</button> 
                                <button class="btn btn-warning me-2" id="mute" onclick="toggleMute()">Silenciar</button> 
                            </div> 
                            <div class="mb-3"> 
                                <strong>Estado:</strong> 
                                <span id="estado_llamada">Desconectado</span><br> 
                                <strong>Duración:</strong> 
                                <span id="duracion_llamada">00:00</span> 
                            </div> 
                            <!-- Dialpad --> 
                            <div class="border rounded p-3 mt-4"> 
                                <div class="col-md-12 text-center"> 
                                    <div class="d-grid gap-2 mb-2" style="max-width: 200px; margin: auto;"> 
                                        <div class="row"> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('1')">1</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('2')">2</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('3')">3</button></div> 
                                        </div> 
                                        <div class="row"> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('4')">4</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('5')">5</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('6')">6</button></div> 
                                        </div> 
                                        <div class="row"> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('7')">7</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('8')">8</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('9')">9</button></div> 
                                        </div> 
                                        <div class="row"> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('*')">*</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('0')">0</button></div> 
                                            <div class="col"><button class="btn btn-outline-dark w-100" onclick="agregarNumero('#')">#</button></div> 
                                        </div> 
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                        <!-- 右侧内容原代码未粘贴完整 --> 
                    </div> 
                </div> 
            </div> 
        </main> 
    </div> 
</div> 
<!-- 核心通话逻辑函数（realizarLlamada/colgarLlamada/toggleMute）放在外部JS文件中 -->

补充说明：
实际测试时我是启用了Twilio Voice SDK的，只是代码里暂时注释掉了。核心的通话函数是按照Twilio官方文档编写的——比如通过Device.connect()获取通话实例，调用call.mute()来切换静音，但点击静音按钮就是没反应；状态更新也只做了通话发起时的一次修改，后续不知道该监听哪些Twilio事件来同步更新。

有没有大佬能帮我排查下这两个问题的原因？谢谢大家！

内容来源于stack exchange