Flutter WebRTC：GetUserMedia() 不适用于 Safari 和 IOS 设备

Question

我目前正在使用 flutter_webrtc 包开发一个应用程序。事实证明，当我像下面这样调用WebRTC的getUserMedia方法时，它并没有提示我检查相机权限，整个应用程序就卡住了。 Mac Safari 以及 IOS Chrome 和 Safari 都会出现这种情况。

var stream = await navigator.mediaDevices.getUserMedia(mediaConstraints);
_localStream = stream;
_localRenderer.srcObject = _localStream;
stream.getTracks().forEach((element) {
  _peerConnection!.addTrack(element, stream); 
});

此代码直接来自官方 flutter_webrtc 示例：https://github.com/flutter-webrtc/flutter-webrtc/blob/main/example/lib/src/get_user_media_sample.dart。我的 flutter_webrtc 包的版本是 0.9.47，我的 Mac safari 的版本是 17.3，我的 Dart SDK 的版本是 3.2.3，我的 Flutter 的版本是 3.16.5。

此外，我还从编译后的Javascript文件中找到了以下代码片段

main.dart.js

。 Flutter 似乎调用了一个名为

webkitGetUserMedia

的特定方法，该方法似乎适合 Safari，但它不起作用。可能是因为苹果的一些限制？

A.zu.prototype = {
        WO(a, b, c) {
            var s = new A.ay($.ah, t.xN),
                r = new A.bF(s, t.Rt),
                q = A.ar(["audio", b, "video", c], t.N, t.z),
                p = !a.getUserMedia
            p.toString
            if (p)
                a.getUserMedia = a.getUserMedia || a.webkitGetUserMedia || a.mozGetUserMedia || a.msGetUserMedia
            this.a51(a, new A.W_([], []).li(q), new A.a86(r), new A.a87(r))
            return s
        },
        a51(a, b, c, d) {
            return a.getUserMedia(b, A.ji(c, 1), A.ji(d, 1))
        }
}

我非常感谢任何知道这个问题解决方案的人，以便 getUserMedia 可以适用于 iOS 设备的 Flutter Web App。

Answer 1

假设您在没有 HTTPS 的情况下运行。

getUserMedia

仅通过安全来源 (HTTPS) 支持 API。您可以将代码部署到安全源，也可以导航至

chrome://flags/#unsafely-treat-insecure-origin-as-secure

，仅在 Chrome 中出于测试目的禁用安全源策略。欲了解更多信息：

1. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

2. 如何在不使用HTTPS的情况下访问Chrome中的摄像头和麦克风？