Skip to content

Commit 5b27413

Browse files
USAMAWIZARDUSAMAWIZARD
committed
improve UI and fix , don't ask cam/mic permissions for play mode
1 parent 9d1f5e3 commit 5b27413

11 files changed

+349
-196
lines changed

‎example/index.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { AppRegistry } from 'react-native';
2-
import App from './src/App';
3-
//import App from './src/Play';
4-
//import App from './src/Peer';
5-
//import App from './src/Conference';
62
import { name as appName } from './app.json';
3+
import App from './src/App';
74

85
AppRegistry.registerComponent(appName, () => App);

‎example/package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
"dependencies": {
1818
"react": "18.3.1",
1919
"react-native": "0.75.2",
20+
"react-native-gesture-handler": "^2.24.0",
2021
"react-native-incall-manager": "^4.2.0",
22+
"react-native-safe-area-context": "^5.3.0",
23+
"react-native-screens": "^4.9.1",
2124
"react-native-vector-icons": "^10.1.0",
2225
"react-native-webrtc": "^124.0.4"
2326
},
@@ -29,7 +32,10 @@
2932
"@react-native/eslint-config": "0.75.2",
3033
"@react-native/metro-config": "0.75.2",
3134
"@react-native/typescript-config": "0.75.2",
32-
"@types/react": "^18.2.6",
35+
"@react-navigation/native": "^7.0.15",
36+
"@react-navigation/stack": "^7.1.2",
37+
"@types/react": "^18.3.18",
38+
"@types/react-native": "^0.73.0",
3339
"@types/react-native-vector-icons": "^6.4.18",
3440
"@types/react-test-renderer": "^18.0.0",
3541
"babel-jest": "^29.6.3",

‎example/src/App.tsx

