如何使 navigator.mediaDevices.getUserMedia({ video: true }) 在移动设备上工作

Question

我正在尝试用手机录制视频并将其用作我正在构建的网站的背景。目标是对视频流进行处理，但首先我需要能够渲染它。我有以下代码：

https://codepen.io/jasperkennis/pen/yLGjOrw

我还在测试一个简单的 html 页面，通过

python -m http.server

和

ngrok

公开，以确保它位于 https 上。在我的笔记本电脑上，它很高兴地使用网络摄像头，但在手机上（已测试 iPhone 12 和 15），我可以看到它可以访问摄像头（权限模式显示正确），并且我可以发出警报以查看它走了多远，但是它似乎从未尝试渲染任何东西。

我不知道从这里去哪里，也许它不应该工作，任何帮助将不胜感激。

Answer 1

您可以使用

<video>

元素直接访问设备的摄像头，而不是使用 getUserMedia API。