尝试从 Twilio 视频房间断开连接时出现“未捕获的 ReferenceError：房间未定义”答案

【问题标题】："Uncaught ReferenceError: room is not defined" when attempting to disconnect from Twilio Video room尝试从 Twilio 视频房间断开连接时出现“未捕获的 ReferenceError：房间未定义”
【发布时间】：2020-07-19 08:55:53
【问题描述】：

我正在使用 Twilio Video Javascript API 从浏览器流式传输和录制视频内容。该应用程序是在Nodejs/Express 中构建的，我正在从页面中的CDN 链接加载Twilio API。到目前为止，我可以使用以下代码成功实例化一个房间并在服务器上录制视频：

    function createAndConnectToRoom(roomName) {
        Twilio.Video.connect(Token, { name: roomName }).then(room => {
            console.log(`Successfully joined a Room: ${room}`);
            room.on('participantConnected', participant => {
                console.log(`A remote Participant connected: ${participant}`);
            });
        }, error => {
            console.error(`Unable to connect to Room: ${error.message}`);
        });

        displayLocalVideo();
    }

我的问题是我无法断开与服务器的连接。理想情况下，我想要一个大按钮来断开用户连接并终止房间。在 Twilio 文档中，他们建议使用以下代码（外部函数是我自己的，内部代码来自 Twilio）。但是，当我使用 onclick 事件触发此函数时，我会在 Chrome 控制台中收到 Uncaught ReferenceError: the room is not defined。

    function disconnectFromRoom() {
        room.on('disconnected', room => {
            // Detach the local media elements
            room.localParticipant.tracks.forEach(publication => {
                const attachedElements = publication.track.detach();
                attachedElements.forEach(element => element.remove());
            });
        });

        // To disconnect from a Room
        room.disconnect();

    }

我还尝试在创建全局变量时将“房间”保存到全局变量中，然后将该变量传递给断开连接函数。但即便如此我也无法拨打room.on。

我似乎误解了如何使用 API 终止房间的基本知识。

【问题讨论】：

如何将此代码包含到页面中？您究竟是如何将房间保存到全局变量并传递给函数的？
在 Twilio SDK (twilio-video.min.js) 中链接后，我将代码包含在 Express EJS 视图的底部。当我尝试将房间保存到全局变量时，我在控制台记录“成功连接到房间”后立即在 createAndConnectToRoom 函数中执行了此操作。例如，我设置了 rm = room 之类的东西，然后在断开函数中调用 rm.on 时得到一个未定义的错误。
听起来有点奇怪，我想问题在于您尝试将房间保存为全局变量的方式。我可能是由您添加和分离脚本的方式引起的。我用模拟的 Twilio 制作了一个runnable example，一切看起来都很好，你能看一下并修改它，以便它反映你的设置。也请看official example
谢谢。这个问题确实似乎是我试图将空间保存为全局变量的结果。在您的可运行示例中，您将房间附加到窗口，当我这样做时，它会修复错误。你想让你的评论成为答案吗？

标签： javascript node.js express twilio twilio-api

【解决方案1】：

您似乎无权访问 disconnectFromRoom 函数中的 room 变量。尝试在window.room 等全局变量中保存所有创建的房间，然后在disconnectFromRoom 函数中从窗口访问房间。

请也看看这个example。

【讨论】：

【解决方案2】：

将你的 room.on('disconnect) 代码移动到你的 createAndConnectToRoom 函数中。它不需要在您的断开功能中！

在您的 disconnectFromRoom 函数中：

    function disconnectFromRoom() {
       if (rm) {
          rm.disconnect();
       }
    }

也想补充一下

    room.on('disconnected', room => {

有命名空间冲突

【讨论】：