如何将jitsi meet融入aurelia答案

【问题标题】：How to integrate jitsi meet into aurelia如何将jitsi meet融入aurelia
【发布时间】：2020-08-06 15:23:43
【问题描述】：

我正在尝试将Jitsi Meet 集成并使用到我的 Aurelia 应用程序中，但到目前为止还没有成功.. 正如我所见，这个库不使用模块，也没有打字稿声明文件。在库 Github 文档页面上，它说只包含这样的脚本标记：

<script src='https://meet.jit.si/external_api.js'></script>

然后像这样调用api：

const domain = 'meet.jit.si';
const options = {
    roomName: 'JitsiMeetAPIExample',
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);

问题是我找不到任何文章告诉我如何在 aurelia webpack 中使用标签也不知道该标签放在哪里（intex，mycomponent.ts ...）最后我得到了错误提示 typescript 找不到模块 JitsiMeetExternalAPI。

我正在使用带有 typescript 和 WebPack 的 Aurelia，但如果更容易使用，我可以更改为 requirejs。

请帮忙

更新： 我设法通过将其添加到 viewModel 来解决 tpescript 部分：

declare var JitsiMeetExternalAPI: any;

有了这个我的代码编译没有错误。我在 index.ejs 文件的正文末尾添加了 cdn 脚本标记。所以我的 index.ejs 现在看起来像这样：

<html>
  <head>
    <meta charset="utf-8">
    <title><%- htmlWebpackPlugin.options.metadata.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">
  </head>
  <body aurelia-app="main">
    <script src='https://meet.jit.si/external_api.js'></script>
  </body>
</html>

我的页面如下所示：

<template>
  <div id="meet"></div>
</template>

当我现在启动应用程序时，我看到调用是对 jitsi 的 cdnscript 进行的，但随后我看到 aurelia-router 的错误提示：

我做错了什么？

【问题讨论】：

标签： typescript webpack aurelia script-tag

【解决方案1】：

资助问题，来自 aurelia 的“appendChild”问题是因为它找不到 html 元素#meet，因为视图没有被喷射渲染。当我将 JitsiMeetExternalAPI 初始化移动到组件时，现在一切正常。

【讨论】：