Skip to content

Commit aaa91d4

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

File tree

4 files changed

+45
-189
lines changed

4 files changed

+45
-189
lines changed

‎example/index.js‎

Lines changed: 1 addition & 4 deletions
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‎

Lines changed: 7 additions & 1 deletion
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‎

Lines changed: 36 additions & 183 deletions
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;

‎src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,7 @@ export function useAntMedia(params: Params) {
483483

484484
getDevices();
485485

486-
if (!onlyDataChannel) {
486+
if (!onlyDataChannel && !isPlayMode) {
487487
mediaDevices.getUserMedia(mediaConstraints)
488488
.then((stream: any) => {
489489
// Got stream!

0 commit comments

Comments
 (0)