Question

我在Bubble.is中有一个完全烘焙的应用程序，涉及患者通过视频聊天与临床医生预约。如果可能的话，我想避免为视频聊天内容构建客户端 - 服务器设置。这就是为什么OpenTok的嵌入对我来说很突出。无论Bubble.is添加到标题中，当我直接嵌入它时，它会破坏OpenTok的嵌入文件。因此，我提供了从我拥有的另一个域上的html文件嵌入的OpenTok。所以现在我有app（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桌面上运行得非常好，但在其他任何地方都没有。我可以采取哪些最佳方法来修改现有代码，以便我可以在（至少）移动网络上运行它？

Answer 1

您可以在Bubble.io中使用iframe。您不需要使用HTML导入。创建OpenTok嵌入时，请将嵌入的网站网址设置为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编辑器中的“预览”按钮，OpenTok嵌入工作。

什么是使我的HTML导入不仅仅适用于Chrome的最佳方法？

1 个答案: