Skip to main content

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