WebRTC React Native: Build Real-Time Video Chat Applications

1npm install react-native-webrtc
2

1yarn add react-native-webrtc
2

1react-native run-android
2react-native run-ios
3

1import {mediaDevices} from 'react-native-webrtc';
2import {RTCPeerConnection, RTCIceCandidate, RTCSessionDescription} from 'react-native-webrtc';
3import {RTCView} from 'react-native-webrtc';
4

1<uses-permission android:name="android.permission.CAMERA" />
2<uses-permission android:name="android.permission.RECORD_AUDIO" />
3<uses-permission android:name="android.permission.INTERNET" />
4<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
5<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
6<uses-permission android:name="android.permission.BLUETOOTH" />
7<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
8<uses-feature android:name="android.hardware.camera" />
9<uses-feature android:name="android.hardware.camera.autofocus" />
10

1<key>NSCameraUsageDescription</key>
2<string>This app needs access to your camera for video calls.</string>
3<key>NSMicrophoneUsageDescription</key>
4<string>This app needs access to your microphone for audio calls.</string>
5

1YourProject/
2  ├── App.js
3  ├── components/
4  │   ├── Video.js
5  │   └── ...
6  ├── services/
7  │   └── WebRTCService.js
8  └── ...
9

1import React, {useState, useEffect, useRef} from 'react';
2import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
3import {RTCView} from 'react-native-webrtc';
4
5const VideoComponent = () => {
6  const [localStream, setLocalStream] = useState(null);
7  const [remoteStream, setRemoteStream] = useState(null);
8
9  return (
10    <View style={styles.container}>
11      <Text>Local Video</Text>
12      <RTCView streamURL={localStream ? localStream.toURL() : null} style={styles.video} objectFit="cover"/>
13      <Text>Remote Video</Text>
14      <RTCView streamURL={remoteStream ? remoteStream.toURL() : null} style={styles.video} objectFit="cover"/>
15    </View>
16  );
17};
18
19const styles = StyleSheet.create({
20  container: {
21    flex: 1,
22    justifyContent: 'center',
23    alignItems: 'center',
24  },
25  video: {
26    width: 200,
27    height: 200,
28    borderColor: 'black',
29    borderWidth: 1,
30  },
31});
32
33export default VideoComponent;
34

1const configuration = {
2  iceServers: [
3    { urls: 'stun:stun.l.google.com:19302' },
4    { urls: 'stun:stun1.l.google.com:19302' },
5  ],
6};
7
8const pc = new RTCPeerConnection(configuration);
9

1mediaDevices.getUserMedia({ audio: true, video: true })
2  .then(stream => {
3    // Got stream!
4  })
5  .catch(error => {
6    // Handle error
7  });
8

1stream.getTracks().forEach(track => pc.addTrack(track, stream));
2

1pc.onicecandidate = event => {
2  if (event.candidate) {
3    // Send candidate to remote peer via signaling
4  }
5};
6
7pc.onconnectionstatechange = event => {
8  switch (pc.connectionState) {
9    case 'disconnected':
10    case 'failed':
11      // Handle disconnection
12      break;
13  }
14};
15

1const dataChannel = pc.createDataChannel('myChannel');
2
3dataChannel.onopen = () => {
4  dataChannel.send('Hello, world!');
5};
6
7dataChannel.onmessage = event => {
8  console.log('Received message:', event.data);
9};
10