如果你玩过Twilio的官方视频通话应用程序，你可能已经注意到菜单中的 "房间监视器"选项，它可以打开一个弹出窗口，里面有很多关于视频房间和参与者的有用信息，这些信息都是实时生成的：
你知道这里使用的Twilio视频房间监控器是一个独立的开源项目，你可以嵌入到任何基于网络的Twilio视频应用程序中吗？
如果你想了解如何在你自己的应用程序中利用这个了不起的工具，请继续阅读!
什么是Twilio视频房间监控器？
Twilio视频室监控器是一个开源的浏览器调试工具，可以显示Twilio视频室及其参与者的实时信息和指标。它被设计成可以嵌入到任何使用twilio-video.js库构建的JavaScript项目中。
除了可以非常详细地查看一个活跃的视频室、其中的参与者和他们的媒体轨迹外，你还可以看到上传和下载的网络使用图表。
你可以在任何在Chrome、Safari、Firefox或Edge上运行的应用程序中使用视频室监视器。请参阅详细的浏览器支持图表，了解更多细节和具体的版本支持。
在你的应用程序中使用房间监控器
在你的应用程序中启动房间监控器小程序的最快捷方式是在浏览器的JavaScript控制台中进行。这是一个方便的方式来尝试这个工具，或使用它的一次性会话，因为没有必要对你的应用程序进行任何修改。
要安装它，在你的视频程序运行时，在浏览器的JavaScript控制台粘贴以下代码：
const twilioRoomMonitor = (room) => {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@twilio/video-room-monitor/dist/browser/twilio-video-room-monitor.min.js';
script.onload = () => {
Twilio.VideoRoomMonitor.registerVideoRoom(room);
Twilio.VideoRoomMonitor.openMonitor();
};
document.body.appendChild(script);
};
这段代码在你的页面的上下文中添加了一个twilioRoomMonitor() 的功能。你可以通过调用这个函数来启动监视器，把要监视的视频室作为参数传给它。例如，如果你把Twilio视频室存储在一个room 全局变量中，你可以按如下方式启动监视器：
twilioRoomMonitor(room);
这种方法非常方便，因为它不需要对你的应用程序进行修改，但不幸的是，它并不总是有效。如果上述方法对你不起作用，那么下面是一些可能的原因和它们的解决方案。
当你试图用上面的JavaScript片段启动视频室监视器时，你可能遇到的最常见的问题是，你的应用程序没有将视频室存储在一个全局变量中，所以你不能在JavaScript控制台中直接访问这个对象。
解决这个问题的一个方法是使用你的前端框架的调试工具，从内部应用状态中 "钓 "出房间。例如，如果你使用React，并将视频室存储在一个状态变量中，你可以使用Chrome或Firefox的React开发者工具插件来定位保存房间的组件并检查其状态。一旦你找到带有房间的状态变量，你可以右击它，并从上下文菜单中选择 "存储为全局变量"，将其暴露在JavaScript控制台中。
当你试图用上述方法打开视频房间监控器时，可能遇到的另一个常见问题是，你的页面的内容安全策略（CSP）不允许从cdn.jsdelivr.net 域下载JavaScript内容，这在上面的JavaScript片段中使用。
限制JavaScript内容的来源是防止跨站脚本攻击的措施，所以虽然这个错误会妨碍到你，但一般来说，在你的应用程序中，这是一个很好的功能。不幸的是，上面的JavaScript代码正试图将一个外部脚本注入到页面的上下文中，与攻击者出于恶意的方式非常相似。
解决这个问题的最好方法是下载一份twilio-video-room-monitor.min.js文件，把它放在你的应用程序导入本地 JavaScript 文件的批准位置，然后编辑上面的 JavaScript 代码，从该位置而不是 CDN 获取文件。
接下来的步骤
如果你用上一节所示的快速和肮脏的技术尝试了视频室监视器，并喜欢它，你可能会决定让它成为你应用程序的永久组成部分。在这种情况下，你可以将twilio-video-room-monitor.min.js文件添加到你的项目中（通过将其包含在<script> 标签中或 用 npm 安装该包），然后使用以下功能将其与你的用户界面集成：
// register a video room with the library
Twilio.VideoRoomMonitor.registerVideoRoom(twilioRoom);
// open, close or toggle the monitor applet
Twilio.VideoRoomMonitor.openMonitor()
Twilio.VideoRoomMonitor.closeMonitor()
Twilio.VideoRoomMonitor.toggleMonitor()
// report if the monitor is open or closed
Twilio.VideoRoomMonitor.isOpen
详细的安装说明见文档。我希望Twilio视频室监控器能让你对你的Twilio视频应用有更深入的了解!
