opentok-react-native icon indicating copy to clipboard operation
opentok-react-native copied to clipboard

[feature request] Select audio stream source

Open ythecombinator opened this issue 6 years ago • 1 comments

In most video/voice messaging apps out there we have an option to select where we want the audio to come from–e.g. Built-in microphone, Bluetooth device etc.

I admit I haven't thought about the implementation details yet, tbh. But initially I think of:

getAvailableAudioSources(): Array<source> - A helper function that returns an array–or an object–of available sources where the first element is always the Built-in microphone and the subsequent ones are alternatives like Bluetooth devices or similar. I haven't modeled the mentioned the source object, but it'd be something with some metadata.

This would be quite helpful:

  • I could check getAvailableAudioSources().length to know wether to show a swap option or not
  • The metadata in each item would allow me to render a UI that better explains this item

For the component, having it just as a prop of OTPublisher–just like cameraPosition–would be something great, e.g.:

audioSource: number - The preferred audio source where valid inputs are indexed values of the getAvailableAudioSources() array.

Resulting in something like:

import {OTPublisher, OTSession, OTSubscriber} from 'opentok-react-native/components';
import {getAvailableAudioSources} from 'opentok-react-native/utils';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      audioSource: 0, // `0` could be a default value
    };
  }

  onChangeAudioSourceButtonPress = (src) => {
    this.setState((state) => ({
      ...state,
      audioSource: src
    }));
  };

  render() {
    const audioSources = getAvailableAudioSources();
    // We could then map audioSources to any UI component–e.g. a list–that would render a list 
    // of options and then call onChangeAudioSourceButtonPress() depending on the selected one 

    return (
      <OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token">
        <OTPublisher
          properties={audioSource: this.state.audioSource}
          style={{ height: 100, width: 100 }}
        />
      </OTSession>
    );
  }
}

ythecombinator avatar Apr 26 '18 06:04 ythecombinator

Unfortunately this is not implemented on Native SDK so not feasible at this point

enricop89 avatar May 27 '22 14:05 enricop89