Skip to main content

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