如何使 iframe 与网络摄像头一起使用？ [p5 & tensorflow.js]答案

【问题标题】：How to make iframe work with webcam? [p5 & tensorflow.js]如何使 iframe 与网络摄像头一起使用？ [p5 & tensorflow.js]
【发布时间】：2018-12-27 16:43:01
【问题描述】：

我正在尝试将我在出色的 p5js 网络编辑器上完成的这个 p5 草图带到带有 iframe 的 Wordpress 页面，但它不起作用。

这是实际情况： https://editor.p5js.org/ailgun/full/ry6qqlZ-4

这是 iframe 嵌入代码；

<iframe src="https://editor.p5js.org/ailgun/embed/ry6qqlZ-4"></iframe>

我猜问题出在网络摄像头上，因为其他草图也像这样工作。

<iframe src="https://editor.p5js.org/embed/B1j5yC2vQ"></iframe>

它还使用了另一个 .js 库，例如 tensorflow.js 和 ml5js。有没有可能它们也引起了问题？

非常感谢！

【问题讨论】：

查看浏览器的developer tools 是否有错误。尝试隔离您的问题：获取一个简单的示例，然后一次添加一个内容，直到您可以在 minimal reproducible example 中重现您的问题。祝你好运。
非常感谢。它有点暗示：(p5.dom.min.js:1 [Deprecation] getUserMedia() 不再适用于不安全的来源。要使用此功能，您应该考虑将应用程序切换到安全的来源，例如 HTTPS。请参阅'url here' 以获取更多详细信息。）由于它必须要求用户允许网络摄像头，它似乎只是停留在上面。仍然不确定如何解决。

标签： javascript iframe p5.js tensorflow.js

【解决方案1】：

您是否尝试将“允许”属性添加到 iframe 元素？见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes

我在 iframe 中使用 ml5js 访问相机或麦克风时没有问题。

【讨论】：

是的，实际上这是整个 iframe 标记，我正在 Wordpress 页面上尝试 - 可能是问题所在吗？ editor.p5js.org/ailgun/embed/ry6qqlZ-4" frameborder="0" scrolling="no">