• Skip to Search
  • Skip to Content
  • Skip to Side Navigation
Getting StartedSDK ReferenceGlossary
  • Home
  • Getting Started
  • SDK Reference
  • Portal
  • How-To
  • Troubleshooting
  • FAQs
  • Reference
  • Glossary
REST API
Web SDK
Android SDK
iOS SDK
Unity SDK
React Native SDK
EdgeAuth SDK
  • Overview
  • Web SDK
  • Examples

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

Examples on GitHub

The following React Native examples are available in the Phenix GitHub repository:

  • Channel Publisher

  • Channel Viewer

Page Content
    Copyright 2023 © Phenix RTS
    Privacy Policy | Terms of Service
    v2023-01-31T21:25:10