react-native-webrtc-simple
A simple and easy to use module that help in making video call for React Native.
Implemented using react-native-webrtc.
Getting started
npm install react-native-webrtc-simple --save
or
yarn add react-native-webrtc-simple
Now we need to install react-native-webrtc
Document
WebrtcSimple
| Method |
Description |
| start |
Create connections |
| stop |
Stop connections |
| getSessionId |
Get your session id |
| getLocalStream |
Get your video stream |
| getRemoteStream |
Get remote video stream |
| listenings |
Listenings call events |
| events |
Method call events |
WebrtcSimple.start
| Value |
Type |
Description |
| optional |
Object or null |
Option peer configuration (https://peerjs.com/) |
| key |
String |
Your session id |
Peer-to-Peer
WebrtcSimple.listenings.callEvents
| Value |
Type |
Description |
| START_CALL |
String |
Your start call status |
| RECEIVED_CALL |
String |
Call received status |
| ACCEPT_CALL |
String |
Call aceept status |
| END_CALL |
String |
Call end status |
| MESSAGE |
String |
Listenings a message |
WebrtcSimple.events
| Method |
Params |
Description |
| call |
sessionId:String, data:any |
Initiate a call |
| acceptCall |
No |
Accept a call |
| endCall |
No |
Reject a call |
| switchCamera |
No |
Switch camera |
| videoEnable |
No |
On/Off video |
| audioEnable |
No |
On/Off audio |
| message |
data:any |
Events send message |
Multiple Peer
WebrtcSimple.listenings.callEvents
| Value |
Type |
Description |
| START_GROUP_CALL |
String |
Your start call status |
| RECEIVED_GROUP_CALL |
String |
Call received status |
| JOIN_GROUP_CALL |
String |
Call received status |
| LEAVE_GROUP_CALL |
String |
Call reject status |
WebrtcSimple.events
| Method |
Params |
Description |
| groupCall |
groupSessionId: string[], userData: object = {} |
Start group call |
| joinGroup |
arrSessionId: string[] |
Join group call |
| leaveGroup |
No |
Leave group call |
| addStream |
sessionId: string |
Create a stream |
| switchCamera |
No |
Switch camera |
| videoEnable |
No |
On/Off video |
| audioEnable |
No |
On/Off audio |
| message |
data:any |
Events send message |
Usage
import WebrtcSimple from 'react-native-webrtc-simple';
useEffect(() => {
const configuration = {
optional: null,
key: Math.random().toString(36).substr(2, 4), //optional
};
WebrtcSimple.start(configuration)
.then((status) => {
if (status) {
const stream = WebrtcSimple.getLocalStream();
console.log('My stream: ', stream);
WebrtcSimple.getSessionId((id: string) => {
console.log('UserId: ', id);
});
}
})
.catch();
WebrtcSimple.listenings.callEvents((type, userData) => {
console.log('Type: ', type);
// START_CALL
// RECEIVED_CALL
// ACCEPT_CALL
// END_CALL
// MESSAGE
// START_GROUP_CALL
// RECEIVED_GROUP_CALL
// JOIN_GROUP_CALL
// LEAVE_GROUP_CALL
});
WebrtcSimple.listenings.getRemoteStream((remoteStream) => {
console.log('Remote stream', remoteStream);
});
}, []);
const callToUser = (userId) => {
const data = {};
WebrtcSimple.events.call(userId, data);
};
const acceptCall = () => {
WebrtcSimple.events.acceptCall();
};
const endCall = () => {
WebrtcSimple.events.endCall();
};
const switchCamera = () => {
WebrtcSimple.events.switchCamera();
};
const video = (enable: boolean) => {
WebrtcSimple.events.videoEnable(enable);
};
const audio = (enable: boolean) => {
WebrtcSimple.events.audioEnable(enable);
};
const sendMessage = (message: any) => {
WebrtcSimple.events.message(message);
};
const groupCall = (sessionId: string[]) => {
const data = {};
WebrtcSimple.events.groupCall(sessionId, data);
};
const joinGroup = (groupSessionId: string[]) => {
WebrtcSimple.events.joinGroup(groupSessionId);
};
const leaveGroup = () => {
WebrtcSimple.events.leaveGroup();
};