React Native AntMedia

Essential SDK to use antmedia with React native.

Table of content

1. What is RN AntMedia?
2. Getting Started
3. Using
4. Hook Parameters
5. Hook returned adaptor
6. Help this project

1. What is RN AntMedia?

RN AntMedia is an port of web sdk of antmedia webrtc_adaptor to react-native using react-native-webrtc. Some functionalities still the same but others have some differences.

Some functionalities are under development.

2. Getting Started

NOTE for Expo users: this plugin doesn't work unless you eject since you need to install react-native-webrtc too.

npm

	npm i rn-antmedia react-native-webrtc

yarn

	yarn add rn-antmedia react-native-webrtc

3. Usage

import React, { useState, useRef, useCallback } from 'react';
import {SafeAreaView, Button} from 'react-native';
import {RTCView} from 'react-native-webrtc';
/* importing lib */
import { useAntMedia } from 'rn-antmedia';

const App = () => {
	const [localStream, setLocalStream] = useState('');
	const [remoteStream, setRemoteStream] = useState(null);
	const stream = useRef({id: ''}).current;
	
	const adaptor = useAntMedia({
    url: 'wss://testserver.com/WebRTCAppEE/websocket',
    mediaConstraints: {
      video: true,
      audio: true,
    },
    sdp_constraints: {
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
    },
		bandwidth: 300,
    callback(command, data) {
      switch (command) {
        case 'pong':
          break;
        case 'joinedTheRoom':
          if ('onJoinedRoom' in events) {
            const tok = data.ATTR_ROOM_NAME;
            this.initPeerConnection(data.streamId);
            this.publish(data.streamId, tok);

            const streams = data.streams;

            if (streams != null) {
              streams.forEach((item) => {
                if (item === stream.id) return;
                this.play(item, tok, roomId);
              });
            }
          }
          break;
        case 'streamJoined':
          if ('onStreamJoined' in events) {
            this.play(data.streamId, token, roomId);
          }
          break;
        default:
          break;
      }
    },
    callbackError: (err, data) => {
      console.error('callbackError', err, data);
    },
	});

	const handleConnect = useCallback(() => {
		if (adaptor) {
			const streamId = `12ans1`;
			const roomId = '5abcd1';

			stream.id = streamId;

			adaptor.joinRoom(roomId, streamId);
		};
	}, [adaptor]);

	useEffect(() => {
    if (adaptor) {
      const verify = () => {
        if (
          adaptor.localStream.current &&
          adaptor.localStream.current.toURL()
        ) {
          return setLocalStream(adaptor.localStream.current.toURL());
        }
        setTimeout(verify, 3000);
      };
      verify();
    }
	}, [adaptor]);
	
	useEffect(() => {
    if (adaptor && Object.keys(adaptor.remoteStreams).length > 0) {
      for (let i in adaptor.remoteStreams) {
        if (i !== stream.id) {
          let st =
            adaptor.remoteStreams[i][0] &&
            'toURL' in adaptor.remoteStreams[i][0]
              ? adaptor.remoteStreams[i][0].toURL()
              : null;
          setRemoteStream(st);
          break;
        } else {
          setRemoteStream(null);
        }
      }
    }
  }, [adaptor, stream.id]);

	
	return (
		<SafeAreaView style={{flex: 1;}}>
		{
			localStream && remoteStream ? (
				<>
					<RTCView
						style={{flex: 1}}
						objectFit="cover"
						streamURL={remoteStream}
					/>
					<RTCView
						style={{ width: 200, height: 200,  position: 'absolute', bottom: 0, right: 0, }}
						objectFit="cover"
						streamURL={localStream}
					/>
				</>
			) : (
				<Button
					onPress={handleConnect}
					title="Join room"
					color="#841584"
					accessibilityLabel="Connect to antmedia"
				/>
			)
		}
		</SafeAreaView>
	)
};

4. Hooks Parameters

When you call a hook function, you need to pass some of this params to work, by default the hook will start getUserMedia with mediaConstraints.

Params with * is mandatory acctually

• *url: string with url to your antmedia server example "wss://testserver.com/WebRTCAppEE/websocket"
• *mediaConstraints: object with constraints to getUserMedia (react-native-webrtc)
• *sdp_constraints: object with constraints to RTCSessionDescription (react-native-webrtc)
• peerconnection_config: object with peerconnection configurartion (react-native-webrtc)
• *bandwidth: object with bandwidth config number or string example 300 or "unlimited"
• callback: callback function when some event is fired by antmedia server by websocket
  • callback(this, message, data)
  • callback-this: is object returned by hook to use internally in callback
  • callback-message: is message returned by antmedia server
  • callback-data: is data returned by antmedia server (by the event could be undefined)
• *callbackError: callback function when some error event is fired by antmedia server by websocket
  • callbackError(errorMessage, data)
  • callbackError-errorMessage: error message from antmedia event
  • callbackError-data: error data
• *onopen: callback function called when connection is done between antmedia server and client
  • onopen-data: is data returned by onopen event in websocket connection

5. Hook returned adaptor

Params with * is mandatory

• publish(*streamId, token): based on publish by antmedia webrtcAdaptor
• joinRoom(*room, streamId): based on publish by antmedia webrtcAdaptor
• leaveFromRoom(room: string): based on publish by antmedia webrtcAdaptor
• join(*streamId): based on publish by antmedia webrtcAdaptor
• leave(*streamId): based on publish by antmedia webrtcAdaptor
• play(*streamId, token, room): based on publish by antmedia webrtcAdaptor
• stop(*streamId): based on publish by antmedia webrtcAdaptor
• localStream: this is local stream when the hook is started
• remoteStreams: this is object with remote streams when have connection between peers, acctually localStream come inside remoteStream, be careful when use this to renderize the other peers
• getUserMedia(*mediaConstrants): based on getUserMedia (react-native-webrtc)
• getStreamInfo(*streamId): based on publish by antmedia webrtcAdaptor
• signallingState(*streamId): this function return the signalling state of the gived stream id
• initPeerConnection(*streamId): funcion to initPeerConnection between the stream id and the user
• handleTurnVolume(): function to turn on/off the volume (by default is turned on)
• handleTurnCamera(): function to turn on/off the camera (by default is turned on)
• isTurnedOf: boolean to return the state of camera (true is turned on)
• isMuted: boolean to return the state of volume (true is turned on)

6. Help this project

How could you help this project: open an issue when you find some error, open an pull request when you find the solution.

If this project help you, please consider to help me to develop this project continuously.