blackuy / react-native-twilio-video-webrtc

Twilio Video (WebRTC) for React Native
https://www.twilio.com/docs/video
MIT License
609 stars 403 forks source link

setLocalAudioEnabled() has to be explicitly set to true for iOS to transfer local audio #473

Open DanielMenke opened 3 years ago

DanielMenke commented 3 years ago

Steps to reproduce

  1. Run example code on iOS 14 phone
  2. Try to use local microphone

Expected behaviour

Audio is transferred to peers.

Actual behaviour

No audio is received by the peers. twilioRef.current.setLocalAudioEnabled(true) has to be explicitly called on sender side, before any audio gets transferred. This is not mentioned in the example application and should be fixed.

Environment

react-native-twilio-video-webrtc

Version: 2.0.0

slycoder commented 3 years ago

Hm, that should definitely not be the case. When the component is mounted, the local audio track is set up here:

https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/src/TwilioVideo.ios.js#L166

That calls into the location where the track is enabled:

https://github.com/blackuy/react-native-twilio-video-webrtc/blob/master/ios/RCTTWVideoModule.m#L196

Can you verify that these steps are happening in your build? I wonder if there's a race condition somewhere...

DanielMenke commented 3 years ago

Yeah can confirm these steps are getting called.

The only difference of my code to the one in the example is that I have an extra component that wraps the TwilioVideo component, so I can exchange it with a mocked component in certain scenarios:

import React, { forwardRef, useRef } from 'react';
import {
  RoomErrorEventCb,
  RoomEventCb,
  TrackEventCb,
  TwilioVideo,
} from 'react-native-twilio-video-webrtc';

interface Props {
  onRoomDidConnect: RoomEventCb;
  onRoomDidDisconnect: RoomErrorEventCb;
  onRoomDidFailToConnect: RoomErrorEventCb;
  onParticipantAddedVideoTrack: TrackEventCb | any;
  onParticipantRemovedVideoTrack: TrackEventCb | any;
}

const TwilioWrapper = forwardRef((props: Props, ref: any) => {
  return (
    <TwilioVideo
      ref={ref}
      onRoomDidConnect={props.onRoomDidConnect}
      onRoomDidDisconnect={props.onRoomDidDisconnect}
      onRoomDidFailToConnect={props.onRoomDidFailToConnect}
      onParticipantAddedVideoTrack={props.onParticipantAddedVideoTrack}
      onParticipantRemovedVideoTrack={props.onParticipantRemovedVideoTrack}
    />
  );
});

export default TwilioWrapper;

The ref is forwarded from a component which handles the rest of the video session UI. On android everything works fine btw.

slycoder commented 3 years ago

Can you try the branch in #479 and see if that solves the issue?