Compatability with Ant Media Server on web

Overview

I have a rest repo for web/mobile webrtc conferencing that’s failing to display remote streams when run in the web.

Project Goals

  1. Enable multiple users to communicate with audio/video in a single, webRTC conference room
  2. Support mobile (android/iOS)
  3. Support modern web browsers (everything except I.E., basically)

Current Implementation

Steps to Recreate Issue

  • Clone repo
  • Run npm i --force to override the react-native-webrtc-web-shim react version dependency conflict
  • Build web version with npm run web or npx expo start --web
  • (optional) build android version with npm run android or npx expo run:android
  • Click “Join Room” in UI to initiate connection to hardcoded room
  • Use other browser to open Ant Media Server Conference Room
  • Enter unique room name (currently hardcoded in /Video.jsx as ‘bcmTest10001’
    • Note that audio track is muted to prevent feedback loops
  • Observe that the video from the localhost is viewable from the Ant Media Server Conference Room website (or on android if running), BUT the remote video(s) are blank in the local host
    • The “remoteStreams” will show up as blank red squares and, periodically disappear/refresh

Suspected Issue

  • My guess is that I haven’t properly implemented the react-native-webrtc-web-shim or there is a base incompatability with my approach of trying to use one react-native code base for mobile and web video conferencing. I’ve tried a few versions to implement the web-shim Track Listener as per the repos instructions but without success
  • Suggestions to fixing the specific instance of the issue, or a better approach to getting this working on mobile/web would be greatly appreciated