React Native "Play" example not work

[planetcrypton]

Short description

I can't make the Play example (nor the Publish) to work. Whether it's iOS or Android, emulator or real device.

Environment

• Operating system and version: MacOS 13.5.2 (Apple M2 Pro)
• Java version: 11.0.21+9-LTS (OpenJDK 64-Bit Server VM Zulu11.68+17-CA)
• XCode: 15.0
• Android SDK (+ Build Tools): 13, API: 33
• Ant Media Server version: Enterprise Edition 2.6.4 20230827_1351
• react-native: 0.72.6
• Browser Platform name and version: iOS (16.1 + 15) and Android (API 34), both emulator and real device.

Steps to reproduce

1. Confirmed ReactNative default app works, both iOS and Android, both emulator and real device
2. Installed @antmedia/react-native-ant-media and react-native-webrtc
3. Added permission requests to both Info.plist and AndroidManifest.xml as described at react-native-webrtc
4. Built and started app
5. Started a live-stream, confirmed it's visible at Antmedia at corresponding application
6. Pressed Play button

Expected behavior

I expected to connect to the live stream and see it playing in the app

Actual behavior

Did see nothing at all in the app. If I click the button again within exactly 10 seconds, I get an callbackError already_playing

When I edit the stream-id or the websocket url to a value that doesn't exist, I get a 404 in the log. So the values I use are certainly correct. (Also I can activate a playtoken and only passing a correct playtoken won't give me any errors)

Also adaptor.remoteStreams seems to be an empty object all the time, when I log it.

Logs

 LOG  Running "AntMediaApp3" with {"rootTag":11}
 LOG  web socket opened !
 LOG   onmessage {"command": "pong"}
 LOG   in pong {"command": "pong"}
 LOG  got stream
 LOG  in stream {"_reactTag": "123", "_tracks": [{"_constraints": [Object], "_enabled": true, "_muted": false, "_peerConnectionId": undefined, "_readyState": "live", "_settings": [Object], "id": "a71d0500-66f2-4744-a6ed-a6d1f826eccf", "kind": "audio", "label": "", "remote": false}, {"_constraints": [Object], "_enabled": true, "_muted": false, "_peerConnectionId": undefined, "_readyState": "live", "_settings": [Object], "id": "9a320e5e-8db8-4dfb-9e0f-8c8600a25912", "kind": "video", "label": "", "remote": false}], "active": true, "id": "123"}
 LOG   onmessage {"command": "takeConfiguration", "idMapping": {"0": "ARDAMSvmystream", "1": "ARDAMSamystream"}, "linkSession": null, "sdp": "v=0
o=- a whole lot of data let me know if you (some of) need it
a=max-message-size:262144
", "streamId": "mystream", "subscriberId": "xyz", "type": "offer"}
 LOG  in takeConfiguration
 LOG  in initPeerConnection
 LOG  rn-webrtc:pc:DEBUG 0 ctor +0ms
 LOG  rn-webrtc:pc:DEBUG 0 setRemoteDescription +18ms
 LOG   onmessage {"candidate": "candidate:3282507946 1 udp 2122260223 123.12.0.1 50000 typ host generation 0 ufrag gHUd network-id 1 network-cost 50", "command": "takeCandidate", "id": "0", "label": 0, "linkSession": null, "streamId": "mystream", "subscriberId": "xyz"}
 LOG  in takeCandidate
 LOG  in initPeerConnection
 DEBUG  Ice candidate is added to list because remote description is not set yet
 LOG   onmessage {"candidate": "candidate:545693254 1 udp 1686052607 123.123.1.2 51254 typ srflx raddr 123.12.0.1 rport 50000 generation 0 ufrag gHUd network-id 1 network-cost 50", "command": "takeCandidate", "id": "0", "label": 0, "linkSession": null, "streamId": "mystream", "subscriberId": "xyz"}
 Repeats a dozen time
 LOG   in notification {"command": "notification", "definition": "play_finished", "streamId": "mystream", "subscriberId": "xyz"}
 LOG  play_finished
 LOG  closePeerConnection
 LOG  rn-webrtc:pc:DEBUG 0 close +10s

Please let me know if you need some more details about the log

Have a great day everyone! cheers Sjoerd

[USAMAWIZARD]

Hi @planetcrypton

I tried to build and play the stream with the react native play sample page and its working fine for me , I think this may be related to TURN Server are you in a strict Firewall condition ?

Can you please try configuring a turn server on the example and let me know if it works for you.

const peer_connection_config = {
  iceServers: [
        url: 'stun:stun.l.google.com:19302' ,
    {
      urls: ['turn:*****:3478'],
      username: '*****',
      credential: '***',
    }
  ]
};

when the client is behind a firewall or strict NAT policies TURN server is required to establish the webrtc connection. The TURN server acts as a relay, forwarding the media streams between the clients, ensuring that the communication can take place despite any network restrictions. here is the documentation for installing and configuring a turn server with ant media server

https://antmedia.io/docs/guides/publish-live-stream/webrtc/webrtc-peer-to-peer-communication/#turn-server

[planetcrypton]

Hi @USAMAWIZARD ,

Thank you for getting back on this. It seems that you're totally right! First we disabled the firewall, with the result that it did work on Android, but not on iOS just yet. But setting up a TURN server made it it work for iOS as well - also on Android 😅.

Though (likely a whole different issue) I can not play a stream after I have stopped it (on both Android and iOS). The Play button bounces down a few pixels, so it seems like the player "is making some room", but it never starts playing. On iOS a warning comes saying: "No video stream for react tag: 7F452A41-5323-484F-BDBB-ACCB7EF4DB4C". On Android no warning is given.

For the record: The peer_connection_config property of useAntMedia Params is typed with any, so for people landing on this thread, these are the properties I used:

    peer_connection_config: {
      iceServers: [
        {
          urls: string,
          username: string,
          credential: string,
        },
      ],
    },

[lastpeony]

I want to emphasize that setting up a turn server of version 2.4.4 or higher on the server side suffices. There's no need for separate configuration on the client side. https://antmedia.io/docs/guides/configuration-and-testing/configuring-stun-addresses/#configuring-for-ant-media-244-and-later-versions

[USAMAWIZARD]

@planetcrypton Can you please create a new issue for this problem that you mentioned in the above comments , It will help us to better track the issues. Thank you.

[mekya]

Closing this issue because it's working for @planetcrypton .

Feel free to re-open if it does not work for you.

[vincemavill]

@USAMAWIZARD @mekya I encounter this in PLAY Example

IOS Player Android Publisher