import React, { useEffect, useRef } from 'react';

import { View, Text, Button } from 'react-native';

import { RTCPeerConnection, RTCView, mediaDevices } from 'react-native-webrtc';
import io from 'socket.io-client';

const App = () => {

const socket = useRef(null);
const pc = useRef(null);
const localStream = useRef(null);

useEffect(() => {
// Initialize socket connection
socket.current = io('your_socket_server_url');

// Initialize PeerConnection
pc.current = new RTCPeerConnection();

// Get user media (video) and add it to PeerConnection

const getLocalStream = async () => {
try {
const stream = await mediaDevices.getUserMedia({ video: true });
localStream.current = stream;
pc.current.addStream(stream);
} catch (error) {
console.error('Error accessing media devices:', error);
}
};

getLocalStream();

// Start transmitting video frames to the server

const sendVideoFrames = () => {
const videoTrack = localStream.current.getVideoTracks()[0];
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

setInterval(() => {
if (videoTrack && pc.current && pc.current.getSenders().length > 0) {
const { width, height } = videoTrack.getSettings();
canvas.width = width;
canvas.height = height;
context.drawImage(videoTrack, 0, 0, width, height);
const imageData = context.getImageData(0, 0, width, height);
// Send imageData to server via socket
socket.current.emit('videoFrame', imageData);
}
}, 1000 / 30); // Send video frames at 30fps
};

sendVideoFrames();

return () => {
// Cleanup: close socket connection and release resources
if (socket.current) {
socket.current.close();
}
if (localStream.current) {
localStream.current.release();
}
 if (pc.current) {
pc.current.close();
}
};
}, []);

return (
<View>
<Text>Transmitting Video</Text>
</View>
);
};

export default App;