Flutter WebRTC: GetUserMedia() does not work for Safari and IOS devices

I am currently developing an app using the flutter_webrtc package. It turns out that when I call WebRTC's getUserMedia method as blow, it does not prompt me to check for camera permission, and the whole app is just stuck. This situation happens with Mac Safari and both IOS Chrome and Safari.

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

This code is directly from the official flutter_webrtc sample: https://github.com/flutter-webrtc/flutter-webrtc/blob/main/example/lib/src/get_user_media_sample.dart. The version of my flutter_webrtc package is 0.9.47, the version for my Mac safari is 17.3, the version for my Dart SDK is 3.2.3, and the version for my Flutter is 3.16.5.

In addition, I've found out the following code snippet from the compiled Javascript file main.dart.js. It seems that Flutter calls a specific method called webkitGetUserMedia which seems to fit into Safari, but it just doesn't work. Probably due to some restrictions by Apple?

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))
        }
}

I greatly appreciate anyone who knows the solution to this problem so that getUserMedia can work for Flutter Web App for IOS devices.

Solution

Assuming you are running without HTTPS. getUserMedia API is supported only over secure origins (HTTPS). You can either deploy your code to a secure origin or disable the secure origin policy for Testing purpose only in Chrome by navigating to chrome://flags/#unsafely-treat-insecure-origin-as-secure. For more information: