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;
