React Native Examples

{
"dependencies": {
    "phenix-web-sdk": "^2018.3.9",
    "react-native-webrtc": "1.58.3"
  }
}

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  getUserMedia,
} from 'react-native-webrtc';
 
global = Object.assign(global, {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  getUserMedia,
});
import sdk from './phenix-web-sdk-react-native.min';
 
sdk.RTC.shim();
 
export default class App extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = { webrtcSupported: sdk.RTC.webrtcSupported, videoURL: '' };
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Text>{this.state.webrtcSupported ? 'YES' : 'NO'}</Text>
        <RTCView style={styles.video} streamURL={this.state.videoURL} />
      </View>
    );
  }
 
  componentDidMount() {
    const channelExpress = new sdk.express.ChannelExpress({
      backendUri: 'https://phenixrts.com/demo',
      authenticationData: {},
    });
    this.setState({ webrtcSupported: sdk.RTC.webrtcSupported });
    channelExpress.joinChannel(
      {
        alias: 'channel1',
        capabilities: [],
      },
      (error, response) => {
        if (response && response.channelService) {
          this.channelService = response.channelService;
        }
      },
      (error, response) => {
        if (response && response.mediaStream) {
          console.log('VIDEO URL', response.mediaStream.getStream().toURL());
          this.setState({ videoURL: response.mediaStream.getStream().toURL() });
        }
      }
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  video: {
    height: 360,
    width: '100%',
  },
});