GetUserMedia() does not work for Safari and IOS devices

[0010SS]

Hi! I am currently developing an app using the flutter_webrtc package. It turns out that when I call WebRTC's getUserMedia method for my Flutter web app as below, 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.

[ArjunBhilare]

I'm facing the same issue. Any solution?

[0010SS]

I'm facing the same issue. Any solution?

For me, the issue is not with GetUserMedia(). I found out in the WebRTC console log of Safari that it requires Member RTCIceServer.urls, and hence changing ICE Server configuration keys in the Peer Connection Configuration from "url" to "urls" solve the issue in Safari. Namely,

final configuration = <String, dynamic>{
  "iceServers": [
    {
      "urls": "..",  // the key here should be "urls" not "url"
      "username": "...",
      "credential": "..."
    },
  ],
  'sdpSemantics': 'unified-plan',
};

_peerConnection = await createPeerConnection(configuration);

Now, GetUserMedia() works, and the browsers on both my iPhone and Mac work to request the camera and render the stream. However, the WebRTC connection still does not work for browsers, either Chrome or Safari, on my iPhone. The media stream track is connected, but no frames are sent from the iPhone to the other peer. I believe this is a problem with IOS, but I'm still working it out. Does anyone have a solution to this?

[ArjunBhilare]

I am building flutter-webrtc based app on iOS and Android. I have

final Map<String, dynamic> configuration = {
    "sdpSemantics": "plan-b",
    'iceServers': [
      {
        "urls": [
          'stun:stun.l.google.com:19302',
          'stun:stun1.l.google.com:19302'
        ],
      }
    ]
  };

1. In this when I set

'sdpSemantics': 'unified-plan',

then the app crashes on user joined

2. Also I have

final _localRenderer = RTCVideoRenderer();

await _localRenderer.initialize();

MediaStream _localStream =
     await navigator.mediaDevices.getUserMedia(mediaConstraints);

_localRenderer.srcObject = _localStream;
 
 Positioned(
       bottom: 10,
       right: 10,
       child: SizedBox(
         width: 150,
         height: 200,
         child: RTCVideoView(
           _localRenderer,
           mirror: true,
           objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitCover,
         ),
       ),
     ),

The camera is turning ON but the RTCVideoView _localRenderer shows nothing, also no video stream is shown to the other user. Any insights on this?

The audio works, but the video is not shown, on iOS

[cloudwebrtc]

I think you need to call _localRenderer.srcObject = _localStream; in setState to notify flutter to update your widget.

setState((){
   _localRenderer.srcObject = _localStream;
});

[Garciconx]

I'm facing the same issue. Any solution?

For me, the issue is not with GetUserMedia(). I found out in the WebRTC console log of Safari that it requires Member RTCIceServer.urls, and hence changing ICE Server configuration keys in the Peer Connection Configuration from "url" to "urls" solve the issue in Safari. Namely,

final configuration = <String, dynamic>{
  "iceServers": [
    {
      "urls": "..",  // the key here should be "urls" not "url"
      "username": "...",
      "credential": "..."
    },
  ],
  'sdpSemantics': 'unified-plan',
};

_peerConnection = await createPeerConnection(configuration);

Now, GetUserMedia() works, and the browsers on both my iPhone and Mac work to request the camera and render the stream. However, the WebRTC connection still does not work for browsers, either Chrome or Safari, on my iPhone. The media stream track is connected, but no frames are sent from the iPhone to the other peer. I believe this is a problem with IOS, but I'm still working it out. Does anyone have a solution to this?

I'm facing the same issue I already have the urls key instead of url but keep failing on Safari and Chrome for iOS and on Safari for MacOS

Any possible solution? CC @cloudwebrtc @0010SS

[0010SS]

I'm facing the same issue. Any solution?

For me, the issue is not with GetUserMedia(). I found out in the WebRTC console log of Safari that it requires Member RTCIceServer.urls, and hence changing ICE Server configuration keys in the Peer Connection Configuration from "url" to "urls" solve the issue in Safari. Namely,

final configuration = <String, dynamic>{
  "iceServers": [
    {
      "urls": "..",  // the key here should be "urls" not "url"
      "username": "...",
      "credential": "..."
    },
  ],
  'sdpSemantics': 'unified-plan',
};

_peerConnection = await createPeerConnection(configuration);

Now, GetUserMedia() works, and the browsers on both my iPhone and Mac work to request the camera and render the stream. However, the WebRTC connection still does not work for browsers, either Chrome or Safari, on my iPhone. The media stream track is connected, but no frames are sent from the iPhone to the other peer. I believe this is a problem with IOS, but I'm still working it out. Does anyone have a solution to this?

I'm facing the same issue I already have the urls key instead of url but keep failing on Safari and Chrome for iOS and on Safari for MacOS

Any possible solution? CC @cloudwebrtc @0010SS

Could you provide a snapshot of your code?

[Garciconx]

Map<String, dynamic> configuration = {
    'iceServers': [
      {
        'urls': [
          'stun:stun1.l.google.com:19302',
          'stun:stun2.l.google.com:19302',
        ]
      }
    ]
  };

CC @0010SS

[Garciconx]

Any possible solution? @cloudwebrtc

[0010SS]

Any possible solution? @cloudwebrtc

Have you tried to check out the WebRTC console log for Safari? You can probably spot the errors there and see how they go.

[Garciconx]

CC @0010SS @cloudwebrtc

´´´

Timer(const Duration(seconds: 2), () {
  peer_connection.onTrack = (RTCTrackEvent event) {
    debugPrint('Got remote track: ${event.streams[0]}');

    event.streams[0].getTracks().forEach((track) {
      debugPrint('Add a track to the remoteStream $track');
      remote_streams.last.addTrack(track);
    });
  };
});

´´´

[Garciconx]

CC @0010SS @cloudwebrtc

The problem is that It's failing to add the track on Safari, this issue is not presented on Google Chrome, Android nor iOS.

On the Mobile App, the code is capable of adding both tracks local and remote but Safari fails to add the remote track.

[0010SS]

CC @0010SS @cloudwebrtc

The problem is that It's failing to add the track on Safari, this issue is not presented on Google Chrome, Android nor iOS.

On the Mobile App, the code is capable of adding both tracks local and remote but Safari fails to add the remote track.

Have you checked out the WebRTC console log of Safari to see whether there are any errors? That's how I solve the problem.

[Garciconx]

CC @0010SS @cloudwebrtc
The problem is that It's failing to add the track on Safari, this issue is not presented on Google Chrome, Android nor iOS.
On the Mobile App, the code is capable of adding both tracks local and remote but Safari fails to add the remote track.

Have you checked out the WebRTC console log of Safari to see whether there are any errors? That's how I solve the problem.

Yes I posted a Screenshot and the code in my past comment

[Garciconx]

Safari doesn't tell me much about the error, the browser just tells the line of code where it is

[harshmdr-devslane]

Any update here?

[yevgeniaronov]

managed to fix this by adding the 'mandatory' object to 'video':

  var stream = await navigator.mediaDevices.getUserMedia({
        'video': {
          'facingMode': 'user',
          'mandatory': {
            'minWidth': '640',
            'minHeight': '480',
          },
        },
        'audio': kReleaseMode,
      });

i actually don't understand the logic behind this, at least there should be a warning to notify that it's required.

[bhaskarblur]

Worked! Thanks