+36-183
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,39 @@
1-
import React, {useCallback, useRef, useState, useEffect} from 'react';
2-
3-
import {
4-
StyleSheet,
5-
View,
6-
SafeAreaView,
7-
TouchableOpacity,
8-
Text,
9-
} from 'react-native';
10-
import {useAntMedia, rtc_view} from '@antmedia/react-native-ant-media';
11-
12-
import InCallManager from 'react-native-incall-manager';
13-
14-
var publishStreamId:string;
15-
16-
export default function App() {
17-
var defaultStreamName = 'streamTest1';
18-
const webSocketUrl = 'ws://test.antmedia.io:5080/WebRTCAppEE/websocket';
19-
//or webSocketUrl: 'wss://server.com:5443/WebRTCAppEE/websocket',
20-
21-
const streamNameRef = useRef<string>(defaultStreamName);
22-
const [localMedia, setLocalMedia] = useState('');
23-
const [isPlaying, setIsPlaying] = useState(false);
24-
const [isWaitingWebsocketInit, setIsWaitingWebsocketInit] = useState(false);
25-
26-
let localStream: any = useRef(null);
27-
28-
useEffect(() => {
29-
console.log(' localStream.current ', localStream.current);
30-
}, []);
31-
32-
const adaptor = useAntMedia({
33-
url: webSocketUrl,
34-
mediaConstraints: {
35-
audio: true,
36-
video: {
37-
width: 640,
38-
height: 480,
39-
frameRate: 30,
40-
facingMode: 'front',
41-
},
42-
},
43-
callback(command: any, data: any) {
44-
switch (command) {
45-
case 'pong':
46-
break;
47-
case 'publish_started':
48-
console.log('publish_started');
49-
setIsPlaying(true);
50-
break;
51-
case 'publish_finished':
52-
console.log('publish_finished');
53-
InCallManager.stop();
54-
setIsPlaying(false);
55-
adaptor.closeWebSocket();
56-
break;
57-
case 'local_stream_updated':
58-
console.log('local_stream_updated');
59-
verify();
60-
break;
61-
case 'websocket_not_initialized':
62-
setIsWaitingWebsocketInit(true);
63-
adaptor.initialiseWebSocket();
64-
break;
65-
case 'websocket_closed':
66-
console.log('websocket_closed');
67-
adaptor.stopLocalStream();
68-
break;
69-
default:
70-
console.log(command);
71-
break;
72-
}
73-
},
74-
callbackError: (err: any, data: any) => {
75-
console.error('callbackError', err, data);
76-
},
77-
peer_connection_config: {
78-
iceServers: [
79-
{
80-
url: 'stun:stun.l.google.com:19302',
81-
},
82-
],
83-
},
84-
debug: true,
85-
});
86-
87-
const generateRandomString = (length: number): string => {
88-
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
89-
let result = '';
90-
const charactersLength = characters.length;
91-
92-
for (let i = 0; i < length; i++) {
93-
const randomIndex = Math.floor(Math.random() * charactersLength);
94-
result += characters.charAt(randomIndex);
95-
}
96-
return result;
97-
};
98-
99-
const verify = () => {
100-
console.log('in verify');
101-
if (adaptor.localStream.current && adaptor.localStream.current.toURL()) {
102-
console.log('in verify if adaptor local stream', adaptor.localStream);
103-
if (isWaitingWebsocketInit) {
104-
setIsWaitingWebsocketInit(false);
105-
publishStreamId = generateRandomString(12);
106-
adaptor.publish(publishStreamId);
107-
}
108-
return setLocalMedia(adaptor.localStream.current.toURL());
109-
}
110-
setTimeout(verify, 5000);
111-
};
112-
113-
useEffect(() => {
114-
verify();
115-
}, [adaptor.localStream]);
116-
117-
useEffect(() => {
118-
if (localMedia) {
119-
InCallManager.start({media: 'video'});
120-
}
121-
}, [localMedia]);
122-
123-
const handlePublish = useCallback(() => {
124-
if (!adaptor) {
125-
return;
126-
}
127-
publishStreamId = generateRandomString(12);
128-
adaptor.publish(publishStreamId);
129-
}, [adaptor]);
130-
131-
const handleStop = useCallback(() => {
132-
if (!adaptor) {
133-
return;
134-
}
135-
adaptor.stop(publishStreamId);
136-
}, [adaptor]);
137-
1+
import React from 'react';
2+
import { NavigationContainer } from '@react-navigation/native';
3+
import { createStackNavigator } from '@react-navigation/stack';
4+
import MainScreen from './MainScreen';
5+
import AppScreen from './App';
6+
7+
import Publish from './Publish';
8+
import Chat from './Chat';
9+
import Peer from './Peer';
10+
import Conference from './Conference';
11+
import Play from './Play';
12+
13+
export type RootStackParamList = {
14+
MainScreen: undefined;
15+
AppScreen: undefined;
16+
Play: undefined;
17+
Peer: undefined;
18+
Conference: undefined;
19+
};
20+
21+
const Stack = createStackNavigator<RootStackParamList>();
22+
23+
const App: React.FC = () => {
13824
return (
139-
<SafeAreaView style={styles.container}>
140-
<View style={styles.box}>
141-
<Text style={styles.heading}>Ant Media WebRTC Publish</Text>
142-
{localMedia ? <>{rtc_view(localMedia, styles.streamPlayer, 'cover')}</> : <></>}
143-
{!isPlaying ? (
144-
<>
145-
<TouchableOpacity onPress={handlePublish} style={styles.button}>
146-
<Text>Start Publishing</Text>
147-
</TouchableOpacity>
148-
</>
149-
) : (
150-
<>
151-
<TouchableOpacity onPress={handleStop} style={styles.button}>
152-
<Text>Stop Publishing</Text>
153-
</TouchableOpacity>
154-
</>
155-
)}
156-
</View>
157-
</SafeAreaView>
25+
<NavigationContainer>
26+
<Stack.Navigator initialRouteName="MainScreen">
27+
<Stack.Screen name="MainScreen" component={MainScreen} options={{ title: 'Home' }} />
28+
<Stack.Screen name="AppScreen" component={AppScreen} />
29+
<Stack.Screen name="Publish" component={Publish} />
30+
<Stack.Screen name="Play" component={Play} />
31+
<Stack.Screen name="Peer" component={Peer} />
32+
<Stack.Screen name="Conference" component={Conference} />
33+
<Stack.Screen name="Chat" component={Chat} />
34+
</Stack.Navigator>
35+
</NavigationContainer>
15836
);
159-
}
37+
};
16038

161-
const styles = StyleSheet.create({
162-
container: {
163-
flex: 1,
164-
alignItems: 'center',
165-
justifyContent: 'center',
166-
},
167-
box: {
168-
alignSelf: 'center',
169-
width: '80%',
170-
height: '80%',
171-
},
172-
streamPlayer: {
173-
width: '100%',
174-
height: '80%',
175-
alignSelf: 'center',
176-
},
177-
button: {
178-
alignItems: 'center',
179-
backgroundColor: '#DDDDDD',
180-
padding: 10,
181-
marginBottom: 10,
182-
},
183-
heading: {
184-
alignSelf: 'center',
185-
},
186-
});
39+
export default App;

