Refactoring the code to ask for the room that it should connect.
This commit is contained in:
Filipi Fuchter
@@ -1,153 +1,99 @@
|
|||||||
import {
|
import React, { useState, useEffect } from 'react';
|
||||||
View,
|
import {SafeAreaView, View, Text, Button, StyleSheet, ScrollView} from 'react-native';
|
||||||
SafeAreaView,
|
import Daily from "@daily-co/react-native-daily-js";
|
||||||
StyleSheet,
|
|
||||||
Text,
|
|
||||||
Button,
|
|
||||||
TextInput,
|
|
||||||
} from "react-native";
|
|
||||||
import React, { useEffect, useState, useCallback } from "react";
|
|
||||||
import Daily, {
|
|
||||||
DailyMediaView,
|
|
||||||
DailyEventObjectParticipant,
|
|
||||||
} from "@daily-co/react-native-daily-js";
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const CallScreen = () => {
|
||||||
safeArea: {
|
const [connectionStatus, setConnectionStatus] = useState('Disconnected');
|
||||||
flex: 1,
|
const [isConnected, setIsConnected] = useState(false);
|
||||||
backgroundColor: "#f7f9fa",
|
const [callObject, setCallObject] = useState(null);
|
||||||
width: "100%",
|
const [logs, setLogs] = useState([]);
|
||||||
},
|
|
||||||
outCallContainer: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
inCallContainer: {
|
|
||||||
position: "absolute",
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
},
|
|
||||||
dailyMediaView: {
|
|
||||||
flex: 1,
|
|
||||||
aspectRatio: 9 / 16,
|
|
||||||
},
|
|
||||||
roomUrlInput: {
|
|
||||||
borderRadius: 8,
|
|
||||||
marginVertical: 8,
|
|
||||||
padding: 12,
|
|
||||||
fontStyle: "normal",
|
|
||||||
fontWeight: "normal",
|
|
||||||
borderWidth: 1,
|
|
||||||
width: "100%",
|
|
||||||
},
|
|
||||||
infoView: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
controlButton: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const ROOM_URL_TEMPLATE = "https://filipi.daily.co/public";
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [videoTrack, setVideoTrack] = useState();
|
|
||||||
const [callObject, setCallObject] = useState();
|
|
||||||
const [inCall, setInCall] = useState(false);
|
|
||||||
const [roomUrl, setRoomUrl] = useState(ROOM_URL_TEMPLATE);
|
|
||||||
const [remoteParticipantCount, setRemoteParticipantCount] = useState(0);
|
|
||||||
|
|
||||||
const handleNewParticipantsState = (event: DailyEventObjectParticipant) => {
|
|
||||||
const participant = event.participant;
|
|
||||||
// Early out as needed to avoid display the local participant's video
|
|
||||||
if (participant.local) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const videoTrack = participant.tracks.video;
|
|
||||||
setVideoTrack(videoTrack.persistentTrack);
|
|
||||||
// Set participant count minus the local participant
|
|
||||||
setRemoteParticipantCount(callObject.participantCounts().present - 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const joinRoom = () => {
|
|
||||||
console.log("Joining room");
|
|
||||||
callObject.join({
|
|
||||||
url: roomUrl,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const leaveRoom = async () => {
|
|
||||||
console.log("Leaving the room");
|
|
||||||
await callObject.leave();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Create the callObject and join the meeting
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const callObject = Daily.createCallObject();
|
if (callObject) {
|
||||||
setCallObject(callObject);
|
setupTrackListeners(callObject);
|
||||||
return () => {};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
//Add the listeners
|
|
||||||
useEffect(() => {
|
|
||||||
if (!callObject) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
callObject
|
|
||||||
.on("joined-meeting", () => setInCall(true))
|
|
||||||
.on("left-meeting", () => setInCall(false))
|
|
||||||
.on("participant-joined", handleNewParticipantsState)
|
|
||||||
.on("participant-updated", handleNewParticipantsState)
|
|
||||||
.on("participant-left", handleNewParticipantsState);
|
|
||||||
return () => {};
|
|
||||||
}, [callObject]);
|
}, [callObject]);
|
||||||
|
|
||||||
|
const log = (message) => {
|
||||||
|
setLogs((prevLogs) => [...prevLogs, `${new Date().toISOString()} - ${message}`]);
|
||||||
|
console.log(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setupTrackListeners = (callObject) => {
|
||||||
|
callObject.on("joined-meeting", () => {
|
||||||
|
setConnectionStatus('Connected');
|
||||||
|
setIsConnected(true);
|
||||||
|
log('Client connected');
|
||||||
|
});
|
||||||
|
callObject.on("left-meeting", () => {
|
||||||
|
setConnectionStatus('Disconnected');
|
||||||
|
setIsConnected(false);
|
||||||
|
log('Client disconnected');
|
||||||
|
});
|
||||||
|
callObject.on("error", (evt) => log(`Error: ${evt.error}`));
|
||||||
|
};
|
||||||
|
|
||||||
|
const connect = async () => {
|
||||||
|
try {
|
||||||
|
const callObject = Daily.createCallObject({ subscribeToTracksAutomatically: true });
|
||||||
|
setCallObject(callObject);
|
||||||
|
const connectionUrl = 'http://192.168.1.16:7860/connect'
|
||||||
|
const res = await fetch(connectionUrl, { method: "POST", headers: { "Content-Type": "application/json" } });
|
||||||
|
const roomInfo = await res.json();
|
||||||
|
await callObject.join({ url: roomInfo.room_url });
|
||||||
|
} catch (error) {
|
||||||
|
log(`Error connecting: ${error.message}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const disconnect = async () => {
|
||||||
|
if (callObject) {
|
||||||
|
try {
|
||||||
|
await callObject.leave();
|
||||||
|
await callObject.destroy();
|
||||||
|
setCallObject(null);
|
||||||
|
} catch (error) {
|
||||||
|
log(`Error disconnecting: ${error.message}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={styles.safeArea}>
|
<SafeAreaView style={styles.safeArea}>
|
||||||
{inCall ? (
|
<View style={styles.container}>
|
||||||
<View style={styles.inCallContainer}>
|
<View style={styles.statusBar}>
|
||||||
{remoteParticipantCount > 0 ? (
|
<Text>Status: <Text style={styles.status}>{connectionStatus}</Text></Text>
|
||||||
<DailyMediaView
|
<View style={styles.controls}>
|
||||||
videoTrack={videoTrack}
|
<Button title="Connect" onPress={connect} disabled={isConnected} />
|
||||||
mirror={false}
|
<Button title="Disconnect" onPress={disconnect} disabled={!isConnected} />
|
||||||
objectFit="cover"
|
</View>
|
||||||
style={styles.dailyMediaView}
|
</View>
|
||||||
/>
|
|
||||||
) : (
|
<View style={styles.debugPanel}>
|
||||||
<View style={styles.infoView}>
|
<Text style={styles.debugTitle}>Debug Info</Text>
|
||||||
<Text>No one else is in the call yet!</Text>
|
<View style={styles.debugLog}>
|
||||||
<Text>Invite others to join the call using this link:</Text>
|
<Text>Debug logs will appear here...</Text>
|
||||||
<Text>{roomUrl}</Text>
|
<ScrollView style={styles.debugLog}>
|
||||||
|
{logs.map((logEntry, index) => (
|
||||||
|
<Text key={index} style={styles.logText}>{logEntry}</Text>
|
||||||
|
))}
|
||||||
|
</ScrollView>
|
||||||
</View>
|
</View>
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
style={styles.controlButton}
|
|
||||||
onPress={() => leaveRoom()}
|
|
||||||
title="Leave call"
|
|
||||||
></Button>
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
<View style={styles.outCallContainer}>
|
|
||||||
<View style={styles.infoView}>
|
|
||||||
<Text>Not in a call yet</Text>
|
|
||||||
<TextInput
|
|
||||||
style={styles.roomUrlInput}
|
|
||||||
value={roomUrl}
|
|
||||||
onChangeText={(newRoomURL) => {
|
|
||||||
setRoomUrl(newRoomURL);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
style={styles.controlButton}
|
|
||||||
onPress={() => joinRoom()}
|
|
||||||
title="Join call"
|
|
||||||
></Button>
|
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)}
|
</SafeAreaView>
|
||||||
</SafeAreaView>
|
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
safeArea: { flex: 1, backgroundColor: '#f0f0f0', padding: 20 },
|
||||||
|
container: { flex: 1, maxWidth: 1200, margin: 'auto' },
|
||||||
|
statusBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, backgroundColor: '#fff', borderRadius: 8, marginBottom: 20 },
|
||||||
|
status: { fontWeight: 'bold' },
|
||||||
|
controls: { flexDirection: 'row', gap: 10 },
|
||||||
|
debugPanel: { backgroundColor: '#fff', borderRadius: 8, padding: 20 },
|
||||||
|
debugTitle: { fontSize: 16, fontWeight: 'bold' },
|
||||||
|
debugLog: { height: 200, overflow: 'scroll', backgroundColor: '#f8f8f8', padding: 10, borderRadius: 4, fontFamily: 'monospace', fontSize: 12, lineHeight: 1.4 },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default CallScreen;
|
||||||
|
|||||||
Reference in New Issue
Block a user