improve UI and fix , don't ask cam/mic permissions for play mode

example/index.js

@@ -1,8 +1,5 @@
 import { AppRegistry } from 'react-native';
-import App from './src/App';
-//import App from './src/Play';
-//import App from './src/Peer';
-//import App from './src/Conference';
 import { name as appName } from './app.json';
+import App from './src/App';
 
 AppRegistry.registerComponent(appName, () => App);

example/package.json

@@ -17,7 +17,10 @@
   "dependencies": {
     "react": "18.3.1",
     "react-native": "0.75.2",
+    "react-native-gesture-handler": "^2.24.0",
     "react-native-incall-manager": "^4.2.0",
+    "react-native-safe-area-context": "^5.3.0",
+    "react-native-screens": "^4.9.1",
     "react-native-vector-icons": "^10.1.0",
     "react-native-webrtc": "^124.0.4"
   },
@@ -29,7 +32,10 @@
     "@react-native/eslint-config": "0.75.2",
     "@react-native/metro-config": "0.75.2",
     "@react-native/typescript-config": "0.75.2",
-    "@types/react": "^18.2.6",
+    "@react-navigation/native": "^7.0.15",
+    "@react-navigation/stack": "^7.1.2",
+    "@types/react": "^18.3.18",
+    "@types/react-native": "^0.73.0",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",

example/src/App.tsx

@@ -1,186 +1,39 @@
-import React, {useCallback, useRef, useState, useEffect} from 'react';
-
-import {
-  StyleSheet,
-  View,
-  SafeAreaView,
-  TouchableOpacity,
-  Text,
-} from 'react-native';
-import {useAntMedia, rtc_view} from '@antmedia/react-native-ant-media';
-
-import InCallManager from 'react-native-incall-manager';
-
-var publishStreamId:string;
-
-export default function App() {
-  var defaultStreamName = 'streamTest1';
-  const webSocketUrl = 'ws://test.antmedia.io:5080/WebRTCAppEE/websocket';
-  //or webSocketUrl: 'wss://server.com:5443/WebRTCAppEE/websocket',
-
-  const streamNameRef = useRef<string>(defaultStreamName);
-  const [localMedia, setLocalMedia] = useState('');
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isWaitingWebsocketInit, setIsWaitingWebsocketInit] = useState(false);
-
-  let localStream: any = useRef(null);
-
-  useEffect(() => {
-    console.log(' localStream.current ', localStream.current);
-  }, []);
-
-  const adaptor = useAntMedia({
-    url: webSocketUrl,
-    mediaConstraints: {
-      audio: true,
-      video: {
-        width: 640,
-        height: 480,
-        frameRate: 30,
-        facingMode: 'front',
-      },
-    },
-    callback(command: any, data: any) {
-      switch (command) {
-        case 'pong':
-          break;
-        case 'publish_started':
-          console.log('publish_started');
-          setIsPlaying(true);
-          break;
-        case 'publish_finished':
-          console.log('publish_finished');
-          InCallManager.stop();
-          setIsPlaying(false);
-          adaptor.closeWebSocket();
-          break;
-        case 'local_stream_updated':
-          console.log('local_stream_updated');
-          verify();
-          break;
-        case 'websocket_not_initialized':
-          setIsWaitingWebsocketInit(true);
-          adaptor.initialiseWebSocket();
-          break;
-        case 'websocket_closed':
-          console.log('websocket_closed');
-          adaptor.stopLocalStream();
-          break;
-        default:
-          console.log(command);
-          break;
-      }
-    },
-    callbackError: (err: any, data: any) => {
-      console.error('callbackError', err, data);
-    },
-    peer_connection_config: {
-      iceServers: [
-        {
-          url: 'stun:stun.l.google.com:19302',
-        },
-      ],
-    },
-    debug: true,
-  });
-
-  const generateRandomString = (length: number): string => {
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    let result = '';
-    const charactersLength = characters.length;
-
-    for (let i = 0; i < length; i++) {
-      const randomIndex = Math.floor(Math.random() * charactersLength);
-      result += characters.charAt(randomIndex);
-    }
-    return result;
-  };
-
-  const verify = () => {
-    console.log('in verify');
-    if (adaptor.localStream.current && adaptor.localStream.current.toURL()) {
-      console.log('in verify if adaptor local stream', adaptor.localStream);
-      if (isWaitingWebsocketInit) {
-        setIsWaitingWebsocketInit(false);
-        publishStreamId = generateRandomString(12);
-        adaptor.publish(publishStreamId);
-      }
-      return setLocalMedia(adaptor.localStream.current.toURL());
-    }
-    setTimeout(verify, 5000);
-  };
-
-  useEffect(() => {
-    verify();
-  }, [adaptor.localStream]);
-
-  useEffect(() => {
-    if (localMedia) {
-      InCallManager.start({media: 'video'});
-    }
-  }, [localMedia]);
-
-  const handlePublish = useCallback(() => {
-    if (!adaptor) {
-      return;
-    }
-    publishStreamId = generateRandomString(12);
-    adaptor.publish(publishStreamId);
-  }, [adaptor]);
-
-  const handleStop = useCallback(() => {
-    if (!adaptor) {
-      return;
-    }
-    adaptor.stop(publishStreamId);
-  }, [adaptor]);
-
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import MainScreen from './MainScreen';
+import AppScreen from './App';
+
+import Publish from './Publish';
+import Chat from './Chat';
+import Peer from './Peer';
+import Conference from './Conference';
+import Play from './Play';
+
+export type RootStackParamList = {
+  MainScreen: undefined;
+  AppScreen: undefined;
+  Play: undefined;
+  Peer: undefined;
+  Conference: undefined;
+};
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+const App: React.FC = () => {
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.box}>
-        <Text style={styles.heading}>Ant Media WebRTC Publish</Text>
-        {localMedia ? <>{rtc_view(localMedia, styles.streamPlayer, 'cover')}</> : <></>}
-        {!isPlaying ? (
-          <>
-            <TouchableOpacity onPress={handlePublish} style={styles.button}>
-              <Text>Start Publishing</Text>
-            </TouchableOpacity>
-          </>
-        ) : (
-          <>
-            <TouchableOpacity onPress={handleStop} style={styles.button}>
-              <Text>Stop Publishing</Text>
-            </TouchableOpacity>
-          </>
-        )}
-      </View>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="MainScreen">
+        <Stack.Screen name="MainScreen" component={MainScreen} options={{ title: 'Home' }} />
+        <Stack.Screen name="AppScreen" component={AppScreen} />
+        <Stack.Screen name="Publish" component={Publish} />
+        <Stack.Screen name="Play" component={Play} />
+        <Stack.Screen name="Peer" component={Peer} />
+        <Stack.Screen name="Conference" component={Conference} />
+        <Stack.Screen name="Chat" component={Chat} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
-}
+};
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  box: {
-    alignSelf: 'center',
-    width: '80%',
-    height: '80%',
-  },
-  streamPlayer: {
-    width: '100%',
-    height: '80%',
-    alignSelf: 'center',
-  },
-  button: {
-    alignItems: 'center',
-    backgroundColor: '#DDDDDD',
-    padding: 10,
-    marginBottom: 10,
-  },
-  heading: {
-    alignSelf: 'center',
-  },
-});
+export default App;

