React Native SDK Reference
Before moving forward with using WebRTC React Native SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general.
Install @antmedia/react-native-ant-media Package
npm
npm i @antmedia/react-native-ant-media react-native-webrtc
yarn
yarn add @antmedia/react-native-ant-media react-native-webrtc
initialize useAntMedia adaptor
import { useAntMedia, rtc_view } from "@antmedia/react-native-ant-media";
const adaptor = useAntMedia({
url: 'wss://<your_server_domain_>/<application_name>/websocket', // your web socket server URL
mediaConstraints: {
audio: true,
video: {
width: 640,
height: 480,
frameRate: 30,
facingMode: "front",
},
},
callback: (message, data) => {
console.log("Callback message: ", message, "Data: ", data);
},
callbackError: (errorMessage, data) => {
console.error("Error message: ", errorMessage, "Data: ", data);
},
peer_connection_config: {
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
},
debug: true,
onlyDataChannel: false, // for using only data channel not audio and video
});
The example above is taken from ant-media / WebRTC-React-Native-SDK
How to publish a stream
The method below is used to publish a stream.
adaptor.publish(streamName);
The method below is used to stop publish
adaptor.stop(streamName);
Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Publish
How to play a stream
The method below is used to play a stream.
adaptor.play(streamName);
Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Play
How to use peer 2 peer
The method method is used to join a room.
adaptor.join(streamName);
The method below is used to leave a room.
adaptor.leave(streamName);
Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK p2p
How to use conference
The method below is used to join a room.
adaptor.joinRoom(room);
The method below is used to leave a room.
adaptor.leaveFromRoom(room);
Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Conference
How to use the data channel
The method below is used to send messages.
adaptor.sendData(streamId, message);
Detailed code can be viewed in ant-media / WebRTC-React-Native-SDK Data Channel
How to render stream
To display a local or remote video stream, use the rtc_view component.
rtc_view(stream, /*custom style*/{ width: 100, height: 100 });
How to switch camera
You need to get video track to switch camera.
let isFrontCam = true;
try {
// Taken from above, we don't want to flip if we don't have another camera.
if ( cameraCount < 2 ) { return; };
const videoTrack = adaptor.localStream.current.getVideoTracks()[0];
videoTrack._switchCamera();
isFrontCam = !isFrontCam;
} catch( err ) {
// Handle Error
};
How to toggle the microphone
You can mute/unmute microphone by toggling the track enabled value. It can be applied to local microphone and remote audio tracks.
let isMuted = false;
try {
const audioTrack = await adaptor.localStream.current.getAudioTracks()[0];
audioTrack.enabled = !audioTrack.enabled;
isMuted = !isMuted;
} catch( err ) {
// Handle Error
};
How to change remote audio tracks volume level
const audioTrack = remoteMediaStream.getAudioTracks()[0];
audioTrack._setVolume(0.5);
Check Also: WebRTC-React-Native-SDK