No stream gets displayed when using iPad

[AronBuzogany]

Setting up an RTC connection works. I get a stream with an active video and audio stream. However the stream doesn't get displayed on my screen, it's as if there is no component. When on my desktop (Ubuntu, firefox) however it does get displayed, also on an android phone using Google Chrome it gets displayed. The issue only occurs on my ipad. I have also tried Chrome on the iPad, this also doesn't work.

Instructions To reproduce

I have also opened this issue in the react-native-web-rtc repo as the same issue occurs there (as an application build).

import { useEffect, useRef, useState } from "react";
import { Platform, SafeAreaView, View } from "react-native";

let RTCView, RTCPeerConnection;

if (Platform.OS === "web") {
  const WebRTC = require("react-native-webrtc-web-shim");
  RTCView = WebRTC.RTCView;
  RTCPeerConnection = WebRTC.RTCPeerConnection;
} else {
  const WebRTC = require("react-native-webrtc");
  RTCView = WebRTC.RTCView;
  RTCPeerConnection = WebRTC.RTCPeerConnection;
  WebRTC.registerGlobals();
}

const MEDIA_SERVER_URL = process.env.EXPO_PUBLIC_MEDIA_SERVER_URL;

interface WebRTCStreamProps {
  streamKey: string;
}

export default function WebRTCStream({ streamKey }: WebRTCStreamProps) {
  const [stream, setStream] = useState(null);

  const peerConnection = useRef<RTCPeerConnection | null>(null);
  useEffect(() => {
    const startStream = async () => {
      try {
        peerConnection.current = new RTCPeerConnection();

        peerConnection.current.ontrack = (event) => {
          const stream = event.streams[0];
          console.log("Stream active:", stream.active);
          console.log("Audio Tracks:", stream.getAudioTracks());
          console.log("Video Tracks:", stream.getVideoTracks());
          setStream(event.streams[0]);
        };

        // Fetch and POST SDP offer
        const fetchSdpOffer = async () => {
          if (!streamKey) return;
          const streamUrl = `${MEDIA_SERVER_URL}/rtc/v1/whep/?app=live&stream=${streamKey}`;

          try {
            // Create SDP offer
            const offer = await peerConnection.current.createOffer({
              offerToReceiveAudio: true,
              offerToReceiveVideo: true,
            });
            await peerConnection.current.setLocalDescription(offer);

            const sdpOffer = peerConnection.current.localDescription.sdp;

            // POST the SDP offer to the server
            const response = await fetch(streamUrl, {
              method: "POST",
              headers: {
                "Content-Type": "application/sdp",
              },
              body: sdpOffer,
            });

            const answer = await response.text();
            await peerConnection.current.setRemoteDescription({
              type: "answer",
              sdp: answer,
            });
          } catch (error) {
            console.error("Error with WebRTC connection:", error);
          }
        };

        fetchSdpOffer();

        // Clean up peer connection on unmount
        return () => {
          if (peerConnection.current) {
            peerConnection.current.close();
          }
        };
      } catch (error) {
        console.error("Error initializing WebRTC:", error);
      }
    };

    startStream();
  }, [streamKey]);

  console.log("Stream:", stream);
  console.log("media server url:", MEDIA_SERVER_URL);

  return (
    <View style={{ maxWidth: "50%", flexGrow: 1 }}>
      {stream && <RTCView stream={stream} />}
    </View>
  );
}

As mediaserver I am using srs with the conf/rtmp2rtc.conf config.

Versions (please complete the following information):

• React Native Version: 0.74.5
• React Native Web Version: ~0.19.10
• react-native-webrtc: ^124.0.4
• react-native-webrtc-web-shim: ^1.0.6