Web SDK - React Native Example

Full working example with React Native

We rely on react-native-webrtc.

package.json

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

App.js

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%'
    }
});