example/src/Chat.tsx

@@ -184,11 +184,12 @@ const styles = StyleSheet.create({
   },
   button: {
     alignItems: 'center',
-    backgroundColor: '#DDDDDD',
+    backgroundColor: '#AAAAAA',
     padding: 10,
     marginBottom: 10,
   },
   heading: {
     alignSelf: 'center',
+    color: 'black'
   },
 });

example/src/Conference.tsx

@@ -332,7 +332,7 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#DDDDDD',
+    backgroundColor: '#AAAAAA',
     padding: 10,
     width: '100%',
     marginTop: 20,
@@ -341,15 +341,17 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     marginBottom: 5,
     padding: 2,
+    color: 'black'
   },
   heading1: {
     alignSelf: 'center',
     marginTop: 20,
+    color: 'black'
   },
   roundButton: {
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#DDDDDD',
+    backgroundColor: '#AAAAAA',
     padding: 5,
     borderRadius: 25, // This will make the button round
     width: 30, // Diameter of the button

example/src/MainScreen.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+type RootStackParamList = {
+  MainScreen: undefined;
+  Publish: undefined;
+  Play: undefined;
+  Peer: undefined;
+  Conference: undefined;
+  Chat: undefined;
+};
+
+type MainScreenProps = {
+  navigation: StackNavigationProp<RootStackParamList, 'MainScreen'>;
+};
+
+const MainScreen: React.FC<MainScreenProps> = ({ navigation }) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Sample Apps</Text>
+
+      <TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Publish')}>
+        <Text style={styles.text}>Publish</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Play')}>
+        <Text style={styles.text}>Play</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Peer')}>
+        <Text style={styles.text}>Peer</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Conference')}>
+        <Text style={styles.text}>Conference</Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Chat')}>
+            <Text style={styles.text}>Chat</Text>
+        </TouchableOpacity>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5f5f5',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+    color: 'black',
+  },
+  box: {
+    width: 200,
+    height: 60,
+    backgroundColor: '#6200ee',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+    marginVertical: 10,
+  },
+  text: {
+    color: 'white',
+    fontSize: 18,
+  },
+});
+
+export default MainScreen;

example/src/Peer.tsx

@@ -44,7 +44,7 @@ export default function App() {
           console.log('leaved!');
           setIsPlaying(false);
           break;
-        case "newStreamAvailable": 
+        case "newStreamAvailable":
           if(data.streamId == streamNameRef.current)
             setRemoteStream(data.stream.toURL());
         default:
@@ -161,12 +161,13 @@ const styles = StyleSheet.create({
   },
   button: {
     alignItems: 'center',
-    backgroundColor: '#DDDDDD',
+    backgroundColor: '#AAAAAA',
     padding: 10,
     marginBottom: 10,
   },
   heading: {
     alignSelf: 'center',
     marginBottom: 10,
+    color: 'black'
   },
 });