‎example/src/Chat.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,12 @@ const styles = StyleSheet.create({
184184
},
185185
button: {
186186
alignItems: 'center',
187-
backgroundColor: '#DDDDDD',
187+
backgroundColor: '#AAAAAA',
188188
padding: 10,
189189
marginBottom: 10,
190190
},
191191
heading: {
192192
alignSelf: 'center',
193+
color: 'black'
193194
},
194195
});

‎example/src/Conference.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ const styles = StyleSheet.create({
332332
button: {
333333
alignItems: 'center',
334334
justifyContent: 'center',
335-
backgroundColor: '#DDDDDD',
335+
backgroundColor: '#AAAAAA',
336336
padding: 10,
337337
width: '100%',
338338
marginTop: 20,
@@ -341,15 +341,17 @@ const styles = StyleSheet.create({
341341
alignSelf: 'center',
342342
marginBottom: 5,
343343
padding: 2,
344+
color: 'black'
344345
},
345346
heading1: {
346347
alignSelf: 'center',
347348
marginTop: 20,
349+
color: 'black'
348350
},
349351
roundButton: {
350352
alignItems: 'center',
351353
justifyContent: 'center',
352-
backgroundColor: '#DDDDDD',
354+
backgroundColor: '#AAAAAA',
353355
padding: 5,
354356
borderRadius: 25, // This will make the button round
355357
width: 30, // Diameter of the button

‎example/src/MainScreen.tsx

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React from 'react';
2+
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
3+
import { StackNavigationProp } from '@react-navigation/stack';
4+
5+
type RootStackParamList = {
6+
MainScreen: undefined;
7+
Publish: undefined;
8+
Play: undefined;
9+
Peer: undefined;
10+
Conference: undefined;
11+
Chat: undefined;
12+
};
13+
14+
type MainScreenProps = {
15+
navigation: StackNavigationProp<RootStackParamList, 'MainScreen'>;
16+
};
17+
18+
const MainScreen: React.FC<MainScreenProps> = ({ navigation }) => {
19+
return (
20+
<View style={styles.container}>
21+
<Text style={styles.title}>Sample Apps</Text>
22+
23+
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Publish')}>
24+
<Text style={styles.text}>Publish</Text>
25+
</TouchableOpacity>
26+
27+
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Play')}>
28+
<Text style={styles.text}>Play</Text>
29+
</TouchableOpacity>
30+
31+
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Peer')}>
32+
<Text style={styles.text}>Peer</Text>
33+
</TouchableOpacity>
34+
35+
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Conference')}>
36+
<Text style={styles.text}>Conference</Text>
37+
</TouchableOpacity>
38+
39+
<TouchableOpacity style={styles.box} onPress={() => navigation.navigate('Chat')}>
40+
<Text style={styles.text}>Chat</Text>
41+
</TouchableOpacity>
42+
43+
</View>
44+
);
45+
};
46+
47+
const styles = StyleSheet.create({
48+
container: {
49+
flex: 1,
50+
justifyContent: 'center',
51+
alignItems: 'center',
52+
backgroundColor: '#f5f5f5',
53+
},
54+
title: {
55+
fontSize: 24,
56+
fontWeight: 'bold',
57+
marginBottom: 20,
58+
color: 'black',
59+
},
60+
box: {
61+
width: 200,
62+
height: 60,
63+
backgroundColor: '#6200ee',
64+
justifyContent: 'center',
65+
alignItems: 'center',
66+
borderRadius: 10,
67+
marginVertical: 10,
68+
},
69+
text: {
70+
color: 'white',
71+
fontSize: 18,
72+
},
73+
});
74+
75+
export default MainScreen;

‎example/src/Peer.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function App() {
4444
console.log('leaved!');
4545
setIsPlaying(false);
4646
break;
47-
case "newStreamAvailable":
47+
case "newStreamAvailable":
4848
if(data.streamId == streamNameRef.current)
4949
setRemoteStream(data.stream.toURL());
5050
default:
@@ -161,12 +161,13 @@ const styles = StyleSheet.create({
161161
},
162162
button: {
163163
alignItems: 'center',
164-
backgroundColor: '#DDDDDD',
164+
backgroundColor: '#AAAAAA',
165165
padding: 10,
166166
marginBottom: 10,
167167
},
168168
heading: {
169169
alignSelf: 'center',
170170
marginBottom: 10,
171+
color: 'black'
171172
},
172173
});

0 commit comments

Comments
 (0)