react-native-webrtc

import React, { useEffect, useRef, useState } from 'react'; import { View, Text, Button, Platform, PermissionsAndroid, Alert } from 'react-native'; import { RTCPeerConnection, RTCIceCandidate, RTCSessionDescription, RTCView, mediaDevices, } from 'react-native-webrtc'; const configuration = { iceServers: [{ url: 'stun:stun.l.google.com:19302' }] }; export default function App() { const [localStream, setLocalStream] = useState<any>(null); const pc = useRef<RTCPeerConnection | null>(null); useEffect(() => { (async () => { if (Platform.OS === 'android') { await PermissionsAndroid.requestMultiple([ PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, ]); } try { const stream = await mediaDevices.getUserMedia({ audio: true, video: { mandatory: { minWidth: '500', minHeight: '300', minFrameRate: '30', }, facingMode: 'user', }, }); setLocalStream(stream); pc.current = new RTCPeerConnection(configuration); pc.current.addStream(stream); pc.current.onicecandidate = (event) => { if (event.candidate) { console.log('ICE Candidate:', event.candidate); // In a real app, you would send this candidate to the remote peer } }; const offer = await pc.current.createOffer(); await pc.current.setLocalDescription(offer); console.log('Local Offer:', offer.sdp); // In a real app, you would send this offer to the remote peer } catch (err: any) { Alert.alert('Media Error', err.message); } })(); return () => { if (localStream) { localStream.release(); } if (pc.current) { pc.current.close(); } }; }, []); if (!localStream) { return <Text>Loading local media...</Text>; } return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Local Stream:</Text> <RTCView streamURL={localStream.toURL()} style={{ width: 300, height: 200, backgroundColor: 'black' }} /> <Button title="Start Call (logic incomplete)" onPress={() => Alert.alert('Simulated Call', 'Offer sent (check console)')} /> </View> ); }