Page Content
React Native Examples
Phenix supports only Pure React Native apps. Expo will not work.
Known Issues
Developers using React Native have encountered some issues caused by external dependencies.
The RTCView used in the Phenix sample apps is supplied by
react-native-webrtc.
Phenix uses RTCView much like a <video>
object in HTML; we supply the source for the
video to the selected display, e.g., SurfaceView for Android and CLayer on iOS, <video>
on HTML/JS.
Microphone issue
Some developers are unable to manage microphone permissions on iOS due to a known bug in the WebRTC implementation, which is unlikely to be addressed by WebRTC.
Web SDK
The code below is a full working example using React Native and the Phenix Web SDK.
package.json
JavaScript
1{2"dependencies": {3 "phenix-web-sdk": "^2018.3.9",4 "react-native-webrtc": "1.58.3"5 }6}
App.js
JavaScript
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';1213global = 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';2324sdk.RTC.shim();2526export default class App extends React.Component {27 constructor(props) {28 super(props);2930 this.state = { webrtcSupported: sdk.RTC.webrtcSupported, videoURL: '' };31 }3233 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 }4445 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}7071const 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});
Examples on GitHub
The following React Native examples are available in the Phenix GitHub repository:
v2023-01-31T21:25:10