IOS WebRTC js上的黑屏答案

【问题标题】：Blackscreen on IOS WebRTC jsIOS WebRTC js上的黑屏
【发布时间】：2021-06-30 00:00:48
【问题描述】：

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

在移动设备中，UI 仅显示它通过其相机录制的视频，在 android 中这一切都很好，但在 iOS 中（我用 2 部具有最新 iOS 版本的不同 iphone 进行了测试）视频无法启动并且它显示为黑色认为它可以毫无问题地传输到计算机。

我尝试了我在网上找到的所有内容，向视频元素添加控件，删除控件，添加自动播放内联...，请求 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;
  })

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

非常感谢:)

【问题讨论】：

尝试将aspectRatio: {exact: 16/9} 更改为aspectRatio: {ideal: 16/9}。 iOS 对与其相机匹配的约束有点挑剔。此外，iOS 上的 Chrome 是 Mobile Safari 的封装，因此就 gUM 而言它们是相同的。
您好琼斯，感谢您的回答，我尝试进行您提出的更改，但问题仍然存在，如果这是关于约束的问题，我不应该在通过 webRTC 传输的视频中也有问题?, 电脑里能看清楚视频，手机里看不到
我也看到了这个，很想知道是否有人有解决方案。适用于除移动 Safari（iPad、iPhone）以外的所有浏览器。在变黑之前，我可以看到大约 1 帧视频。我可以确认视频流数据正在通过网络发送，因为其他人可以看到我的视频流。

标签： javascript ios iphone webrtc getusermedia

【解决方案1】：

我们认为我们已经确定了导致此问题的原因：在移动 safari（仅限）上存在一个限制，即不能为同一媒体类型多次请求 getUserMedia。

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

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

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

【讨论】：