React Native Examples

1{
2"dependencies": {
3    "phenix-web-sdk": "^2018.3.9",
4    "react-native-webrtc": "1.58.3"
5  }
6}

1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import {
4  RTCPeerConnection,
5  RTCIceCandidate,
6  RTCSessionDescription,
7  RTCView,
8  MediaStream,
9  MediaStreamTrack,
10  getUserMedia,
11} from 'react-native-webrtc';
12
13global = Object.assign(global, {
14  RTCPeerConnection,
15  RTCIceCandidate,
16  RTCSessionDescription,
17  RTCView,
18  MediaStream,
19  MediaStreamTrack,
20  getUserMedia,
21});
22import sdk from './phenix-web-sdk-react-native.min';
23
24sdk.RTC.shim();
25
26export default class App extends React.Component {
27  constructor(props) {
28    super(props);
29
30    this.state = { webrtcSupported: sdk.RTC.webrtcSupported, videoURL: '' };
31  }
32
33  render() {
34    return (
35      <View style={styles.container}>
36        <Text>Open up App.js to start working on your app!</Text>
37        <Text>Changes you make will automatically reload.</Text>
38        <Text>Shake your phone to open the developer menu.</Text>
39        <Text>{this.state.webrtcSupported ? 'YES' : 'NO'}</Text>
40        <RTCView style={styles.video} streamURL={this.state.videoURL} />
41      </View>
42    );
43  }
44
45  componentDidMount() {
46    const channelExpress = new sdk.express.ChannelExpress({
47      backendUri: 'https://phenixrts.com/demo',
48      authenticationData: {},
49    });
50    this.setState({ webrtcSupported: sdk.RTC.webrtcSupported });
51    channelExpress.joinChannel(
52      {
53        alias: 'channel1',
54        capabilities: [],
55      },
56      (error, response) => {
57        if (response && response.channelService) {
58          this.channelService = response.channelService;
59        }
60      },
61      (error, response) => {
62        if (response && response.mediaStream) {
63          console.log('VIDEO URL', response.mediaStream.getStream().toURL());
64          this.setState({ videoURL: response.mediaStream.getStream().toURL() });
65        }
66      }
67    );
68  }
69}
70
71const styles = StyleSheet.create({
72  container: {
73    flex: 1,
74    backgroundColor: '#fff',
75    alignItems: 'center',
76    justifyContent: 'center',
77  },
78  video: {
79    height: 360,
80    width: '100%',
81  },
82});