javascript - IOS WebRTC js 黑屏

Question

我正在尝试开发移动设备和计算机之间的 webrtc 视频通话系统。移动设备将他的视频流发送到计算机。

在移动设备中，UI 仅显示它通过摄像头录制的视频，在 Android 中这一切都很好，但在 iOS 中(我用 2 款不同的 iPhone 和最新的 iOS 版本进行了测试)视频无法开始并且它显示为黑色认为它可以毫无问题地传输到计算机。

我尝试了我在网上找到的所有东西，向视频元素添加控件，删除控件，添加自动播放在线播放......，请求 getUserMedia 卸载并根据用户手势再现流，但似乎没有任何效果，我不'甚至在手机的控制台上得到任何错误。我在不同的浏览器上测试了 safari 和 chrome。更奇怪的是，有时它会在转到您在浏览器上打开的选项卡列表并返回页面时开始

这是视频元素的代码

<video class='user-virtual-assessment-video' id='virtualAssessmentVideo' autoplay muted playsinline>
            
</video>
<button id='startVirtualAssessment' class='action-button'>
  <svg ...>
</button>

以及当用户点击按钮时执行的代码

e.stopPropagation();
e.preventDefault();
const videoElement = document.getElementById('virtualAssessmentVideo')
videoElement.srcObject = stream;
videoElement.play()
startVirtualAssessment()

函数 startVirtualAssessment 基本上启动了 rtc 连接，iPhone 的用户媒体在页面加载时被请求并存储在流变量中

navigator.mediaDevices.getUserMedia({video: { facingMode: 'environment', aspectRatio: {exact: 16/9}, frameRate: { ideal: 10, max: 15 } }}).then((streamObject) => {
    stream = streamObject;
  })

也许有一些明显的东西是我遗漏或不理解的，但我并没有真正看到代码的问题。

非常感谢:)

Answer 1

我们认为我们已经确定了此问题的原因:在移动版 Safari(仅)上存在一个限制，即不能针对同一媒体类型多次请求 getUserMedia。

如果您调用 getUserMedia 一次让用户在连接到其他人之前看到他/她自己，然后让 webRTC 库(例如 mediasoup，在我们的例子中)调用 getUserMedia 同样，第一个请求被静音(导致黑屏)，然后第二个请求将优先(让其他人看到用户)。

一种解决方法似乎是在第一次检索到媒体流后.clone()，而不是第二次调用getUserMedia。

另请参阅此 webkit 错误报告:https://bugs.webkit.org/show_bug.cgi?id=179363