0

我在 Bubble.is 中有一个完整的应用程序，它涉及患者通过视频聊天与临床医生预约。如果可能的话，我想避免只为视频聊天片段构建客户端-服务器设置。这就是为什么 OpenTok 的嵌入对我来说很突出。无论 Bubble.is 添加到标题中，当我直接嵌入它时，它都会破坏 OpenTok 的嵌入文件。因此，相反，我从我拥有的另一个域的 html 文件中提供 OpenTok 嵌入。所以现在我有了应用程序 (app.foo.bar) 和嵌入的 OpenTok (www.foo.bar/opentok.html)，并且正在尝试使用 HTML 导入。

嵌入式代码（标题）：

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://foo.bar/scripts/webcomponents-lite.js"></script>
<link rel="import" href="https://foo.bar/video/index.php/embed-2">

嵌入式代码（正文）：

<script> window.addEventListener('HTMLImportsLoaded', function() {
var link = document.querySelector('link[rel="import"]');
var content = link.import;

 //Grab DOM from embedded OpenTok.
var el = document.querySelector('#otEmbedContainer');

document.body.appendChild(el.cloneNode(true));});</script>

正如预期的那样，这在 Chrome 桌面上运行良好，但在其他任何地方都没有。我可以采取哪些最佳方法来修改此现有代码，以便我可以（至少）在移动网络上运行它？

4

1 回答 1

1

您可以在 Bubble.io 中使用 iframe。您不需要使用 HTML 导入。创建 OpenTok 嵌入时，将嵌入的网站 URL 设置为https://your-app-name.bubbleapps.is（替换your-app-name为您的 Bubble.is 应用程序的名称）。然后在 Bubble.is 中，将一个 HTML 元素添加到您的应用程序中，并将 OpenTok 嵌入 iframe 代码粘贴到该元素的代码中。此外，您需要将此属性添加到 iframe：allow="microphone; camera"

因此，您粘贴到 Bubble.is HTML 元素中的代码如下所示：

<iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=your-embed-id-xxxxx&room=DEFAULT_ROOM&iframe=true" 
width=800 height=640 allow="microphone; camera" >
</iframe>

单击 Bubble.is 编辑器中的 Preview 按钮，OpenTok 嵌入工作。

于 2018-03-22T19:50:34.933 回答