Skip to main content
Version: 2.12-SNAPSHOT

React Native SDK Usage

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 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 WebRTC-React-Native-SDK

Publish Stream

The method below is used to publish a stream:

adaptor.publish(streamName);

The method below is used to stop the stream:

adaptor.stop(streamName);

Detailed code can be viewed at WebRTC-React-Native-SDK Publish

Play Stream

The method below is used to play a stream:

adaptor.play(streamName);

Detailed code can be viewed at WebRTC-React-Native-SDK Play

Use Peer-To-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 at WebRTC-React-Native-SDK p2p

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 at WebRTC-React-Native-SDK Conference

Use The Data Channel

The method below is used to send messages:

adaptor.sendData(streamId, message);

Detailed code can be viewed in WebRTC-React-Native-SDK Data Channel

Render Stream

To display a local or remote video stream, use the rtc_view component.

rtc_view(stream, /*custom style*/{ width: 100, height: 100 });

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
};

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
};

Change Remote Audio Tracks Volume Level

const audioTrack = remoteMediaStream.getAudioTracks()[0];
audioTrack._setVolume(0.5);

For more information about the React Native SDK, check the repository